@import url('https://fonts.googleapis.com/css2?family=Ancizar+Serif:ital,wght@0,300..900;1,300..900&family=Funnel+Sans:ital,wght@0,300..800;1,300..800&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: 'Funnel Sans', sans-serif;
}

:root {
    --cor-01: #06c;
    --cor-02: #000;
    --cor-03: #ccc;
    --cor-04: #fff;

    }
    .container {
        max-width: 1000px;
        margin: 0 auto;
        
    }

 #cabecalho {
    background-color:  var(--cor-02);
    margin-bottom: 30px;

 }   
 #cabecalho .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
  
}

 #cabecalho #logo {
    width: 30px;
 }

 #menu ul {
    display: flex;
    list-style: none;
 }



 #menu .submenu {
   background-color: var(--cor-02);
   display: none;
   position: absolute;
   z-index: 1;
 }

 #menu ul li a {
   color: var(--cor-04);
   text-decoration: none;
   display: block;
   padding: 20px 30px;
   transition: all .3s linear;

 }

 #menu ul li a:hover {
   background-color: var(--cor-01);
   
 }

 #menu ul li:hover .submenu {
      display: block;
   
 }
 .titulo {
   font-size: 50px;
   text-align: center;
   margin-bottom: 30px;
 }

 #historia img {
   float: left;
   width: 350px;
   border-radius: 30px;
   margin-right: 20px;
   margin-bottom: 20px;
 }
 #historia p {
   margin-bottom: 15px;
   text-align: justify;
 }

 #fotos #galeria{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: 20px;

 }
 #fotos #galeria img{
   display: block;
   width: 100%;
   transition: all 0.2s linear;

 }
   #fotos #galeria img:hover{
      transform: scale(1.1);
      
   }
   #videos #galeria{
      display: grid;
      grid-template-columns: 1fr 1fr ;
      gap: 20px;
   }
 #rodape {
   background-color: var(--cor-02);
   color: var(--cor-04);
   padding: 20px 0;
   text-align: center;
   font-size: 12px;
   margin-top: 50px;
   
 }
 #rodape  a{
   color: var(--cor-03);
   text-decoration: none;

 }

 #rodape  a:hover{
   color: var(--cor-01);
   text-decoration: underline;
 }