@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');
}



*{
    margin: 0px;
    padding: 0px;
    color: black;
    font-family: var(--FontRoboto);

}
: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;
}


html,body{
    background-image:linear-gradient(to top, var(--CorSelva2), var(--corCinzaChumbo));
     
        
}


header{

    position: sticky;
    top: 0;  
    
    background-image:linear-gradient(to top, var(--CorSelva2), var(--corCinzaChumbo));
    
        
   

}
header h1{
    color: var(--CorCatchupe);
    text-shadow: 1px 4px 3px rgba(0, 0, 0, 0.74) ;

}

header  h1 a {
    
    text-decoration: none;
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 20px;
    color: #be1e02;
    font-family: var(--fontMaboe);
    font-size: 1.5em;
    
    
}


iframe{
    display: block;
    height: 1000px;
    width: 100%;
    margin: auto;
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.486);
    border-radius: 10px;
}

.menu{
    text-decoration: none;
    background-image:linear-gradient(to bottom,var(--CorSelva1) ,#35393C) ;
    border: 1px solid  black;
    border-radius: 7px;
    font-variant: small-caps;
    padding: 7px;
    margin-left: 10px;
    display: inline-flex;
    margin-bottom: 10px;
    text-align: center;
}
.menu:hover{
    background: linear-gradient(to bottom,#fe5d410a,var(--CorSelva1) );
    padding: 6px;
    border-radius: 10px;

}
footer{
    background-color: rgb(230, 192, 118);
    height: 30px;
    margin-bottom: 10px;
    text-align: center;

}

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

}