@charset 'UTF-8';

/*IMPORTAÇÃO DE FONTES*/
@import url('https://fonts.googleapis.com/css2?family=Passion+One:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');

/*VARIAVEIS GLOBAIS*/
:root{

    --fontePadrao: Verdana, Geneva, Tahoma, sans-serif;
    --fonteCabeçalho: 'Passion One', cursive;
    --fonteDestaque: 'Sriracha', cursive;
}

*{/*CONFIGURAÇÕES GLOBAIS*/
    padding: 0px;
    margin: 0px;
    font-size: 1em;

}

body, html{/*CORPO*/
    background-color: lightgreen;
    height: 100vh;
}

/************
* CABEÇALHO *
*************/

header{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    min-height: 99px;
    background: black;

    /* ESTILO DO TEXTO */
    font-family: var(--fonteCabeçalho);
    color: white;
}

header > h1 {
    font-size: 3em;
    padding: 5px;
}

header > h2{
    font-size: 1.5em;
    padding: 5px 0px 10px 0px;
}

/********
* CORPO *
*********/

main{
    max-width: 800px;
    margin: auto;
    font-family: var(--fonteDestaque);
}

main > section{
    padding: 10vh 5vw;
    line-height: 2em;
    font-size: 1.3em;
}

main > section.normal{
    background: white;
    color: black;
}

main > section.normal > p.estrofe{
    padding: 0px 15px;
}

main > section.normal > p.estrofe1{
    padding: 0px 15px 40px 15px;
}

main > section.img{
    background: black;
    color: white;
    box-shadow: inset 6px 4px 10px rgba(0, 0, 0, 0.664);
}

main > section.img > p.estrofe{
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 15px;
}

main > section#img01{
    background: url('imagens/background001.jpg');
    background-position: right center;
    background-size: cover;
    background-attachment: fixed;
}
main > section#img02{
    background: url('imagens/background002-1200.jpg');
    background-position: right bottom;
    background-size: cover;
    background-attachment: fixed;
}

/*********
* FOOTER *
**********/

footer{
    padding: 5px 15px;
    max-height: 99px;
    background: black;
    color: white;
    font-family: var(--fontePadrao);
}

/**************
* FERRAMENTAS *
***************/

a{
    color: rgba(255, 255, 255, 0.445);
    text-decoration: none;
    font-weight: bolder;
}
a:hover{
    text-decoration: underline;
    color: blue;
}
i{
    max-height: 16px;
    max-width: 16px;
    padding: 2px 5px;
}