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

.scrolling-images {
  top: 160px;
}
 .style-img-asa {
        width:10%;
        height:5%;
    }
     .style-img-par {
        width:10%;
        height:5%;
    }
     .style-img-rev {
        width:10%;
        height:5%;
    }
     .style-img-prez {
        width:10%;
        height:5%;
    }
     .style-img-trama {
        width:10%;
        height:5%;
    }
     .style-img-typ {
        width:10%;
        height:5%;
    }
   .elenco {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* distribuisce lo spazio tra gli elementi */
    align-items: center;
    text-align: center;
    margin: 20px;
    margin-top: 25px;
    top: 80px; 
}
.elenco span {
    margin: 20px;
    margin-top: 6%;
    text-align: center;
    white-space: normal;
}
  /* Container verticale per immagini */

    /*PROGETTI*/
  .descrizione {
 top: 105px;
 text-align: center;
   width: 70%;

}

#descrizione-ASA {
    top: 120px;  
}
 .empty2 {
       display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vh;
    width: 100%;
    margin: 0 auto;
   display: block;
  
    
    /* position: static;  // static è il valore di default, puoi anche omettere questa riga */
  }
.link-utili {
justify-content:end;
    align-items:end;
}
#right {
  text-decoration: underline;
 top: unset;
 bottom: 115px;
    left: 3vh;
    position: fixed;
    display: flex;
    flex-direction: row;
     gap: 3vh; 
}
#up {
 top: 65px;
 width: 90%;
 margin: 4%;
display: flex;
    flex-direction: row;
   justify-content: space-between;
    align-items: right;
 gap: 2vh; 
right: unset;
left: 0;
    transform: none; 
  
}

  .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;
   
 
    }

 .fixed-text {
    flex-shrink: 0;
    transition: opacity 0.3s;
    margin: 4%;
     position: relative; 
      display: none;  
     
  }
.fixed-text.active {
  display: block;
}
  #d1{
    opacity: 1;
    right: 0vh;
  }
#d3 {
    left: 0vh; 
}
nav{
  gap:20%;
  left: 20px;
  top: 10px;
    width: 100%; /* oppure width: auto; */
max-width: 40%;
   text-align: center;
   align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: row;
}
#nav-decrypta {
      width: 100%; /* oppure width: auto; */
max-width: 45%;
}

/*HOME*/
#contact { bottom: 3vh; top: unset; left: 3vh;}
#personal { top: 3vh; right: 3vh; }
#cv { bottom: 3vh; right: 3vh; }
#work { top: 3vh; left: 3vh; }
#timone1, #timone2, #timone3, #timone4, #timone5, #timone6, #timone7 {
    width: 80%;
    height: 80%;
    margin: auto;
}

.mini-nav {
  top: 5vh;
  width: 90%;
  display:flex;
  flex-direction: column;
  text-align: center;
  gap: 1vh;
  height: auto;
  justify-content: space-between;
  position: relative;
padding-bottom: 40%;
}

#work-preview {
    width: 80vw;
  height: 80vw;
    background: #fff;
    position: fixed;
    display: none;
    z-index: 3;
    overflow: hidden;
    padding: 0;
}
#work-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

}

@media (max-width: 900px) {
  .fixed-text, #d1, #d2, #d3, #d4 {
    font-size: 13px !important;
  }
}
@media (max-height: 600px) {
  .elenco {
    top: 40px;
    margin-top: 10px;
  }
}