:root {
    --color-background: 255,255,255;
    --color-contrast: 33,33,33;

    --padding: 20px;
    --running-height: 100px;
    --footer-denom: 1;
}

/* -- Cornerstones -- */

* {
    margin: 0;
    font-family: "Monaco","Consolas",monospace,sans-serif;
    color: rgb(var(--color-contrast));
}

*::selection {
    background-color: rgb(var(--color-contrast));
    color: rgb(var(--color-background));
}

html,
body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

body {
    display: grid;
    grid-template-rows: var(--running-height) 1fr calc(var(--running-height) / var(--footer-denom));
    background-color: rgb(var(--color-background));
    place-items: center;
    justify-items: center;
    font-size: 21px;
}

body > * {
    box-sizing: border-box;
}

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

a {
    display: contents;
}

/* -- Components -- */

main {
    display: flex;
    flex-direction: column;
    gap: var(--padding,30px);
}

.arrow {
    display: inline;
    font-weight: bold;
}

.arrow::after {
    content: " →";
}

footer {
    justify-self: end;
    padding: 0 calc(var(--running-height) / (var(--footer-denom) * 2));
}

footer p:not(:last-child) {
    display: none;
}

/* -- Media Queries -- */

@media (prefers-color-scheme: dark) {
    :root {
        --color-background: 0,0,0;
        --color-contrast: 255,255,255;
    }
}

@media (pointer: fine) {
    a:hover {
        background: rgba(var(--color-contrast),.1);
    }
}

@media print {
    .arrow::after {
        content: ": " attr(href);
    }
}

@media (max-width: 300px) {
    body > * {
        justify-self: center;
        text-align: center;
    }
}

@media (min-aspect-ratio: 14/9) and (min-height: 500px) {
    :root {
        --footer-denom: 2;
    }

    footer {
        width: 100%;
        height: 100%;
        gap: calc(var(--padding) * 1.5);
        font-size: 19px;
        color: rgb(var(--color-background));
        background-color: rgb(var(--color-contrast));
        display: flex;
        align-items: center;
    }

    footer p:not(:last-child) {
        display: initial;
    }

    footer p:last-child {
        margin-left: auto;
    }

    footer p:first-child:last-child {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-aspect-ratio: 14/9) and (min-height: 500px) and (prefers-color-scheme: dark) {
    footer {
        color: rgb(var(--color-contrast));
        background-color: rgba(var(--color-contrast),.15);
    }
}