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

      a:hover {
        text-decoration: underline;
    }
    header {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
   flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2vh;
    z-index: 98;

}
.elenco {    
top: 10vh;
display: flex;
text-align: center;
flex-direction: column;
gap: 1vh;
z-index: 1000;
}


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


   .nav {
        position: relative;
         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;
    height: max-content;
      gap: 2vh; 
  
    }

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

    #img-logo {
    width: 9vh;
    height: 9vh;
   
}
   .contenitore-main {
    width: 100%;
    height: auto;
    position: absolute;
 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
   }
 #timone {
  width: 180vh;
  height: 180vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  position: fixed;
  z-index: 1;
 }

.text-contact {
  z-index:100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  gap: 1vh;
}
.box-text {
  position: fixed;
 width: 100%;
 text-align: center;
  bottom: 1vh;
}


    #return {
     opacity: 0;
     position:fixed;
    text-decoration: underline;
 }
 
 #button {
     opacity: 1;
     position:fixed;
    
     z-index: 11;
     background-color: white;
 }
 .contenitore:hover #button {
    opacity: 0;
  }
  
  .contenitore:hover #return {
    opacity: 1;
    position:fixed;
   
   z-index: 12;
   text-decoration: underline;
   background-color: white;
}
.contenitore {
     width: 20vh;
     height: fit-content;
     
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: white;
     z-index: 99;
     
    }

    #contact {
      width: fit-content;
      justify-content: center;
     align-items: center;
    }

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

     @media (max-height: 400px) {
       .descrizione {
        width: 70%;
       }
    }