/* Variables */
:root {
    /* Neutral */
    --neutral-50: #fafafa;
    --neutral-100: #f4f4f5;
    --neutral-200: #e4e4e7;
    --neutral-300: #d4d4d8;
    --neutral-400: #9f9fa9;
    --neutral-500: #71717b;
    --neutral-600: #52525c;
    --neutral-700: #3f3f46;
    --neutral-800: #27272a;
    --neutral-900: #18181b;
    --neutral-950: #09090b;

    /* Blue */
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bedbff;
    --blue-300: #8ec5ff;
    --blue-400: #51a2ff;
    --blue-500: #2b7fff;
    --blue-600: #155dfb;
    --blue-700: #1447e6;
    --blue-800: #193cb8;
    --blue-900: #1c398e;
    --blue-950: #162556;

    /* Red */
    --red-50: #fef2f2;
    --red-100: #ffe2e2;
    --red-200: #ffc9c9;
    --red-300: #ffa2a2;
    --red-400: #ff6467;
    --red-500: #fb2c36;
    --red-600: #e7000b;
    --red-700: #c10007;
    --red-800: #9f0712;
    --red-900: #82181a;
    --red-950: #460809;

    /* Yellow */
    --yellow-50: #fffbeb;
    --yellow-100: #fef3c6;
    --yellow-200: #fee685;
    --yellow-300: #ffd230;
    --yellow-400: #ffb900;
    --yellow-500: #fe9a00;
    --yellow-600: #e17100;
    --yellow-700: #bb4d00;
    --yellow-800: #973c00;
    --yellow-900: #7b3306;
    --yellow-950: #461901;

    --shade-effect-50: #3f3f4670;
    --shade-effect-100: #09090b81;

    /* Fonts */
    --lexend-font: "Lexend", sans-serif;
    --bricolage-grotesque-font: "Bricolage Grotesque", sans-serif;
    --space-grotesk-font: "Space Grotesk", sans-serif;
    --saira-font: "Saira", sans-serif;
    --archivo-font: "Archivo", sans-serif;
    --outfit-font: "Outfit", sans-serif;
    --dm-sans-font: "DM Sans", sans-serif;
    --poppins-font: "Poppins", sans-serif;
    --tilt-warp-font: "Tilt Warp", sans-serif;
    --manrope-font: "Manrope", sans-serif;
}

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

body {
    scroll-behavior: smooth; /* Smooth Scroll */
    font-family: var(--saira-font);
    background-color: var(--neutral-200);
}

/* Header */
.header {
    background: linear-gradient(to bottom, var(--blue-500), var(--blue-900));
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header__logo {
    width: 80vw;
    margin: 10px;
}

.header__navbar {
    text-align: center;
    background-color: var(--yellow-400);
    width: 100%;
    padding: 10px;
    box-shadow: 0 0 17px var(--shade-effect-50);
}

.header__link {
    font: bold 1.2em var(--outfit-font);
    text-decoration: none;
    color: var(--red-600);
    width: 100vw;
    padding: 5px 10px;
    transition: all 0.5s ease-in-out;
}

.header__link:hover {
    background-color: var(--red-500);
    color: var(--yellow-50);
    font-size: 1.35em;
    border-radius: 12px;
}

/* Main Content */
.card {
    margin: 15px 10px;
}

/* About section */
.about__list {
    margin: 5px 20px;
}

/* Characters Section */
.characters__subtitle {
    color: var(--yellow-600);
}

.characters__figure {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.characters__image {
    border-radius: 17px;
    margin: 15px 0;
    box-shadow: 0 0 16px var(--shade-effect-50);
    width: 75vw;
    transition: all 0.5s ease;
}

.characters__image:hover {
    box-shadow: 0 0 24px var(--shade-effect-100);
    transform: scale(1.1);
}

.characters__caption {
    color: var(--yellow-700);
    font-weight: bold;
}

/* Curiosities Section */
.curiosities__title {
    color: var(--red-600);
}

.curiosities__list {
    margin: 15px 25px;
}

.curiosities__description {
    margin: 5px;
    padding: 0;
}

/* Footer */
.footer {
    background-color: var(--neutral-950);
    color: var(--neutral-50);
    padding: 25px 5px;
    text-align: center;
}

.footer__item {
    display: flex;
    justify-content: space-around;
}

.footer__subtitle {
    font: bold 2em var(--outfit-font);
    margin: 0;
    padding: 0;
}

.footer__subtitle--social {
    color: var(--yellow-700);
}

.footer__subtitle--projects {
    color: var(--red-700);
}

.footer__link {
    color: var(--neutral-50);
    font: normal 1em var(--archivo-font);
    text-decoration: none;
    transition: all 0.5s ease;
    display: block;
    padding: 10px 16px;
}

.footer__link:hover {
    color: var(--neutral-800);
    background-color: var(--neutral-50);
    border-radius: 12px;
}


/* Generic Styles Tags */
h1,
h2,
h3,
h4 {
    font-family: var(--bricolage-grotesque-font);
    margin-top: 15px;
}

p {
    margin: 16px 10px;
}

strong {
    color: var(--blue-400);
}

.link {
    color: var(--red-400);
    transition: all 0.3s ease-in;
}

.link:hover {
    color: var(--red-700);
}


/* Media Queries */
@media screen and (min-width: 576px) {
    .characters__image {
        max-width: 560px;
    }

    .header__logo {
        max-width: 465px;
        margin: 10px;
    }

    .footer__description {
        margin: auto;
        max-width: 75vw;
        padding: 15px 0;
    }
}

@media screen and (min-width: 768px) {
    .card {
        padding: 10px 25px;
        max-width: 850px;
        margin: auto;
    }

    .header__logo {
        max-width: 675px;
        margin: 10px;
    }

    .header__navbar {
        text-align: center;
        background-color: var(--yellow-400);
        width: 100%;
        padding: 10px;
        box-shadow: 0 0 17px var(--shade-effect-50);
    }

    .header__link {
        font: bold 1.2em var(--outfit-font);
        text-decoration: none;
        color: var(--red-600);
        width: 100vw;
        padding: 5px 10px;
        transition: all 0.5s ease-in-out;
    }

    h1 {
        font-size: 2.3em;
    }

    h2 {
        font-size: 1.85em;
    }

    h3 {
        font-size: 1.35em;
    }

    p, li, ul, ol {
        font-size: 1.05em;
    }
}

@media screen and (min-width: 1200px) {
    .card {
        max-width: 1024px;
    }

    h1 {
        font-size: 2.5em;
    }

    h2 {
        font-size: 2em;
    }

    h3 {
        font-size: 1.50em;
    }

    p, li, ul, ol {
        font-size: 1.15em;
    }
}