@charset "UTF-8";

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

/* alteração global */
* {
    font-family: Arial, Helvetica, sans-serif;

    margin: 0px;
    padding: 0px;
}

/* cor no fundo */
body, html {
    background-color: rgb(211, 199, 199);
    text-align: center;
}

/* cor de fundo para o cabeçalho */
header {
    background-color: rgb(241, 236, 236);
    font-family: 'Handjet', cursive;
    font-family: 'Play', sans-serif;
}

/* espaçamento e alinhamento ao centro */
header > h1 {
    padding: 10px;
    text-align: center;
    font-family: 'Handjet', cursive;
    font-family: 'Play', sans-serif;
    font-size: 4.0em;
}

h2, p {
    text-align: center;
}

div {
    display: inline-flex;
    height: 200px;
    align-items: left;
}

#menuburguer {
    /* cor do fundo do elemento */
    background-color: rgb(76, 92, 82);
    /* cor do elemento */
    color: white;
    /* cria um boclo */
    display: block;
    /* alinhar texto */
    text-align: center;
    /* espaçamento do conteudo interno */
    padding: 10px;
    /* ao colocar ponteiro da um formato de mão */
    cursor: pointer;
}

/* efeito ao seleciona o bloco burguer*/
#menuburguer:hover {
    /* fundo branco */
    background-color: white;
    /* menuburguer preto */
    color: black;
}

/* criação de um bloco */
menu {
    display: none;
}

/* tira a linha do link */
menu > ul {
    list-style-type: none;
}

/* os filhos do menu */
menu > ul > li > a  {
    /* criação de um bloco */
    display: block;
    /* espaçamento */
    padding: 10px;
    /* tira formatação dos textos */
    text-decoration: none;
    /* alinhameto do texto */
    text-align: center;
    background-color: rgb(83, 79, 79);
    /* cor das fontes */
    color: white;
    border-top: 2px solid gray;
}

/* filhos do menu */
menu > ul > li > a:hover {
    background-color: rgb(124, 16, 16);
}

/* conteudo do site */
main {
    /* largura */
    width: 90vw;
    /* cor de fundo */
    background-color: white;
    /* espaçamento */
    margin: auto;
    /* espaçamento em cima */
    margin-top: 10px;
    /* espaçamento conteudo */
    padding: 10px;
    /* arredondamento do conteudo */
    border-radius: 10px;
}

/* Artigos */
article > h2 {
    padding-bottom: 20px;
}

/* Artigos */
article > p {
    text-align: center;
    margin-bottom: 10px;
    text-indent: 20px;
}

.rodape > a {
    text-decoration: none;
}