@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 {
    margin: 0;
    font-family: "Px Grotesk Regular", sans-serif;
    font-size: 13px;
    width: 100%;
   
}

header {
    position: fixed;
    top:-2%;
    width: 100%;
    display: flex;
   flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2vh;
    z-index: 1000;
}
#button-work.active,
#button-acad.active,
#button-edu.active,
#button-exh.active {
    text-decoration: underline;
}
.empty {
    top: 0;
    height: fit-content;
    width: 100%;
    background-color: aqua;
    overflow: hidden;
    justify-content: center;
    justify-items: center;
    align-items: center;
}

main {
    position: fixed;
   
    width: 100%;
     justify-content: center;
     align-items: center;
      position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
         top: 52%;
    left: 50%;
    transform: translate(-50%, -50%); 
              display: flex;
        align-items: center;
        justify-content: center;
}

.nav {
        position: absolute;
         display: grid !important;
    place-items: center;
        align-items: center;
        justify-content: center;
        text-align: center;
       z-index: 100;
           top: 15px;
    left: 15px;
    width: max-content;
    
       
  
    }

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

    #img-logo {
    width: 9vh;
    
}
a{
    text-decoration: none;
 color: inherit;
 }
 
 a:hover {
     text-decoration: underline;
 }
.places-exh {
    text-decoration: underline;
}
 .contenitore {
  
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
   width: 40%;
    height: auto;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: rgb(27, 198, 110);
    z-index: 99;
    margin: auto;
}
    
 
    #return {
    
    opacity: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-decoration: underline;
    z-index: 12;
    background-color: white;
}
 
 
 #button {
     opacity: 1;
     position:fixed;
     z-index: 11;
     background-color: white;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
   
   
   
}
     
 
 .contenitore:hover #button {
    opacity: 0;
  }
  
  .contenitore:hover #return {
    opacity: 1;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-decoration: underline;
    z-index: 12;
    
}
.elenco {    
top: 10vh;
display: flex;
text-align: center;
flex-direction: column;
gap: 1vh;
}


.descrizione {
text-align: center;
top: 5vh;
width: 50vh;
}



.column-second {
    margin-bottom: 5px;
}
.data {
   
    display: inline;
     margin-bottom: 5px;
}
.column-third {
    
     margin-bottom: 5px;
}
.column-fourth {
   
     margin-bottom: 5px;
}


/* ...resto del tuo CSS... */

/* BOTTONI: possono restare fixed se vuoi che siano sempre visibili */
#button-work, #button-acad, #button-edu, #button-exh {
    position: fixed;
    z-index: 11;
    background-color: white;
    opacity: 1;
    cursor: pointer;
}
#button-work { top: 20vh; left: 47%; }
#button-acad { top: 50vh; left: 25vw; }
#button-edu { top: 50vh; right: 30vw; }
#button-exh { bottom: 15vh; left: 48%; }

/* BOX DI TESTO: devono essere statici per permettere lo scroll */
.box-text {
    width: 100%;
    height: fit-content;
    position: absolute;
    display: block;
    overflow: hidden;
    z-index: 5;
       top: 50vh;
   overflow: hidden;
}

.box-text #button-exh, .box-text #button-edu, .box-text #button-acad, .box-text #button-work {
    text-align: center;
    justify-content: center;
    align-items: center;
    justify-items: center;
}

#d1, #d2, #d3, #d4,
.fixed-text {
   
    width: 100%;           /* o max-width: 90vw; */  /* margine sopra, nessun margine a sinistra */
    opacity: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
    display: none;
    transition: opacity 0.3s;
    
   
}

  .block {
    margin: 3vh;
    margin-bottom: 2vh;
}



/* Quando attivo (tramite JS: style="opacity: 1;") */
#d1[style*="opacity: 1"],
#d2[style*="opacity: 1"],
#d3[style*="opacity: 1"],
#d4[style*="opacity: 1"],
.fixed-text.active {
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
    display: block !important;
    margin-left: 0 !important;
    display: flex;
    gap: 2vh;
}
/* Rimuovi TUTTE le regole che mettono position: fixed su #d1, #d2, #d3, #d4! */


/* Se vuoi, puoi personalizzare la posizione dei bottoni qui sotto */
#button-work:hover,
#button-acad:hover,
#button-edu:hover,
#button-exh:hover {
    text-decoration: underline;
}


/* ...resto del tuo CSS... */
#timone {
  animation: rotation 25s infinite steps(50);
margin:0;
    position: fixed;
    width: 60%;
    height: 60%;
  }


@keyframes rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


#button-work:hover,
#button-acad:hover,
#button-edu:hover,
#button-exh:hover {
    text-decoration: underline;
}

#download-cv {
  position: fixed;
 width: 100%;
 text-align: center;
  bottom: 1vh;
}