html {
    height: 100%;

    --border-base: 1px;
    --padding-base: 4px;
    --palette-color-1: #23272A;
    --palette-color-2: #2C2F33;
    --palette-color-3: #2f3136;
    --palette-color-4: #32353b;
    --palette-color-5: #36393f;

    --palette-color-foreground: #FFFFFF;
    --palette-color-foreground-dark: #F6F6F6;
    --palette-color-highlight: #404EED;
    --palette-color-highlight-dark: #5865F2;

    --color-navigation-background: var(--palette-color-1);
    --color-navigation-foreground: var(--palette-color-foreground-dark);
    --color-navigation-highlight: var(--palette-color-highlight-dark);
    --color-content-background: var(--palette-color-2);
    --color-content-foreground: var(--palette-color-foreground);

    --padding-thin: var(--padding-base);
    --padding-normal: calc(2 * var(--padding-base));
    --border-normal: var(--border-base);
}

body {
    display: grid;
    grid:
        "navigation content" 1fr
        "footer footer" auto
        / 200px 1fr;

    height: 100%;
    margin: 0;

    font-family: 'Franklin Gothic';
}

body > nav {
    grid-area: navigation;
    display: flex;
    flex-direction: column;

    background-color: var(--color-navigation-background);
    color: var(--color-navigation-foreground);
}

body > nav h3 {
    padding: var(--padding-normal);
    margin-bottom: 0;
}

body > nav a {
    padding: var(--padding-normal);
    user-select: none;
    cursor: pointer;
}

body > nav a:hover {
    color: var(--color-navigation-highlight);
}

.main-content-wrapper {
    grid-area: content;

    overflow: auto;
    background-color: var(--color-content-background);
    color: var(--color-content-foreground);
    padding: var(--padding-normal);
}

body > footer {
    grid-area: footer;
    background-color: black;
    color: white;
    text-align: center;
    padding: var(--padding-thin);
}

a,
a:visited {
    color: inherit;
    text-decoration: none;
}

#login-box {
    display: flex;

    height: 100%;
    justify-content: center;
    align-items: center;
}

#login-link {
    display: block;
    background-color: var(--palette-color-5);
    padding: var(--padding-normal);
    border-radius: 0.5em;
    font-size: 2em;
}

.twitch-logo:after {
    content: '\f1e8';
    color: #6441A4;
    font-family: fffiesta;
    display: inline-block;
    margin-left: var(--padding-thin);
}

.twitch-login-button
.twitch-login-button:hover,
.twitch-login-button:visited {
    background-color: #6441A4;
    color: white;
    padding: var(--padding-normal);
    border-radius: 5px;
}