body {
    background-color: #a76618; color: #f2f2f2;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size:20px; 
    margin: auto;
    width: 100%;
}
header{
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    background-color: #e7e4e4;
    margin: auto;
    text-align: center;
    
}
.click{
    background-color: #e7e4e4;
    border-radius: 10px;
    text-decoration: none;
    padding: 10px;
    text-align: center;
    color: #0d0000;
}
.click:hover{
    background-color: #918e8e57;
}
.click2{
    background-color: #e7e4e4;
    border-radius: 10px;
    text-decoration: none;
    padding: 10px;
    text-align: center;
    color: #0d0000;
}
.click2:hover{
    background-color: #918e8e57;  
}
.abertura{
    margin-top: 90px;
}  
main {
    background-image: linear-gradient(to right,#d6d6d6,#808080,#827E6A) ;
    border-radius: 10px;
    box-shadow: 10px 10px 10px #1111117e ;
    width: 800px;
    padding: 10px;
    margin: auto;
    text-align: center;   
}
.marcas{
    padding: 5px;
} 
.footer{
    background-color: #0d0000;
    width: 1500px;
    padding: 5px;
    margin: auto;
    text-align: center;

}
h1 {
    background-color: #0d0000;
    border-radius: 10px;
    margin: auto;
    text-align: center;
    padding: 5px;
    
}
h2{
    background-color: #0d0000;
    border-radius: 20px;
    margin: auto;
    padding: 5px;   
}
h3{
    color: #0d0000;
}
.botao{
    outline: auto;
    outline-color:#0d0000;
    background-color: #a76618;
    padding: 8px;
    margin: auto;
    box-shadow:8px 8px 8px #d6d6d6ad;
    border-radius: 10px;
    border: solid;
    margin-inline: 15px;
    text-decoration: none;
    color: antiquewhite; 
}
.botao:hover{
    background-color: #0d0000;
}
.hino{
    color: #0d0000;
    font-weight:bold;
}
.tributo{
    font-weight:bold;
    color: #0d0000;
}
.video{
    width: 800px;
}
.historia{
    line-height: 26px;
    letter-spacing: 0px;
    color: #0d0000;
    text-align: justify;
    text-indent: 1cm;
}
@media(max-width: 1400px){
    main{
        width:1200 px;
    }
    .video {

        width: 800px;
    }
}
@media(max-width: 1200px){
    main{
        width:1000 px;
    }
    .video {

        width: 800px;
    }
}
@media(max-width: 1024px){
    main{
        width: 700px; 
    }
    .imagem{
        width: 700px;
    }
    .video {

        width: 700px;
    }
}
@media(max-width: 768px){
    main{
        width: 400px; 
    }
    .imagem{
        width: 400px;
    }
    .video {

        width: 400px;
    }
    .botao{
        padding: 6px;
        font-size: 15px;
    }
    .footer{
        width: 475px;
        text-align: center;
        font-size: 15px;
    }
    .botao{
        padding: 5px;
        margin-inline: 0px;}
}
@media(max-width: 425px){
    main{
        width: 320px; 
    }
    .imagem{
        width: 320px;
    }
    .video {
        width: 320px;
        
    }
    .videohino{
        width: 320px;
        height: 265px;
    }
    .imagem{
        width: 320px;
    }
    .header{ 
        padding-left: 3px;
        text-align: left;
        font-size: 15px;
        align-items: center;
        
       
    }
    .click{
        border-radius: 0%;
        padding: 0px;
        margin-left: 23px;
        margin-right: 24px;
    }
    .click2{
        border-radius: 0%;
        padding: 0px;
        margin-left: 13px;
        margin-right: 20px
    }
    .favi{
        width: 5%;
    }
    .favi2{
        width: 0%;
    }
    .botao{
        padding: 5px;
        margin-inline: 0px;
    }
    .footer{
        width: 350px;
        text-align: center;
        font-size: 12px;
    }
    h1{
        font-size:medium ;
    }
}