@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: white;
        height: 100%;
        overflow: hidden;
        font-family: "Px Grotesk Regular", sans-serif;
        font-size: 13px;
        align-items: center;
        justify-content: center;
        justify-items: center;
    }
    a {
        text-decoration: none;
        color: inherit;
      }

      a:hover {
        text-decoration: underline;
    }
    header {
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
   
              display: flex;
        align-items: center;
        justify-content: center;
 
 
    }
.nav {
        position: fixed;
         display: grid !important;
    place-items: center;
        align-items: center;
        justify-content: center;
        justify-items: center;
        text-align: center;
       z-index: 100;
           top: 1vh;
    left: 2vh;
    width: max-content;
    height: max-content;
      gap: 2vh; 
  
    }

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

    #img-logo {
    width: 9vh;
    height: 9vh;
}
   .contenitore {
    opacity:1;
    width: auto;
    height: auto;
    position: relative;
    z-index: 10;

    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: 17;
}
  #return {
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-decoration: underline;
    background-color: white;
}
#button {
    opacity: 1;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    

}

/* 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 {
                    
            position: absolute;
            width: 60%;
            height:60%;
          z-index: 1;
          animation: rotation 15s infinite steps(50);
  
    }
  @keyframes rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Nasconde #button quando una voce progetto è in hover */
.style-projects:hover ~ #button {
    opacity: 0;
    pointer-events: none;
}
.box-projects {
    width: 100%;
    margin: auto;
    height: fit-content;
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vh;
    z-index: 16;
    top: 1vh;
}
.style-projects  {
    z-index: 8;
    margin-right: 1vh;
}
.img-asa {
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.style-img-asa {
    width: 20vh;
    height: 20vh;
    background-image:url(copertine/ASA-web.png);
   background-size: 100vh ;
    background-position: center;
    position: absolute;
    opacity: 0.7;
}
#ASA:hover~.img-asa{
    opacity: 1;
}

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

.img-par {
    position: fixed;
    width: 100%;
    height: 100%;

    opacity: 0;
}
.style-img-par {
    width: 20vh;
    height: 20vh;
    background-image:url(copertine/Paranorma.00_00_05_20.Still004.png);
    background-size: 200vh ;
    background-position: center;
    position: absolute;  
    opacity: 0.7; 
}
#PAR:hover~.img-par{
    opacity: 1;
}
.box-projects~#PAR:hover~.contenitore{
    opacity: 0;
}

.img-rev {
    position: fixed;
    width: 100%;
    height: 100%;

    opacity: 0;
}
.style-img-rev {
    width: 20vh;
    height: 20vh;
    background-image:url(copertine/revera-web.png);
    background-size: 200vh ;
    background-position: center;
    position: absolute;  
    opacity: 0.7; 
}
#REV:hover~.img-rev{
    opacity: 1;
}

.img-prez {
    position: fixed;
    width: 100%;
    height: 100%;
 
    opacity: 0;
}
.style-img-prez {
    width: 20vh;
    height: 20vh;
    background-image:url(copertine/prezze-web.png);
    background-size: 200vh ;
    background-position: center;
    position: absolute;  
    opacity: 0.7; 
}
#PREZ:hover~.img-prez{
    opacity: 1;
}

.img-trama {
    position: fixed;
    width: 100%;
    height: 100%;
  
    opacity: 0;
}
.style-img-trama {
    width: 20vh;
    height: 20vh;
    background-image:url(copertine/TRAMA-web.png);
    background-size: 100vh;
    background-position: center;
    position: absolute;   
    opacity: 0.7;
}
#TRAMA:hover~.img-trama{
    opacity: 1;
}
.img-typ {
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.style-img-typ {
    width: 20vh;
    height: 20vh;
    background-image:url(copertine/typo-web.png);
    background-size: 100vh;
    background-position: center;
    position: absolute;   
    opacity: 0.7;
}
#TYP:hover~.img-typ{
    opacity: 1;
}
#prev1 { 
    top: 10vh; left: 30vh; 
    background-position: -30vh 40vh; 
  }

  #prev2 { 
    top: 40vh; left: 10vh; 
    background-position:-20vh -95vh; 
  }

  #prev3 { 
    bottom: 10vh; left: 30vh; 
    background-position: -30vh -110vh; 
  }

  #prev4 { 
    top: 10vh; right: 30vh; 
    background-position: -110vh 40vh; 
  }

  #prev5 { 
    top: 40vh; right: 10vh; 
    background-position: -120vh -75vh; 
  }

  #prev6 { 
    bottom: 10vh; right: 30vh; 
    background-position: -60vh -110vh; 
  }
.projects {
    margin-top: 1vh;
    width: 100%;
    align-items: center;
    justify-content: center;
}
#download-cv {
  position: fixed;
 width: 100%;
 text-align: center;
  bottom: 1vh;
  z-index: 100;
}

.style-projects:hover, .style-projects.active {
            color: #000 !important;
            transition: color 0.2s;
        }

        /* Nasconde tutte le immagini di progetto di default */
        
        /* Mostra solo il contenitore immagini attivo */
        .img-asa.active, .img-par.active, .img-typ.active, .img-trama.active, .img-prez.active, .img-rev.active {
            display: block;
        }