:root {
    --color-bg: #000;
    --color-fg: #222;
    --color-fg-light: #555;
    --color-text: #fff;
    --color-accent: #0f0;
    --color-accent-dark: #050;

    --color-link: #0ff;
    --color-link-visited: #099;
    --color-link-hover: #0cc;
    --color-link-visited-hover: #066;

    font-family: Inconsolata, Consolas, monospace;

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

            &:hover {
                color: var(--color-link-hover);
            }
        }

        &:visited {
            color: var(--color-link);

            &:hover {
                color: var(--color-link-hover);
            }
        }
    }
}

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    width: 100dvw;
    height: 100dvh;
    color: var(--color-text);
    background-color: var(--color-bg);
}

header {
    padding: 1rem;
    border-bottom: 1px solid var(--color-accent);

    .homebutton {
        display: inline-block;
        padding: 0.25rem;
        background-color: var(--color-bg);
        border: 1px solid var(--color-accent);
        border-radius: 10px;
        text-decoration: none;
        box-shadow: 4px 4px var(--color-accent-dark);
        transform: translate(-2px,-2px);
        transition: box-shadow 0.1s, transform 0.1s;
        font-size: xx-large;
        aspect-ratio: 1 / 1;

        &:hover {
            box-shadow: 2px 2px var(--color-accent-dark);
            transform: translate(0,0);
        }
    }

    h1 {
        display: inline;
        margin: 0;
        margin-left: 1rem;
    }
}

main {
    flex: 1;
    padding: 1rem;
    background-color: var(--color-bg);
    font-size: large;

    ul li {
        line-height: 1.75rem;
    }
}

footer {
    padding: 1rem;
    border-top: 1px solid var(--color-accent);
    text-align: center;

    p {
        margin: 0;
    }
}

@font-face {
    font-family: 'Inconsolata';
    src:
        local('Inconsolata'),
        url('/fonts/Inconsolata-Regular.woff2') format('woff2'),
        url('/fonts/Inconsolata-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}