:root {
    --page-background: #1e1e26;
    --page-background-secondary: #2d2d39;
    --page-background-secondary-light: #44445a;
    --page-background-contrast: #080810;
    --page-border: #0d0d11;
    --page-text: #bbb6c5;
    --page-text-secondary: #656170;
    --page-text-contrast: #dedede;
    --page-accent: #8fc045;
    --page-accent-light: #b4e26f;
    --page-accent-dark: #719140;
    --page-accent-contrast: #18181f;
    --page-warning: #fbc02d;
    --page-warning-contrast: #18181f;
    --tooltip-background: white;
    --tooltip-text: black;
    --control-highlight: rgba(255, 255, 255, 0.1);
    --serif: 'Alegreya', serif;
    --sans: 'Alegreya Sans', sans-serif;
    --mono: 'Recursive', 'Rec Casual Mono', monospace;
    --ui-font: var(--sans);
    --ui-font-size: 0.8em;
    --text-font: var(--serif);
    --text-font-size: 1.25rem;
    --heading-font: var(--sans);
    --heading-font-size: 0.8em;
    --code-font: var(--mono);
    --code-font-size: 0.8em;
    --page-width: 40rem;
}

/**
 * Page styles
 */
html {
    background-color: var(--page-background);
    color: var(--page-text);
    font-family: var(--text-font);
    line-height: 1.8;
}

::selection {
    text-shadow: 1px 1px 1px #000000AA;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/**
 * Grid layout
 */
.page-header {
    display: grid;
    grid-template-columns: 1fr var(--page-width) 1fr;
    background-color: var(--page-background-secondary);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

    .page-header p {
        margin: 0;
    }

    .page-header .site-title {
        grid-column: 1;
    }

    .page-header nav {
        grid-column: 2;
    }

    .page-header .user-info {
        grid-column: 3;
        justify-self: end;
    }

        .page-header .user-info input[type=submit],
        .page-header .user-info a {
            margin-left: .75em;
        }

.main {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr var(--page-width) 1fr;
    column-gap: 1em;
    row-gap: 1.25em;
    margin: 1em;
    align-content: baseline;
    font-size: var(--text-font-size);
}

    .main .main {
        grid-column: span 3;
    }

.main-avatar {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

.mobile-only-banner {
    display: none;
}

/* Spanning elements */
.main > h1,
.main > h2,
.main > form {
    grid-column: 2 / 3;
}

.span-many {
    grid-row: span 6;
}

/* Content elements */
.main > * {
    grid-column: 2;
    margin: 0;
}

.main > p {
    text-align: justify;
    hyphens: auto;
}

.main > pre {
    white-space: pre-wrap;
    overflow: auto;
}

/* Aside elements */
.main aside {
    grid-column: 3;
    color: var(--page-text-secondary);
    padding-left: 1em;
    font-family: var(--ui-font);
    font-size: var(--ui-font-size);
    max-width: 20rem;
}

    .main aside p {
        text-align: left;
        margin: 0;
    }

.page-footer {
    background-color: var(--page-background-contrast);
    color: var(--page-text-contrast);
    box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
    margin-top: 2em;
}

    .page-footer footer {
        margin: 0 auto;
        padding: 1em 0;
        max-width: var(--page-width);
    }

ol.footnotes {
    padding-left: 0;
}

    ol.footnotes li {
        list-style: none;
        margin-bottom: 0;
    }

        ol.footnotes li:target {
            background-color: var(--page-background-secondary-light);
        }

ul.social {
    display: flex;
    flex-wrap: wrap;
    grid-column: 2 / 3;
    gap: 1.5rem;
    padding: 0;
    margin: 0 0 1rem 0;
}

    ul.social li {
        list-style: none;

        a {
            display: inline-flex;
            align-items: center;
            gap: 0.3em;
        }

        .svg-icon {
            height: 2cap;
            line-height: 1;

            svg {
                height: 100%;
                width: 100%;
                overflow: hidden;
            }
        }
    }

/**
  * Nav
  */
.page-header {
    font-family: var(--heading-font);
    font-size: 1.5em;
    font-weight: 500;
    padding: 1rem;
    padding: 0 1rem;
    line-height: 4rem;
}

.site-title {
    margin: 0;
    font-size: 1em;
}

    .site-title a,
    .site-title a:visited {
        color: var(--page-text);
        transition: color .3s ease-in;
        text-decoration: none;
    }

        .site-title a:hover {
            color: var(--page-accent);
            text-decoration: none;
            transition: color .1s ease-out;
        }

nav ul {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1em;
    row-gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

    nav ul li {
        margin-bottom: 0;
    }

/**
 * Elements & Typography
 */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading-font);
    font-size: var(--heading-font-size);
    font-weight: 500;
}

h1 {
    font-size: 2.2rem;
}

h2 {
    font-size: 1.6rem;
    /*font-variant-caps: small-caps;*/
    border-bottom: 1px solid var(--page-text-secondary);
}

h3 {
    font-size: 1.6rem;
    /*font-variant-caps: small-caps;*/
}

a {
    color: var(--page-accent);
    text-decoration: underline;
    transition: color .3s ease-in;
}

    a:visited {
        color: var(--page-accent-dark);
    }

    a:hover {
        color: var(--page-accent-light);
        text-decoration: underline;
        transition: color .1s ease-out;
    }

    a.autolink {
        word-break: break-all;
    }

    a[href^="#"] {
        text-decoration: none;
    }

code {
    font-family: var(--code-font);
    font-size: var(--code-font-size);
    background: var(--page-background-secondary);
    padding: .125em .25em;
    border-radius: 5px;
}

pre code:not([class*=language-]) {
    display: block;
    font-family: var(--code-font);
    font-size: var(--code-font-size);
    background: var(--page-background-secondary);
    padding: .25em .5em;
    border-radius: 5px;
}

pre code[class*=language-] {
    font-family: var(--code-font);
    font-size: var(--code-font-size);
    padding: 0;
    border-radius: 0;
}

blockquote {
    padding-left: 2em;
    font-style: italic;
}

    blockquote pre code {
        font-style: normal;
    }

strong {
    font-weight: 700;
}

small {
    font-size: .8em;
    opacity: .6;
}

li p:first-child {
    margin-top: 0;
}

li p:last-child {
    margin-bottom: 0;
}

abbr[title] {
    text-decoration: none;
    border-bottom: 1px dotted;
}

figure {
    margin: 0;
}

.quote blockquote {
    margin: 0;
    padding-left: 0;
    font-style: inherit;
    text-align: justify;
}

blockquote p:first-child {
    margin-top: 0;
}

.quote figcaption {
    color: var(--page-text-secondary);
    font-size: .9em;
    margin-top: 1em;
}

    .quote figcaption:before {
        content: '—';
    }

.dialog p {
    margin: 0;
}

::selection {
    background-color: var(--page-accent-dark);
    color: white;
}

h3.page-message {
    font-family: var(--ui-font);
    font-size: 5rem;
    margin: 1em 0;
    text-align: center;
}

.avatar {
    border-radius: 3px;
}

img.inline {
    max-height: 1.25em;
    transform: translateY(.25em);
    margin-right: .25em;
}

.image-gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

    .image-gallery img {
        object-fit: cover;
    }

.pixelart {
    image-rendering: pixelated;
}

/**
 * Forms
 */
.ui {
    font-family: var(--ui-font);
    font-size: var(--ui-font-size);
}

.label {
    font-weight: 500;
}

main form {
    font-family: var(--ui-font);
}

.form-control p {
    margin: 0;
}

label {
    font-weight: 500;
    margin-left: 2px !important;
}

    label .inline-hint {
        font-weight: 400;
    }

input[type=text],
input[type=url],
input[type=number],
textarea {
    background-color: var(--page-background-secondary);
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--page-text);
    font-family: var(--ui-font);
    font-size: var(--ui-font-size);
    max-width: 100%;
    padding: .25em .5em;
}

    input[type=text]:focus,
    input[type=url]:focus,
    input[type=number]:focus,
    textarea:focus {
        outline: none;
        box-shadow: 0 0 3px 1px var(--page-accent);
    }

input[type=text] {
    width: 18rem;
}

input[type=url] {
    width: 32rem;
}

input[type=number] {
    width: 4rem;
}

textarea {
    font-family: var(--code-font);
    font-size: var(--code-font-size);
    height: 12rem;
    width: 36rem;
}

.error-message {
    color: var(--page-warning);
}

input[type=button],
input[type=submit],
button,
.link-button {
    background-color: transparent;
    border: 1px solid var(--page-accent);
    border-radius: 3px;
    color: var(--page-accent);
    cursor: pointer;
    display: inline-block;
    font-family: var(--ui-font);
    font-weight: 500;
    font-size: 1rem;
    text-align: center;
    padding: .5em 1em;
    min-width: 3rem;
    line-height: 1.4;
    transition: background-color .2s, color .2s;
    user-select: none;
}

    input[type=button]:active,
    button:active,
    .link-button:active {
        background-color: var(--control-highlight);
        text-decoration: none;
    }

    input[type=button].warning,
    button.warning,
    .link-button.warning {
        border-color: var(--page-warning);
        color: var(--page-warning);
    }

    input[type=button]:hover,
    button:hover,
    .link-button:hover {
        background-color: var(--control-highlight);
        text-decoration: none;
    }

    input[type=submit],
    .link-button.primary {
        background-color: var(--page-accent);
        color: var(--page-accent-contrast);
    }

        input[type=submit]:hover,
        .link-button.primary:hover {
            background-color: var(--page-accent-light);
        }

        input[type=submit]:active,
        .link-button.primary:active {
            background-color: var(--page-accent-dark);
        }

        input[type=submit].warning {
            background-color: var(--page-warning);
            border-color: var(--page-warning);
            color: var(--page-warning-contrast);
        }

        input[type=submit].secondary {
            background: none;
            border: none;
            border-radius: 0;
            color: var(--page-accent);
            cursor: pointer;
            display: inline;
            font-family: inherit;
            font-weight: inherit;
            font-size: inherit;
            text-align: inherit;
            padding: 0;
            min-width: 0;
            line-height: inherit;
            transition: color .3s ease-in;
            user-select: text;
        }

            input[type=submit].secondary:hover {
                color: var(--page-accent-light);
                text-decoration: underline;
                transition: color .1s ease-out;
            }

/* Dashboard */
.stream {
    background-color: var(--page-background-secondary);
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    font-family: var(--ui-font);
    font-size: 1rem;
    position: relative;
    margin-top: -.5rem;
}

    .stream p {
        margin: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 25px;
    }

    .stream a,
    .stream a:visited,
    .stream a:hover {
        color: var(--page-text);
        text-decoration: none;
        display: block;
        margin: .5em;
    }

        .stream a:before {
            content: none;
        }

.stream-profile {
    float: left;
    margin-right: .5em;
    height: 3.125em;
}

.stream-title {
    font-weight: 500;
}

.stream-description {
    display: flex;
}

    .stream-description b:not(:last-child)::after {
        margin: 0 .5em;
        content: '//';
        opacity: .4;
        font-weight: 400;
    }

.stream-broadcaster,
.stream-game,
.stream-viewercount,
.stream-uptime {
    font-weight: 400;
}

.stream-tooltip {
    display: none;
    padding: 1em;
    background-color: var(--tooltip-background);
    border: none;
    border-radius: 5px;
    color: var(--tooltip-text);
}

    .stream-tooltip:after {
        right: 100%;
        top: calc(1em + 5px);
        border: solid transparent;
        content: '';
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-right-color: var(--tooltip-background);
        border-width: .75em;
        margin-top: -.75em;
    }

    .stream-tooltip .stream-thumbnail {
        display: block;
        width: 300px;
        height: 169px;
    }

.stream:hover .stream-tooltip,
.stream a:focus-visible + .stream-tooltip {
    display: block;
    position: absolute;
    top: 0;
    right: calc(-300px - 3em);
}

.stream:focus-within {
    background-color: var(--page-background-secondary-light);
    box-shadow: inset 0 0 0 1px var(--page-text);
}

    .stream:focus-within a {
        outline: none;
    }

@media (prefers-color-scheme: light) {
    :root {
        --page-background: #f5f5f5;
        --page-background-secondary: #e5e5e5;
        --page-background-secondary-light: #dddddd;
        --page-border: #0d0d0d;
        --page-text: #262626;
        --page-text-secondary: #818181;
        --page-accent: #ea005e;
        --page-accent-light: #ff5297;
        --page-accent-dark: #b80049;
        --page-accent-contrast: #18181f;
        --page-warning: #fbc02d;
        --page-warning-contrast: #18181f;
        --tooltip-background: black;
        --tooltip-text: white;
        --control-highlight: rgba(0, 0, 0, 0.05);
    }

    strong {
        font-weight: 600;
    }

    html {
        text-shadow: none;
    }
}

@media only screen and (max-width : 1560px) {
    .page-header {
        display: flex;
        flex-wrap: wrap;
        column-gap: 1em;
        row-gap: .5em;
    }

        .page-header .site-title {
            min-width: 200px;
        }

        .page-header .user-info {
            margin-left: auto;
        }
}

@media only screen and (max-width : 1080px) {
    .page-header .site-title {
        min-width: 0;
    }

    .main {
        flex: 1;
        display: flex;
        flex-direction: column;
        column-gap: 0;
        row-gap: 1em;
        margin: 1em 2em;
        max-width: 648px;
        width: auto;
    }

        .main aside {
            padding-left: 0;
        }

            .main aside.optional {
                display: none;
            }

    .page-footer footer {
        margin: 1em 2em;
    }
}

@media only screen and (max-width : 667px) {
    .main {
        margin: 1em;
    }

    .page-footer footer {
        margin: 1em;
    }

    .mobile-only-banner {
        display: block;
        width: 100%;
    }
}