/* Variables */

:root {
    --background: antiquewhite;
}

@font-face {
    font-family: 'Monoton';
    src: url(/assets/fonts/monoton.ttf) format("truetype");
}

/* Layout */

* {
    box-sizing: border-box;
}

/* Base Styling */

body {
    padding-top: 2em;
    padding-bottom: 2em;
    background-color: var(--background);
    font-family: monospace;
    font-size: 1.7em;
}

article {
    max-width: 1000px;
    margin: auto;
    padding: 1.2em;
    border-width: 0.25em;
    border-style: dashed double;
}

/* Typography */

h1 {
    font-family: 'Monoton';
    font-size: 2em;
}

/* Elements */

img {
    max-width: 100%;
}

footer::before {
    content: '';
    display: block;
    width: 100%;
    max-width: 100%;
    height: 5em;
    aspect-ratio: 16 / 9;
    background-image: url('/assets/imgs/lightfooter.jpg');
    background-size: cover;
    background-position: center;
    margin-bottom: 1em;
}

/* External Links */

a[rel="noopener"]:not(:has(img))::after {
    content: url('/assets/imgs/lightexternal.svg');
    display: inline;
    width: 0.8em;
    height: 0.8em;
    margin-left: 0.25em;
    vertical-align: middle;
}

/* Dark Mode */

@media (prefers-color-scheme: dark) {

    /* Variables */
    :root {
        --background: #1a1a1a;
        --text-color: #e0e0e0;
        --border-color: #4a4a4a;
        --link-color: #7eb3ff;
    }

    body {
        background-color: var(--background);
        color: var(--text-color);
    }

    footer::before {
        background-image: url('/assets/imgs/darkfooter.png');
    }

    article {
        border-color: var(--border-color);
    }

    a {
        color: var(--link-color);
    }

    a[rel="noopener"]:not(:has(img))::after {
        content: url('/assets/imgs/darkexternal.svg');
    }

    h1, h2, h3, h4, h5, h6 {
        color: var(--text-color);
    }

    img {
        opacity: 0.9;
    }
}