@charset "UTF-8";
@font-face {
    font-family: 'Croissant';
    src: url("fontes/Super\ Croissant.ttf");
}
@font-face {
   font-family: 'Mamboe';
    src: url('fontes/Mamboe\ Trial.otf');
}
@font-face {
    font-family: 'RobotoItalico' ;
    src: url('fontes/RobotoMono-Italic-VariableFont_wght.ttf');
}
@font-face {
    font-family: 'Roboto';
    src: url('fontes/RobotoMono-VariableFont_wght.ttf');
}

*{
   padding: 0px;
   margin: 0px;

}
:root{
    --FontRoboto:'Roboto';
    --FontRobotoItalico: 'RobotoItalico';
    --fontMaboe:'Mamboe';
    --fontCroissant: 'Croissant';
    --CorVioletNoite: #301934;
    --CorVerdfosco:#D8F1A0 ;
    --CorTomate:#FE5E41;
    --CorCatchupe:#be1e02;
    --CorAmarelo: #F09A18;
    --CorSelva1:#00A878;
     --CorSelva2:#084d39;
     --CorVerdeEscurão:#004727;
    --corCinzaChumbo:#35393C;
    --CorVerd:#9bda7e;
}


html,body{
     
     position: relative;
     background-size: cover;
     background-attachment: fixed;
     background-image:linear-gradient(to top, var(--CorSelva2), var(--corCinzaChumbo));
     background-repeat: no-repeat;
     

}


header{
    position: sticky;
    top: 0;
    background-image:linear-gradient(to top, var(--CorSelva2), var(--corCinzaChumbo));
    width: 100vw;

}
header > h1 {
    text-shadow: 1px 4px 3px rgba(0, 0, 0, 0.74) ;
    font-size: 3em;
    padding-left: 30px;
    color: var(--CorCatchupe);
    font-family: var(--fontMaboe);
    margin-bottom: 10px;
    margin-top: 10px;
       
}



nav{
    display: inline-flex;
    margin-bottom: 10px;
    text-align: center;
   

}



nav > a {
   
    background-image:linear-gradient(to bottom,var(--CorSelva1) ,#35393C) ;
    margin: auto;
    font-variant: small-caps;
    color: black;
    text-decoration: none;
    padding: 7px;
    font-family: var(--FontRoboto);
    border: 1px  solid black;
    border-radius:10px;
    margin-left: 10px;
 
}

 nav  a:hover{
    background: linear-gradient(to bottom,#fe5d410a,var(--CorSelva1) );
    padding: inherit 10px;   
    
}





main{
   
     background-image: linear-gradient(to bottom,var(--corCinzaChumbo), var(--CorSelva1));
    padding: 20px;
    display: block;
    margin: auto;
    margin: 10px;
    border-radius: 20px;
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.486);


}
.hambiente {
   max-width:var(--max-width);margin:12px auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
   gap:12px;
   padding:0 8px;
}
 .hambiente> img{
    width:100%;
    height:200px;
    object-fit:cover;
    border-radius:10px;
    display:block
}

/*Nossa Historia*/

#Nossahistoria{
     margin: auto;
    gap: 20px;  
   margin:12px auto;
   display:grid;
   grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
   gap:12px;padding:0 8px;
    
}
#nossahistoria > p{
    height: 300px;
    width: 300px;
}

#NossaHistoria >  img{
    display: block;
    border-radius:10px ;
    width:70%;
    height:300px;
    margin: auto; 
    object-fit:cover;
    padding-bottom: 20px;
    
}


 /*Cardapio*/
   
 .galeria{
    margin:12px auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;padding:0 8px;
}
.galeria img{
    width:100%;
    height:200px;
    object-fit:cover;
    border-radius:10px;
    display:block
}

 .galeria>  a img:hover {
    padding: 2px;
    border-radius:20px ;
    background: #ffffffcc;

} 
#local{
     margin: auto;
    margin-left: 54px;
    margin-top: 10px;
    height: 200px;
    width: 67%;

}


footer{
    background-color: floralwhite;
    height: 50px;
    text-align: center;

}

footer a {
    text-decoration: none;
    color: purple;

}
#sec{
    padding: 20px;
    background-color: #301934;
    color: white;
    width: 80;
    transform: translate(50px -50px 50px
    );
}
#sec   a{
    color: whitesmoke;
    text-decoration: none;

}

h2{
    padding-left: 20px;
}