@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jersey+25&family=Lexend:wght@100..900&display=swap');

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

:root {
    --tom-azul: rgb(3, 65, 89);
    --tom-verde-1: rgb(2, 89, 81);
    --tom-verde-2: rgb(2, 115, 94);
    --tom-verde-3: rgb(3, 140, 62);
    --tom-verde-4: rgb(12, 242, 93);

    --fundo: #ececec;
    --fundo-header: var(--tom-verde-3);
    --fundo-footer: var(--tom-verde-3);
    --fundo-extra: var(--tom-verde-4);

    --h1-h2-cor: var(--tom-verde-1)
}

body {
    font-family: "Lexend", Arial, Helvetica, sans-serif;
    background-color: var(--fundo);
}

/* Header */

header > div {
    background-color: var(--fundo-header);
    color: white;
    padding: 20px;
    text-align: center;
}

header h1 {
    font-family: "Jersey 25", Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 3em;
    letter-spacing: 0.2em;
}

header > div > h2 {
    font-size: 1em;
    margin-top: 20px;
}

nav {
    background-color: var(--tom-verde-2);
    padding: 5px;
    text-align: center;
}

    nav > a {   
        color: white;
        text-decoration: none;
        padding: 5px 10px;
        transition-duration: 0.3s;
    }

    nav a:visited {
        color: white;
    }

    nav > a:hover {
        background-color: var(--tom-verde-1);
    }

    @media (max-width: 360px){
        nav a {
            display: block;
            text-align: left;
        }
    }

/*main {
    
}*/

    main > article {
        background-color: white;
        max-width: 800px;
        padding: 20px;
        margin: auto;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.175);
    }

    main h1 {
        color: var(--h1-h2-cor);
    }

    main h2 {
        color: var(--h1-h2-cor);
    }

    main p {
        line-height: 2em;
        text-align: justify;
        margin: 20px 0;
        font-size: 1.1em;
    }

    @media (max-width: 800px) {
        main > article {
            border-radius: 0 0 0 0;
        }
    }

a.link-externo {
    background-color: var(--tom-verde-4);
    color: black;
    text-decoration: none;
    padding: 2px;
    border-radius: 3px;
    transition-duration: 0.3s;
}

    a.link-externo:hover {
        background-color: var(--tom-verde-3);
        color: white;
    }

    a.link-externo:visited {
        color: black;
    }

    a.link-externo::after {
        content: '\00A0\1F517';
    }

img {
    display: block;
    margin: auto;
}

    img.img-grande {
        width: 100%;
        display: block;
        margin: auto;
    }

    img.bugdroid {
        width: 100%;
        max-width: 290px;
    }


#video-section {
    background-color: var(--tom-verde-2);
    margin: 0 -20px 0 -20px;
    padding: 20px;
    position: relative;
    padding-bottom: 56%;
    box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.175);
}

#video-section > iframe {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
}

aside#extra {
    background-color: var(--fundo-extra);
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px 10px;
    box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.175);
}

    #extra > h2 {
        background-color: var(--tom-verde-3);
        color: white;
        margin: -20px -20px 0 -20px;
        padding: 10px;
        border-radius: 10px 10px 0 0;
    }

    #extra > ul {
        list-style-position: inside;
        columns: 2;
        margin: 10px;
    }

    @media (max-width: 600px) {
        #extra > ul {
            columns: 1;
        }
    }

footer {
    background-color: var(--fundo-footer);
    text-align: center;
    color: white;
    padding: 10px;
    margin-top: 20px;
}

footer a {
    color: white;
    font-weight: bold;
}