@charset "UTF-8";

@font-face {
    font-family: 'Bebas', sans-serif;
    src: url(fontes/Bebas_Neue/BebasNeue-Regular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'League Gothic', sans-serif;
    src: url(fontes/League_Gothic/LeagueGothic-Regular-VariableFont_wdth.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --cor1: #0D0D0D;
    --cor2:#F2F2F2;
    --cor3: #8C8B8B;
    -cor4: #D9D9D9;;
    --cor5: #034C8C;
    --cor6: #afafaf;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Bebas', sans-serif;
    background-color: var(--cor1);
    color: var(--cor2);
}

header.cabecalho {
    background-image: linear-gradient(180deg, var(--cor5), var(--cor1));
    padding: 20px;
    min-height: 250px; 
}

h1.titulo-principal {
    font-family: 'League Gothic', sans-serif;
    font-size: 2.5rem;
    color: var(--cor2);
    max-width: 500px;
    text-align: center;
    margin: 0px auto 10px auto;
}

header p{
    font-family: 'Bebas', sans-serif;
    font-size: 1.2rem;
    color: var(--cor2);
    margin: 10px 0px 10px 20px;
    max-width: 500px;
    margin: 20px auto;
    line-height: 1.2em;
}

nav.menu{
    background-color: var(--cor1);
    padding: 10px;
}

nav.menu a{
    color: var(--cor2);
    text-decoration: none;
    margin-left: 20px;
    font-family: 'Bebas', sans-serif;
    font-weight: bold;
    font-size: 1.2rem;
    transition-duration: 0.4s;
}

nav.menu a:hover{
    color: var(--cor2);
    font-size: 1.3em;
    text-decoration: underline;
    background-color: var(--cor5);
    border-radius: 3px;
    padding: 5px;
}

main{
    padding: 20px;
    background-color: var(--cor2);
    color: var(--cor1);
    min-width: 300px;
    max-width: 950px;
    margin: auto;
    box-shadow: 1px 1px 1px var(--cor6);
    margin-bottom: 20px; 
}

main h1{
    font-family: 'League Gothic', sans-serif;
    font-size: 2rem;
    color: var(--cor1);
    margin-bottom: 20px;
    color: var(--cor2);
    background-image: linear-gradient(90deg, var(--cor5), transparent);
}

main p{
    font-family: 'Bebas', sans-serif;
    font-size: 1.2rem;
    color: var(--cor1);
    line-height: 1.5em;
    margin-bottom: 20px;
    text-indent: 20px;
    text-align: justify;
}

main h2{
    font-family: 'League Gothic', sans-serif;
    font-size: 1.5rem;
    color: var(--cor1);
    margin: 15px 0px; 
    color: var(--cor2);
    background-image: linear-gradient(90deg, var(--cor5), transparent);
}


div.video-responsivo{
    position: relative;
    margin: 0px -20px 20px -20px;
    padding: 25%;
    background-color: var(--cor1);
}

div iframe{
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;
}

main aside{
    background-color: var(--cor6);
    padding: 15px;
    margin-top: 20px;
    border-radius: 5px;
    border-radius: 5px 5px 0px 0px;
}

main aside header{
    background-color: var(--cor3);
    margin: -15px -15px 0px -15px;
    border-radius: 5px 5px 0px 0px;
}

main aside h3{
    font-family: 'League Gothic', sans-serif;
    font-size: 1.2rem;
    color: var(--cor1);
    padding: 10px ;
}

main aside p{
    font-family: 'Bebas', sans-serif;
    font-size: 1rem;
    color: var(--cor1);
    margin-top: 10px;
}

main img{
    width: 100%; 
}

main img.img-pequena{
    max-width: 400px;
    margin: auto;
    display: block;
}

footer.rodape {
    background-color: var(--cor1);
    color: var(--cor2);
    text-align: center;
    padding: 10px;
    bottom: 0;
    width: 100%;
}