/* style.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
}
body{
  background-color: #ffffff;
}
header{
  position:fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: solid 1px #f2d1b3;
  background: radial-gradient(circle at top left, #363e59,#91a3d9,#363e59);
  transition: 1s ease-in-out;
  z-index: 999;
}
#head0{
  top:0;
  height: 100px;
   display: flex;
  justify-content: center;
  align-items: center;
}
#head1{
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px #f2d1b3;
  background-color: #363e59;
}
main{
  margin-top: 150px;
}
#full{
  display: flex;
  flex-direction: column;
}
footer{
  height: 200px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 30px;
  background: radial-gradient(circle, #363e59,#363e59);
  margin-top: 30px;
}
#drop{
  display: none !important;
}
#menu-icon{
  display: none !important;
}
ul{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  gap: 55px;
}
.elenco{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight:600;
}
a{
  color: white;
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 19pt;
  text-decoration: none;
    transition: 0.3s;
}
a:hover{
  color: #f2d1d3;
}
li{
  color: white;
  font-size: 19pt;
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  text-decoration: none;
  transition: 0.3s;
}
li:hover{
  cursor:pointer;
  transform: scale(1.1);
  color: #f2d1b3;
}
#logo{
  width: 40%;
}

/*. ANIMAZIONE INIZIALE.  */

 #fade-img {
    opacity: 0;
    transition: opacity 1s ease-in;
    width: 300px; 
    border-radius: 200px;
  }
  #fade-img.show {
    opacity: 1;
  }
  #loader.hidden {
    display: none;
  }
#loader{
  display: flex;
  background-color: #91a3d9;
  justify-content: center;
   align-items: center;
   width: 100vw;           
    height: 100vh; 
}

/*. ................................  */


@font-face {
  font-family: 'type';
  src: url('jmh_typewriter/JMH Typewriter-Thin.ttf') format('truetype');
}

h1 {
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 40pt;
  font-weight: bolder;
  color: #363e59;
}
h2{
  margin-top: 3%;
  text-align: center;
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 50pt;
  color: #000000;
  top:20px;
}
h3{
  font-size: 40pt;
  text-align: center;
  color: black;
  font-family: 'Times New Roman', Times, serif;
}
h4{
  color: black;
  font-size: 20pt;
  text-align: center;
  margin-top: 5%;
}
.subtitle{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 30pt;
  color: #363e59;
  font-weight: 600;
  margin-top: 0%;
  text-align: center;
}
.container{
  display: flex;
  justify-content: center;
  align-items: center;
}
#logo_p{
  width: 35%;
  height: 52%;
  margin-top: 8%;

}
#corpo{
  border-radius: 0px;
  height: 600px;
  width: 100%;
   background: linear-gradient(
    to bottom,
     #e6e9f7  0%,
    #e6e9f7  3%,
    #cfd6ee 3%,
    #cfd6ee 6%,
    #b0bce5 6%,
    #b0bce5 9%,
    #91a3d9 9%,
    #91a3d9 91%,
    #b0bce5 91%,
    #b0bce5 94%,
    #cfd6ee 94%,
    #cfd6ee 97%,
    #e6e9f7 97%,
    #e6e9f7 100%
  );
  display: flex;
  flex-direction: column;
  justify-content:flex-start;
  align-items: center;

}
.margine{
  margin-top: 30px;
  margin-bottom: 30px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#grid_location{
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 375px;
  gap: 5%;
}
.spiegazione{
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 95%;
  height: 600px;
  background-color: white;
  /*box-shadow: 
   20px 0 10px -6px #91a3d9,
  -20px 0 10px -6px #91a3d9;*/
  margin-top: 3%;
  justify-content: center;
}
#corta{
  height: 350px;
  margin-top: 2%;
  background-color:#cc5153;
  margin-bottom: 3%;
}
#tema{
  width: 100%;
  height: 1200px;
  background: linear-gradient(
    to bottom,
     #cc5153  0%,
    #cc5153  3%,
   #ab383a 3%,
    #ab383a 6%,
    #8c2627 6%,
    #8c2627 9%,
    #801517 9%,
    #801517 55%,
     #8c2627 55%,
    #8c2627 58%,
    #ab383a 58%,
    #ab383a 61%,
     #cc5153 61%,
     #cc5153 100%
  );
  display: flex;
  align-items: center;
  justify-content:end;
  gap: 300px;
  flex-direction: column;
}
#censura_pc{
  display: block !important;
  width: 67%;
  height:25%;
  margin-left: 33%;
}
#censura_mobile{
  display: none !important;
}
#desc_tema{
  color:#ffffff;
  font-weight: 550;
}
/*. grafica luoghi.  */
.luoghi{
  width: 25%;
  box-shadow: 1px 1px 5px 0px gray;
  border-radius: 20px;
  height: 375px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.luogo_figura{
  border: solid 1px rgb(191, 191, 191);
  width: 100%;
  border-radius: 20px;
  height: 60%;
}
.indic{
  color: rgb(209, 0, 0);
  font-size: 18pt;
  text-decoration: underline;
}
.maps{
  display: flex;
  gap:5%;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  bottom: 5%;
  margin-top: auto;
  margin-bottom: 5%;
}
.maps:hover{
  transform: scale(1.1);
  cursor: pointer;
  transition: 0.3s;
}
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
}
.link_loc{
  display: flex;
  align-items: center;
}
#loc{
  color: rgb(209, 0, 0);
  font-size: 30pt;
}
/*. ....................... */


.giornate{
  height: 700px;
  width: 45%;
  background-color: #91a3d9;
  border-radius: 30px;
  border: solid 2px 363e59;
}
#container_giornate{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 60px;
  margin-right: 60px;
}
#desc{
  height: 600px;
  width: 90%;
  border-radius: 20px;
  margin-left: 5%;
  margin-right: 5%;
  box-shadow: 
   20px 0 10px -6px #91a3d9,
  -20px 0 10px -6px #91a3d9;
  display:flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 50px;
  flex-direction: column;
}
#vertical{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 50px;
}
#icone{
  font-size: 30pt;
  color:white;
}
#icona_m{
  margin-top: 0px;
}
#mail:hover{
 fill:#f2d1b3;
}
#insta:hover{
  stroke:#f2d1b3;
}
#face:hover{
  fill:#f2d1b3;
}
.boxxett{
  height: 60px;
  width: 60px;
  background-color: #363e59;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
svg{
  margin-top: 5px;
}
.boxxett:hover{
  background-color: #91a3d9;
}
p{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 20pt;
  color: #f2d1b3;
}
.disc{
  margin-left: 5%;
  margin-right: 5%;
  text-align: center;
  color: #363e59;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 25pt;
  word-spacing: 4px;
  line-height: 45px;
}
hr{
  width: 80%;
}
.sep{

  border: 0;
  height: 8px;
  background-color: #363e59;
  border-radius: 4px;
}

#mobile{
  display: none;
}
/*. computer grandi.  */

@media (min-width: 1700px) {
  .luoghi{
  height: 500px;
}
  #grid{
  height: 500px;
}
#logo_p{
  width: 30%;
  height: 75%;
  margin-top: 7.5%;

}
#corpo{
  height: 900px;
  width: 100%;
}
}
/*........................*/

/*. Telefoni.  */

@media (max-width: 1000px) {

  header{
  display: flex;
  justify-content:flex-start;
  flex-direction: row;
  background: radial-gradient(circle at top left, #363e59,#363e59,#91a3d9,#91a3d9);
}
  #head1 {
    display: none;
  }
  #head0{
  top:0;
  height: 130px;
  width: 100%;
  display: flex;
  justify-content: space-between !important;
  flex-direction: row;

}
#logo{
  width: 20%;
  margin-right: 3%;
}
h6{
  display: none;
}
li{
  font-size: 50pt;
  border-bottom: solid 3px #363e59;
  width: 250px;
}
a{
  color: #363e59;
  font-size: 30pt;

}
a:hover{
  color: #91a3d9;
}
.indic{
  font-size: 24pt;
}
  .material-symbols-outlined {
    color: white;
    margin-left: 10px;
    font-size: 80px !important;
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  }
  #menu-icon{
    display: block !important;
    margin-left: 30px;
  }
  nav{
    display:none;
     position:absolute;
      top:140px; left:10px; 
      background: rgba(242, 209, 179, 0.95);
      width: 350px;
      border-radius:15px; 
      padding:50px; 
      border: solid 2px #363e59;
      color:rgb(0, 0, 0); 
      z-index:10000;
  }
  #drop{
    display: block !important;
    display: flex !important;
    align-items: center;
    gap: 50px;
    justify-content: center;
    flex-direction: column;
    
  }
  h4{
    font-size: 30pt;
  }
  #logo_p{
  width: 75%;
  margin-top: 15%;
  height:55%;

}
#spiegazione{
  height: 700px;
}
#corpo{
  height: 850px;
  margin-top: -25px;
}
  .luoghi{
  width: 500px;
  height: 600px;
}
#desc{
  height: 800px;
}
#grid{
  height: 500px;
}
  .opz{
    font-size: 40pt;
  }
  #tema{
  width: 100%;
  height: 1300px;
  gap: 350px;
  
}
#censura_mobile{
  display: block !important;
  width: 75%;
  height:15%;
  margin-left: 25%;
  margin-bottom: 50px;
}
#censura_pc{
  display: none !important;
}
#corta{
  margin-bottom: 50px;
}
#grid_location{
  height: 600px;
  margin-left: 5%;
  margin-right: 5%;
}
#mobile{
  display: block !important;
}
.subtitle{
  font-size: 40pt;
}
.indic{
  font-size: 25pt;
}
}