@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@font-face {
    font-family: "Android";
    src: url("../fontes/idroid.otf");
    font-weight: normal;
}


:root {
    /* Root é uma pseudoclasse que todo documento tem. Tudo colocado dentro da pseudoclasse root se aplica ao documento todo.
    Abaixo, foram criadas variáveis carregando os valores hexadecimais da paleta de cores do site.

    Note que TODA variável CSS deve começar com --
    */
    --cor0: #c5ebd6;
    --cor1: #83e1ad;
    --cor2: #3ddc84;
    --cor3: #2fa866;
    --cor4: #1a5c37;
    --cor5: #063d1e;

    --fonte-padrao: Arial, Verdana, Helvetica, sans-serif;
    --fonte-destaque: 'Bebas Neue', cursive;
    --fonte-android: 'Android', cursive;
}
* {
    /* Este asterisco (*) faz alterações ao estilo global. Ou seja, todas as alterações de estilo feitas sob * afetam TODOS os elementos, incluindo os que não foram referenciados neste arquivo CSS.
    */
    margin: 0px;
    padding: 0px;
}

body {
    background-color: var(--cor0);
    font-family: var(--fonte-padrao);
}

a.externo::after {
    content: "\1F517";
}

header {
    background-image: linear-gradient(to bottom, var(--cor3), var(--cor5));
    min-height: 150px;
    text-align: center;
    padding-top: 40px;
}

header>h1 {
    color: white;
    font-family: var(--fonte-destaque);
    font-size: 3em;
    margin-bottom: 20px;
    padding: 0px 10px 0px 10px;
    text-shadow: 0px 5px 6px rgba(0, 0, 0, 0.555);
}

header>p {
    font-family: var(--fonte-padrao);
    font-size: 1.2em;
    color: white;
    max-width: 400px;
    padding: 0px 10px 0px 10px;
    margin: auto;
}

nav {
    background-color: var(--cor5);
    padding: 10px;
    box-shadow: 0px 3px 3px #638d77;
}

nav>a {
    color: white;
    padding: 10px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition-duration: 0.25s;
}

nav>a:hover {
    background-color: var(--cor3);
    color: var(--cor5);
}

nav>a:active {
    background-color: var(--cor4);
    color: var(--cor1);
    transition-duration: 0.15s;
}

main {
    min-width: 300px;
    max-width: 1000px;
    margin: auto;
    margin-bottom: 30px;
    background-color: white;
    padding: 20px;
    box-shadow: 0px 0px 10px #638d77;
    border-radius: 0px 0px 10px 10px;
}

main h1 {
    color: var(--cor5);
    font-family: var(--fonte-android);
}

main h2 {
    font-family: var(--fonte-android);
    color: var(--cor5);
    background-image: linear-gradient(to right, var(--cor1), transparent);
    padding: 0px 0px 0px 15px;
}

main p {
    margin: 15px 0px;
    text-align: justify;
    text-indent: 30px;
    line-height: 1.5em;
}

main strong {
    color: var(--cor4);
    font-weight: bold;
}

main a {
    text-decoration: none;
    font-weight: bold;
    color: var(--cor3);
}

main a:hover {
    text-decoration: underline;
    color: var(--cor2);
}

main a::after {
    content: " [LINK]";
}

main img {
    width: 100%;
}

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

div.video {
    background-color: var(--cor4);
    margin: 0px -20px 30px -20px;
    padding: 20px;
    padding-bottom: 58%;
    position: relative;
}

div.video>iframe {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
}

aside {
    background-color: var(--cor1);
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 2px 5px #063d1e93;
}

aside > h3 {
    background-color: var(--cor3);
    padding: 5px;
    /* Pode-se pôr margin negativa para aproximar uma caixa de outra. Neste caso, está encaixando a caixa do h3 com a caixa do aside, além de configurar o border-radius com os mesmos valores. */
    margin: -10px -10px 0px -10px;
    border-radius: 10px 10px 0px 0px;
}

aside > ul {
    /* list-style-type NÃO é compatível com todos os navegadores.
    Além disso, a contrabarra serve para especificar que o número se trata de um código (neste caso, de emoji), enquanto 00A0 refere-se ao espaço vazio.
     */
    list-style-type: "\2714\00A0\00A0";
    list-style-position: inside;
    columns: 2;
}

footer {
    background-color: var(--cor5);
    color: white;
    text-align: center;
    font-size: 0.8em;
    padding: 5px;
}

footer a {
    color: var(--cor0);
    font-weight: bolder;
    text-decoration: none;
}

footer a:hover {
    color: var(--cor1);
    text-decoration: underline;
}