@import url("./components/drag-and-drop/drag-and-drop.css");



html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

main {
    margin: 0;
    /*background: #fafafa;*/
    /*min-height: 100vh;*/
    /*overflow: hidden;*/
}

canvas {
    width: 100%;
    height: 100%;
    margin: 0; padding: 0;
    position: fixed;
    z-index: -10;
    transform: translateX(-25%);
}


.tall {
    min-height: 90vh;
}

.highlight {
    border: 2px dashed #cfc;
}

.nomargins {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
}

.notopspace {
    margin-top: 0;
    padding-top: 0;
}

.top-sticky {
    position: sticky;
    top: 0;
}

/* .solid-color {
    background: rgba(250,250,250,0.8);
} */

.vcenter {
    /*margin: 0;
    margin-top: 50%;
    transform: translateY(-50%);*/
    display: flex;
    flex-direction: column;
    justify-content: center;
}



.hidden {
    display: none;
}

.logo {
    background: url('./img/logo.svg') no-repeat;
    background-position: 1em 1em;
    background-size: 20em;
    min-width: 21em;
    margin: 0;
    height: 80px;
}

.align-right {
    text-align: center;
}


.bg-design {
    background-image: url("./img/design.png");
    padding: 0;
    min-height: 80vh;
    background-size: cover;
    background-position: 50% 50%;
    -moz-transition: background 0.5s ease-in-out;
    transition: background 0.5s ease-in-out;

}

.bg-stampe {
    background: url("./img/stampe.png");
    padding: 0;
    min-height: 80vh;
    background-size: cover;
    background-position: 50% 50%;
    -moz-transition: background 0.5s ease-in-out;
    transition: background 0.5s ease-in-out;
}


.bg-tutoring {
    background: url("./img/Modellazione.png");
    padding: 0;
    min-height: 80vh;
    background-size: cover;
    background-position: 0% 50%;
    -moz-transition: background 0.5s ease-in-out;
    transition: background 0.5s ease-in-out;
}

.blender {
    background: url("./img/blender_community_badge_white.png") no-repeat;
    background-size: 4em;
    background-position: right center;
    position: absolute;
    right: 0;
    top: 3em;
    padding: 10%;
    z-index: 5;
}

.bluecast {
    background: url("./img/bluecast-logo.png") no-repeat;
    background-size: 2.4em;
    background-position: left center;
    position: absolute;
    left: 0;
    top: 4em;
    padding: 5%;
    z-index: 5;
}

.clearance {
    min-height: 9rem;
    min-width: 99%;
}

.gallery {
 /**/
}

.arrows {
    margin-top: 20%;
    display: flex;
    justify-content: space-between;
}

.arrows > div {
    font-size: 2rem;
    margin: 0;
    margin-left: .2em;
    margin-right: .2em;
    padding: 0;
    color: var(--background-color);
    opacity: .8;
    text-shadow: 0 0 8px black;
}

.arrows > div:hover {
    text-shadow: 0 0 8px white;
}

[data-theme="dark"] .logo {
    filter: invert(100%);
}

[data-theme="dark"] canvas {
    filter: invert(100%);
}

nav.top-sticky {
    z-index: 100;
    min-width: 99vw;
    background: var(--background-color);
    margin: 0;
    margin-left: calc(var(--spacing) * -1);
    padding-left: var(--spacing);
    padding-right: var(--spacing);


    /**/
}


nav.menu {
    height: 80px;
    position: sticky;
    top: -2px;
    margin-top: -110px;
    margin-left: 30px;

        ul>li>a {
            font-size: 1.2rem;
            color: var(--h1-color);
        }
    
        ul>li>a[role="button"] {
            background: var(--h1-color);
            border-color: var(--h1--color);
        }
}

nav.menu[stuck] {
    margin-left: auto;
    justify-content: right;
    z-index: 300;

    opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: .6s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.grid>div>div>h1 {
    margin-bottom: 0;
    font-size: 3em;
}

.grid>div>div>h3 {
    margin-bottom: 0;
}

.grid>div>div>h5 {
    margin-bottom: 0;
    font-weight: normal;
}

.glider-slide {
    margin-left: 6px;
}

model-viewer {
    width: 100%;
    height: 90%;
}

.fb-logo {
    min-height: 1em;
    min-width: 1em;
    background: url('./img/fb.svg') no-repeat;
    background-size: .8em .8em;
    background-position: 0 .5em;
    padding-left: 1em;
}

.ig-logo {
    min-height: 1em;
    min-width: 1em;
    background: url('./img/ig.svg') no-repeat;
    background-size: .8em .8em;
    background-position: 0 .5em;
    padding-left: 1em;
}

.gallery {
    display: flex;
    align-items: center;
    padding: 5px;
}

.glider {
    max-height: 80%;
    overflow: hidden;
    border-radius: 0;
    /* box-shadow: var(--card-box-shadow); */
    margin-top: 4em;
}

.glider-contain {
    height: fit-content;
}

.glider-prev {
    float: left;
    width: auto;
    top: 50%;
}

.glider-next {
    float: left;
    width: auto;
    top: 50%;
}

.glider img {
    width: 48vw;
    object-fit: cover;
}

p>ul>li {
    margin: 0;
}

div>p {
    text-shadow: 0 0 3px white ;
}

.lighter {
    color: var(--code-comment-color);
    font-size: 0.5em;
    padding: 0;
    margin: 0;
}
@media only screen and (max-width: 992px) {

    canvas {
        position: fixed;
        top: 100px;
        width: 100%;
        margin-left: 25%;
        overflow: hidden;
    }

    .arrows {
        margin-top: 60%;
    }

    .tall {
        min-height: 0;
        height: auto;
    }

    .rev>div:first-child {
        order: 2;
    }

    .rev>div:last-child {
        order: 1;
        height: 10em;
    }


    .vcenter {
        /*margin-top: 20%;*/
        height: auto;
        background: none;
    }

    nav {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        width: 95vw;
        height: 8em;
        overflow: hidden;
    }

    nav.menu {
        position: fixed;
        top: 100px;
        left: 5px;
        z-index: 100;
        margin-left: 0;
        margin-right: 0;
        padding: 0;

    }

    nav.menu ul>li>a {
        font-size: 3.82vw;

        overflow: hidden;
        white-space: nowrap;
        overflow: clip;
    }

    nav ul.logo {
        margin-top: 1em;
    }

    nav ul:first-child {
        min-height: 57px;
        margin: 0;
        padding: 0;
    }
    nav ul:last-child {
        flex-shrink: 1;
        margin: 0;
        padding: 0;
        margin-top: -10px;
    }


    .logo {
        padding: 0;
        margin: 0;
    }

    .glider {
        margin-top: 0;
        height: auto;
    }

    .glider img {
        object-fit: contain;
        /*height: 60vh;*/
        width: 95vw;
    }

    .glider-prev {
        float: left;
        margin-left: .8em;
        width: auto;
    }

    .glider-next {
        float: left;
        margin-right: .8em;
        width: auto;
    }

    .blender {
        top: 0;
    }

    .bluecast {
        top: 0.4em;
    }
}