/* Variables */
:root {
    /* Fonts */
    --mozilla-headline-font: "Mozilla Headline", sans-serif;
    --momo-font: "Momo Trust Display", sans-serif;
    --stack-font: "Stack Sans Text", sans-serif;
    --archivo-font: "Archivo Black", sans-serif;

    /* Colors */
    --classic-green-color-v1: #01925b;
    --classic-green-color-v2: #017d4f;
    --classic-green-color-v3: #0e634c;
    --classic-green-color-v4: #9ceacc;
    --classic-green-color-v5: #028252;
    --classic-green-color-v6: #89a574;
    --classic-green-color-v7: #062f00a9;

    --classic-beige-color-v1: #fbe6cb;
    --classic-beige-color-v2: #e6c99d;
    --classic-beige-color-v3: #e3c598;
    --classic-beige-color-v4: #c89a5f;
    --classic-beige-color-v5: #7a5e38;
    --classic-beige-color-v6: #debe81;
    --classic-beige-color-v7: #553201;
    --classic-beige-color-v8: #482b02;

    --classic-white-color-v1: #f3fefd;
    --classic-white-color-v2: #c3dad2;

    --classic-gray-color-v1: #ededed;
    --classic-gray-color-v2: #cacaca;

    --black-color-v1: #1d1d1e;

    --hover-effect-v1: #482b02cd;
}


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


/* Selection */
::selection {
    background-color: var(--classic-green-color-v3);
    color: var(--classic-beige-color-v3);
}

/* Cursor Style */
html,
body {
    cursor: url("assets/cursor/default.png") 16 16, auto;
}

html body a {
    cursor: url("assets/cursor/pointer.png") 16 16, auto;
}


/* Scrollbar Styles */
body::-webkit-scrollbar {
    width: 12px;
}

body::-webkit-scrollbar-track {
    background: var(--classic-beige-color-v2);
}

body::-webkit-scrollbar-thumb {
    background: var(--classic-green-color-v3);
    border-radius: 6px;
}

body::-webkit-scrollbar-thumb:hover {
    background: var(--classic-green-color-v2);
}


html {
    /* Smooth scroll */
    scroll-behavior: smooth;
}

body {
    background-color: var(--classic-beige-color-v2);
}


header {
    background-image: url("assets/header.png");
    justify-content: space-between;
    align-items: center;
    display: flex;
    padding: 1em;
}

header img.logo {
    height: 5em;
}

header nav i {
    color: var(--classic-beige-color-v3);
    font-size: 2em;
    margin: 10px;
    transition: all 0.5s ease-in-out;
}

header nav i:hover {
    text-shadow: 0px 0px 8px var(--classic-green-color-v3);
    transform: scale(1.2);
}


main {
    box-shadow: 0px 0px 12px #9ba6c4;
}

main section#welcome {
    background-image: url("assets/banners/big/banner1-big.png");
    color: var(--classic-beige-color-v8);
    background-position: center center;
    background-size: cover;
    height: 100vh;
    padding: 2em;
}

main section#welcome h1 {
    font: bolder 5em var(--archivo-font);
}

main section#welcome p {
    font: bold 1.2em var(--mozilla-headline-font);
    margin: 0.2em;
}

main section#welcome strong {
    text-shadow: 0 0 1px var(--classic-beige-color-v8);
}

main section#welcome article {
    text-align: center;
    padding: 1em;
}

main section#welcome h2 {
    font: bold 2.5em var(--archivo-font);
}

main section#games {
    background-image: url("assets/banners/big/banner2-big.png");
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.253);
    color: var(--classic-white-color-v1);
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    height: 100vh;
}

main section#games2 {
    background-image: url("assets/banners/big/banner3-big.png");
    background-position: center center;
    background-size: cover;
    height: 100vh;
}

main section#games h2 {
    font: bold 2.5em var(--archivo-font);
    text-align: center;
    padding: 10px;
}

main section#games article#minigames {
    box-shadow: 0px 0px 3.66px var(--classic-white-color-v2);
    background-color: rgba(190, 190, 190, 0.382);
    border-radius: 7px;
    margin: 0 auto;
    padding: 10px;
    width: 75%;
}

main section#games article#minigames div {
    background-color: rgba(0, 0, 0, 0.484);
    border-radius: 1em;
    display: flex;
    margin: 10px;
    padding: 10px;
}

main section#games article#minigames figure {
    font: 700 1.3em var(--momo-font);
}

main section#games article#minigames div a {
    color: var(--classic-beige-color-v2);
    text-decoration: none;
}

main section#games article#minigames div figure img {
    height: 95px;
    transition: all 0.4s ease-in-out;
}

main section#games article#minigames div figure figcaption {
    text-align: center;
}

main section#games article#minigames div p {
    font: 600 1.2em var(--mozilla-headline-font);
    padding: 10px;
}

main section#games article#minigames div figure img {
    border-radius: 25%;
}

main section#games article#minigames div figure img:hover {
    box-shadow: 0px 0px 12.33px rgba(240, 248, 255, 0.344);
}

main section#faq {
    background-image: linear-gradient(to bottom, var(--classic-green-color-v1), var(--classic-green-color-v2), var(--classic-green-color-v3), var(--classic-green-color-v5));
    padding: 10px;
}

main section#faq h2 {
    font: 700 3.1em var(--stack-font);
    text-align: center;
    margin-bottom: 1em;
    color: var(--classic-green-color-v4);
}

main section#faq article {
    box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.279);
    background-color: #ffffff39;
    border-radius: 10px;
    margin: 1em auto;
    padding: 1.5em;
    width: 85%;
}

main section#faq article div.box h3 {
    font: 100 2em var(--momo-font);
    color: var(--black-color-v1);
}

main section#faq article div.box p {
    font: 600 1.2em var(--mozilla-headline-font);
    color: var(--classic-green-color-v7);
}

main section#faq article div.box a {
    color: var(--classic-green-color-v4);
    transition: all 0.3s ease-in-out;
}

main section#faq article div.box a:hover {
    text-shadow: 0px 0px 1px var(--classic-green-color-v4);
}

main section#faq article div.box a:visited {
    color: var(--classic-green-color-v7);
}

main section#faq article.como-personalizo-minha-conta p.description-examples {
    margin: 1em;
}


footer {
    background-color: var(--classic-green-color-v3);
    text-align: center;
    padding: 1.3em;
}

footer p {
    font: 600 1.3em var(--mozilla-headline-font);
    color: var(--classic-beige-color-v2);
}

footer a {
    color: var(--classic-beige-color-v4);
    text-decoration: none;
    transition: all 0.5s ease-in;
}

footer a:visited {
    color: var(--classic-beige-color-v7);
}

body main section strong {
    font-weight: 900;
    font-size: 1em;
}


/* Media Queries */
@media (max-width: 1350px) {
    main section#games article#minigames {
        padding: 5px;
        width: 95%;
    }

    main section#games article#minigames div figure img {
        height: 65px;
        transition: all 0.4s ease-in-out;
    }
}


@media (max-width: 768px) {
    main section#welcome {
        background-image: url("assets/banners/medium/banner1-medium.png");
        padding: 1em;
    }

    main section#welcome h1 {
        font: bolder 2em var(--archivo-font);
    }

    main section#welcome h2 {
        font: bold 1.5em var(--archivo-font);
    }

    main section#welcome p {
        font: bold 1em var(--mozilla-headline-font);
        margin: 0em;
    }

    main section#games {
        background-image: url("assets/banners/medium/banner2-medium.png");
    }

    main section#games h2 {
        font: bold 1.5em var(--archivo-font);
        text-align: center;
        padding: 10px;
    }

    main section#games article#minigames div {
        text-align: center;
        margin: 5px;
        padding: 5px;
    }

    main section#games article#minigames div p {
        font: 700 90% var(--mozilla-headline-font);
        padding: 2px;
    }

    main section#games article#minigames div figure figcaption {
        text-align: center;
        font-size: 0.5em;
    }

    main section#games2 {
        background-image: url("assets/banners/medium/banner3-medium.png");
    }

    main section#faq article {
        padding: 1em;
        width: 95%;
    }
}


@media (max-width: 481px) {
    main section#welcome {
        background-image: url("assets/banners/small/banner1-small.png");
    }

    main section#games {
        background-image: url("assets/banners/small/banner2-small.png");
    }

    main section#games2 {
        background-image: url("assets/banners/small/banner3-small.png");
    }

    main section#faq h2 {
        font: 600 1.5em var(--stack-font);
        text-align: center;
        margin-bottom: 1em;
        color: var(--classic-green-color-v4);
    }

    main section#faq article div.box h3 {
        font: 100 1.2em var(--momo-font);
        color: var(--black-color-v1);
    }

    main section#faq article div.box p {
        font: 600 0.8em var(--mozilla-headline-font);
        color: var(--classic-green-color-v7);
    }

    footer p {
        font-size: 1em;
    }
}