html {
    font-size:16px;

    --color-bg-body:hsl(226, 26%, 8%);
    --color-link:#3ee;
}

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

h1, h2, h3, h4 {
    all:unset;
    display:block;
    color:#ddd;
    line-height:1.25em;
    margin:0.625em 0;
    font-weight:700;
}

h1 {font-size:1.75em;}
h2 {font-size:1.5em}
h3 {font-size:1.25em}
h4 {font-size:1em}

body {
    margin:auto;
    background-color:var(--color-bg-body);
    color:#ddd;
    /*max-width:64em;*/
    max-width:1044px;
    min-height:100vh;
    font-family: "Intel One Mono", monospace;
    font-optical-sizing: auto;
    display:grid;
    grid-template-rows:max-content 1fr max-content;

    & > header {
        position:sticky; top:0;
        background-color:var(--color-bg-body);

        display:grid;
        grid-template-columns:1fr max-content;
        align-items:start;
        margin:0 0.5rem;
        padding:1.25em 0.25em;
        box-sizing:border-box;
        border-bottom:1px solid hsl(226, 18%, 40%);

        & > a {
            justify-self:start;
            font-weight:700;
            text-decoration:none;

            &:first-child {
                color:white;
                display:grid;
                grid-auto-flow:column;
                grid-auto-columns:max-content;
                grid-gap:0.75rem;
                align-items:center;
                font-size:1.375em;
                white-space:nowrap;
            }

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

    }

    & > :is(main, article) {
        box-sizing:border-box;
        overflow:hidden;
        padding:0.625rem;
    }

    & > footer {
        background-color:var(--color-bg-body);
        margin:0 0.5rem;
        padding:0.625em 0.25em;
        box-sizing:border-box;
        border-top:1px solid hsl(226, 18%, 40%);
        text-align:right;

        & > a {
            text-decoration:none;
        }
    }
}

@media all and (min-width: 736px) {
    body > footer {
        position:sticky; bottom:0;
    }
}