@charset "UTF-8";

:root {
    --cor0: blue;     /* cor do header */
    --cor1: #367cdd;  /* cor do header degrade */
    --cor2: #74A4BC;  /* cor do body e html */
    --cor3: #90E0EF;
    --cor4: #c1cfda;
}

@font-face {
    font-family: 'Honk';
    src:url(Honk-Regular-VariableFont_MORF,SHLN.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
}

body, html {
    background-color: #74A4BC;
}

header {
    background-image: linear-gradient(to bottom, blue, #367cdd);
}

header > h1 {
    font-family: Honk;
    font-size: 3em;
    padding: 20px;
    text-align: center;
}

span#burguer {
    background-color: #033ceb;
    color: white;
    display: block;
    text-align: center;
    padding: 10px 10px;
    cursor: pointer;
}

span#burguer:hover {
    background-color: #00B4D8;
    color: white;
    
}

menu {
    display: none;
}

menu > ul {
    list-style-type: none;
}

menu > ul > li > a {
    display: block;
    padding: 10px;
    text-decoration: none;
    text-align: center;
    background-color: #033ceb;
    color: white;
    border-top: 2px solid #367cdd;
}

menu > ul > li > a:hover {
    background-color: #00B4D8;
}

main {
    width: 90vw;
    background-color: white;
    margin: auto;
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
}

article > h2 {
    text-align: center;
    padding-bottom: 20px;
}

article > p {
    text-align: justify;
    margin-bottom: 20px;
    text-indent: 20px;
}

ul#topicos {
    padding-left: 40px;
}
/* PAGINA 2 */

caption { 
    font-size: 1.5em;
    font-weight: bold;
    padding: 10px;
    background-color: lightgray;
    border: 1px solid black;
}

table {
    margin: auto;
    width: 400px;
    border-collapse: collapse;
}
td, th {
     border: 1px solid black;          
}
td {
    text-indent: 10px;
    padding-top: 5px;
}
td > a {
    color: blue;
    text-decoration: none;
}
tbody > tr > td > a:hover {
    background-color: #00B4D8;
    color: white;
}
td.sigla {
    background-color: lightgray;
}