@import url(https://db.onlinewebfonts.com/c/9527a4c4f55e8075eb6a60fe577d89c4?family=Px+Grotesk+Regular);
@font-face {
    font-family: "Px Grotesk Regular";
    src: url("https://db.onlinewebfonts.com/t/9527a4c4f55e8075eb6a60fe577d89c4.eot");
    src: url("https://db.onlinewebfonts.com/t/9527a4c4f55e8075eb6a60fe577d89c4.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/9527a4c4f55e8075eb6a60fe577d89c4.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/9527a4c4f55e8075eb6a60fe577d89c4.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/9527a4c4f55e8075eb6a60fe577d89c4.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/9527a4c4f55e8075eb6a60fe577d89c4.svg#Px Grotesk Regular")format("svg");
}
    
    body {
        width: 100%;
        background-color: rgb(255, 255, 255);
        height: fit-content;
        font-family: "Px Grotesk Regular", sans-serif;
        font-size: 13px;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

    .body-noscroll {
    overflow: hidden;
    height: 100%;
}
    a {
        text-decoration: none;
        color: inherit;
      }
 a:hover {
        text-decoration: underline;
    }
      .style-projects:hover {
        text-decoration: underline;
    }
    header {
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
         top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
              display: flex;
        align-items: center;
        justify-content: center;
     
    }

    .nav {
        position: fixed;
         display: grid !important;
    place-items: center;
        align-items: center;
        justify-content: center;
        text-align: center;
       z-index: 100;
           top: 0;
    left: 0;
    
      
    }

.nav > * {
      grid-area: 1 / 1;
}

    #img-logo {
    width: 9vh;
    height: 9vh;
   
}


   .contenitore {
    opacity:1;
    width: auto;
    height: auto;
    position: relative;
    z-index: 2;
    background-color: aqua;
    align-items: center;
    justify-items: center;
   }

   #field {
    width: fit-content;
    opacity: 1;
    position:fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    background-color: white;
    z-index: 3;
}
  #return {
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-decoration: underline;
    z-index: 12;
  
    background-color: white;
}
#button {
    opacity: 1;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;

}

/* Mostra #return solo quando passi sopra #button */
#button:hover + #return,
#return:hover {
    opacity: 1;
    pointer-events: auto;
}
#button:hover {
    opacity: 0;
    pointer-events: none;
}
       
    
    #timone {
            margin:0;
            position: fixed;
           width: 60%;
            height:60%;
          z-index: 1;
      
          animation: rotation 15s infinite steps(50);
    }
  @keyframes rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/*testi*/
.box-text {
    width: 100%;
    height:fit-content;
    position: fixed;
    display: flex;
    justify-content: center;
    background-color:rgb(255, 255, 255);
    flex-direction: row;
    bottom: 0;
    gap: 10%;
   
}

.sticky-box, #t-first, #t-second, #t-third, #t-fourth, #t-fifth {
     position: fixed;
       bottom: 0;
    z-index: 1000;
    margin: 0;
    width: 100%;
/* ANIMAZIONE */
    transition: opacity 0.4s, transform 0.4s;
    opacity: 1;
    transform: translateY(0);

  }



.fixed-text {
    width: 30%;
    margin-bottom: 2vh;
    margin-left: 1%;
    margin-right: 1%;
    z-index: 5;
    position: relative;
}

/*immagini*/


.box-projects {
    width: 100%;
    margin: 0;
    height: 100%;
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
   gap: 1vh;
    z-index: 3;
    top: 5vh;
    margin-bottom: 30vh;
    overflow: hidden;
}
.style-projects  {
    z-index: 8;
    margin:0;
   cursor: pointer;
 }
 .style-projects.active {
    text-decoration: underline;
  
}


#d2 {
text-align: center;
}
.img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 20vh;
    opacity: 0;
     align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 5vh;
    padding-bottom: 15vh;
    
}



#ASA:hover~.img{
    opacity: 1;
}

.box-projects~#ASA:hover~.contenitore{
    opacity: 0;
}



#PAR:hover~.img{
    opacity: 1;
}
.box-projects~#PAR:hover~.contenitore{
    opacity: 0;
}



#REV:hover~.img{
    opacity: 1;
}



#PREZ:hover~.img{
    opacity: 1;
}



#TRAMA:hover~.img{
    opacity: 1;
}
.img-typ {
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0;
}

#TYP:hover~.img{
    opacity: 1;
}

.style-img {
    width: 100vh;
    height: 65vh;
    z-index: 10;
    align-items: center;
    justify-content: center;
   
    
}

 #prev1, #prev2, #prev3, #prev4, #prev5, #prev6, #prev7 {
   height: auto;
    width: 100%;
    margin-bottom: 30vh; /* spazio tra i prev */
    /* rimuovi top, left, right, bottom */
}
#prev1 {
    z-index: 1000;
    width: 130vh;
    height:85vh;
}

.style-img img, video {
    max-width: 100%;
    max-height: 100%;
    object-fit: COVER;  /* l'immagine si adatta senza essere stirata */
    display: block;
    margin: auto;
}
.projects {
   padding-top: 2vh;
   height: fit-content;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    
}

#ASA, #PREZ, #PAR, #TRAMA, #TYP {
    position: fixed;
   
}
#ASA { top: 14vh; }
#PAR { top: 5vh; }
#TYP { top: 8vh; }
#TRAMA { top: 11vh; }
#PREZ { top: 14h; }

.mini-nav {
   display: flex;
    gap: 70vh;
    flex-direction: row;
  text-decoration: underline;
}
.nav {
    display: flex;
    align-items: center;
    justify-content: center; /* centra orizzontalmente */
    gap: 2vh;
    position: fixed;
    top: 2vh;
    left: 0;
  
    z-index: 100;
        position: fixed;
        align-items: center;
        justify-content: center;
        text-align: center;
       z-index: 100;
           top: 2vh;
    left: 3vh;
   
      
}

#gf-logo {
    position: static; /* lascia gestire a flexbox */
    margin-right: 2vh; /* spazio dal resto della nav, opzionale */
    width: 40px; /* o la dimensione che preferisci */
    height: 40px;
}


@media (max-width:1280px) {

     #prev1, #prev2, #prev3, #prev4, #prev5, #prev6, #prev7 {
   
    height: 100%;
    margin-bottom: 0vh; /* spazio tra i prev */
    /* rimuovi top, left, right, bottom */
}
.mini-nav{
    width: 90%;
    text-align: justify;
    justify-content: space-between;
    gap: unset;
    text-decoration: underline;
}
  .box-text {
    display: flex;
    flex-direction: column;
     overflow: visible;
    height:fit-content; /* o quanto vuoi che sia alto il box */
    position: relative;
    transition: height 0.3s;
   padding: 0;
  margin: 0;
 margin-bottom: 0;

    }

 .fixed-text {
    width: 90%;
    height: fit-content;
    flex-shrink: 0;
    transition: opacity 0.3s;
    margin: 4%;
    margin-bottom: 1%;
     position: relative; 

  }

  #d1{
    opacity: 1;
    right: 0vh;
  }
#d3 {
    left: 0vh; 
}
nav{
  gap: 3vh;
  left: 2vh;
}

.style-img {
    width: 90%;
    height: 60%;
    z-index: 10;
    align-items: center;
    justify-content: center;
 
}

.sticky-box, #t-first, #t-second, #t-third, #t-fourth, #t-fifth {
     position: relative;
       bottom: 0;
    z-index: 1000;
    margin: 0;
    width: 100%;
/* ANIMAZIONE */
    transition: opacity 0.4s, transform 0.4s;
    opacity: 1;
   overflow: hidden;
  }
.img {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    
}
 


}

@media (max-width: 700px) {
    #timone {
    width: 80%;
    height: 80%;
}
.nav {
    top: 0;
}
}