:root {
    /* Backgrounds */
    --bgSurround: #212121;
    --bgHeader: #1A1A1A;
    --bgMain: #242424;
    --bgCard: #2E2E2E;
    --bgInput: #2A2A2A;
    --bgFooter: #141414;

    /* Text */
    --textPrimary: #F5F5F5;
    --textSecondary: #D6D6D6;
    --textCaption: #A8A8A8;

    /* Buttons */
    --hover: #4A4A4A;
    --buttonBorder: rgba(218, 165, 32, 0.5);
    --buttonHover: rgba(218, 165, 32, 0.1);
    --buttonGlow: rgba(218, 165, 32, 0.25);

    /* Other */
    --border: #3F3F3F;
    --accent: goldenrod;
    --shadow: rgba(0, 0, 0, 0.5);
    --glow: rgba(63, 63, 63, 0.4);
    --bar: #383838;
}

html, body {
    height: 100%;
}

body {
    background-color: var(--bgSurround);
    color: var(--textPrimary);
    display: flex;
    flex-direction: column;
    font-family: "Exo 2", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Oxanium", sans-serif;
}

header, main, footer {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1280px;
    width: 100%;
}

main, footer {
    padding: 1em;
}

/*
    Header
*/

header {
    background-color: var(--bgHeader);
    padding: 0.5em 1em;
}

header h1 {
    font-size: 2.5em;
    text-align: center;
}

header ul {
    display: flex;
    flex-wrap: wrap;
    gap:10%;
    justify-content: center;
    list-style: none;
}

.headerNavElement {
    border-radius: 0.5em;
    color: var(--accent);
    display: inline-block;
    font-size: 1.25em;
    margin: 0.25em 0;
    padding: 0.2em;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.headerNavElement:hover {
    background-color: var(--hover);
    transform: scale(1.1);
}

/*
    Main
*/

main {
    background-color: var(--bgMain);
    flex: 1;
}

/*
    Footer
*/

footer {
    background-color: var(--bgFooter);
}

footer ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10%;
    justify-content: center;
    list-style: none;
}

.footerNavElement {
    align-items: center;
    display: flex;
    flex-direction: column;
}

.footerNavElement a {
    align-items: center;
    border-radius: 0.5em;
    color: var(--textPrimary);
    display: flex;
    gap: 0.5em;
    margin: 0.25em 0;
    padding: 0.2em;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.footerNavElement a:hover {
    background-color: var(--hover);
    color: var(--accent);
    transform: scale(1.1);
}

.footerNavElement img {
    width: 2em;
}

.invert {
    filter: invert(1);
}

footer p {
    color: var(--textCaption);
    margin-top: 0.25em;
    text-align: center;
}