/*...BACKGROUND...*/
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Montserrat&display=swap');

/*...HEADER...*/
#sopra-nav {
    display:flex;
    flex-direction: row;
    justify-content: center;
     position:sticky;
     margin-top: -10px;
     margin-bottom:-20px;
     align-items: flex-end;
     
   }
img#logo {
    border-radius:50%;
    width:60px;
    padding: 30px;
margin-right: 10px; 
margin-left:-30px;    
margin-bottom:10px;  
}
h1#titolo-principale {
  margin-left:-20px;
  font-size:40px;
  padding:20px;
  font-family: 'DM Serif Display', serif;
  font-family: 'Montserrat', sans-serif;
  color:#69CDF2;
  text-shadow: -1px 1px 0 #000, 
                1px 1px 0 #000, 
                1px -1px 0 #000, 
               -1px -1px 0 #000; 
}
img.simboli{
width:20px;
height:20px;
padding:20px;
margin-bottom:10px;
}
p.varie {
  padding:10px;
  font-family: 'DM Serif Display', serif;
  font-family: 'Montserrat', sans-serif;
  align-items: baseline;
}
/*...NAVBAR...*/

div#contenitore-navbar{
  margin-top:30px;
  display:flex;
  flex-direction: row;
  justify-content: space-evenly;
  background-color: rgb(21, 33, 33);
  padding:30px;
  }

  a.item{
  text-decoration: solid;
  color:white;
  font-family: 'DM Serif Display', serif;
font-family: 'Montserrat', sans-serif;


}
a:hover{
  color:cadetblue;
}

img.social{
  width: 20px;
  border:1px solid white;
  margin-right: 10px;
  margin-top:-25px;
}
/*...CHECK-CONTATTI-CHI SIAMO...*/
div#contenitore-orari {
    background-color: #D5E0EB;
   padding:20px;
   border-radius: 10px;
}
h2#orari, p#check{
    font-family: 'DM Serif Display', serif;
  font-family: 'Montserrat', sans-serif;
    display: flex;
    justify-content: center;
    margin:20px;
}
p#check{
    font-style: oblique;
    font-size: 18px;
}
div#contatti{
    background-color: #9abfd5;
    padding:20px;
    border-radius: 10px;
}
h2#num, p#email{
    display: flex;
    justify-content: center;
    font-family: 'DM Serif Display', serif;
  font-family: 'Montserrat', sans-serif;
  margin-top:-10px;
}
p#email{
    font-style: oblique;
    font-size: 18px;
}
/*...CARD...*/
div#consiglio{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top:30px;
}
h2#titolo{
   
    font-family: 'DM Serif Display', serif;
  font-family: 'Montserrat', sans-serif;
  text-decoration:overline underline;
  padding:10px;
  font-size: 40px;
  margin-top:20px;
}
div.card{
    width:130px;
    border:1px solid black;
    border-radius: 5px;
    margin-right:5px;
}
img.imm{
    width:130px;
}
h3.nome, p.carica{
    text-align:center;
    font-family: 'DM Serif Display', serif;
  font-family: 'Montserrat', sans-serif;
}
<!--COME RAGGIUNGERCI-->
div#secondo-contenitore{
    background-color: #092c3e;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    
}
h3#strada{
    font-family: 'DM Serif Display', serif;
  font-family: 'Montserrat', sans-serif;
  font-size: 35px;
  text-align: center;
    }
    p#indi{
        font-family: 'DM Serif Display', serif;
  font-family: 'Montserrat', sans-serif;
  font-size: 30px;
  margin-right:60px;
  margin-left:60px;
    }
    div#cont{
        display: flex;
        flex-direction: row;
        padding:40px;
        background-color: #e2edf3;
        margin-top:30px;
        border-radius: 10px;
    }
    a#meteo{
        margin-left:80px;
    }
    iframe{
      margin-left:90px;
      border-radius: 20px;
      box-shadow: 5px 5px 5px 5px #092c3e;
    }
    img#alto{
      margin-left:100px;
      border-radius: 20px;
      box-shadow: 5px 5px 5px 5px #092c3e;
    }
    p#email{
      font-family: 'DM Serif Display', serif;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  text-align: center;
    }
 /*...FOOTER...*/
 div.contenitore{
    background-color:#0F201F;
    display:flex;
    flex-direction: column;
    align-items: center;
    }
    p#indirizzo, p#numero, p#dove, p#mail, p#piva{
      color:white;
      font-size:13px;
      font-weight: bold;
      font-family: 'DM Serif Display', serif;
      font-family: 'Montserrat', sans-serif;
      margin:4px;
    }
    
    p#mail{
      margin-bottom:10px;
    }
    p#copy{
      color:white;
      font-size: 10px;
      text-align: end;
    }
   /*...MEDIA QUERIES...*/
@media screen and (max-width: 768px) {
  header#sopra-nav{
    display:flex;
    flex-direction: column;
    }
  img#logo{
    width:150px;
    margin-right:60px;
  }
  h1#titolo-principale{
    font-size: 20px;
    text-align: center;
    margin-right:10px;
    margin-top:-20px;
  }
  img.simboli{
    margin-right:140px;
    margin-bottom:-40px;
   }
   p#ora{
    margin-right:70px;
    margin-bottom:-20px;
   }
   p#number{
    margin-right:110px;
    margin-bottom:-20px;
   }
   p#primo{
    margin-right:130px;
    margin-bottom:-20px;
   }
   p#trenta{
    margin-right:108px;
   }
   div#contenitore-navbar{
    display:flex;
    flex-direction: column;
 
   }
   a.item{
    margin-left:90px;
    font-size: 15px;
    padding:5px;
   
   }
   div#simb-social{
      margin-left:110px;
      margin-top:20px;
      }
      div#consiglio{
       display: flex;
        flex-direction: column;
    }
    h2#titolo{
      font-size: 30px;
      text-align: center;
    }
    div.card{
      width:70%;
      margin-left:60px;
    }
    img.imm, h3.nome, p.carica{
      width:100%;
    }
    iframe {
      width:350px;
      margin-left:-5px;
    }
    img#alto{
      width:350px;
      margin-top:30px;
      margin-left:-5px;
    }
    div#cont{
      display: flex;
      flex-direction: column;
    }
    p#indi{
      font-size:18px;
      text-align:start;
    }
    h2#orari{
      font-size:20px;
      text-align:center;
    }
    p#check{
      font-size: 15px;
    }
    h2#num{
      font-size:20px;
    }
    p#email{
      font-size: 15px;
       }
       a#meteo{
        margin-top:20px;
       }
    }