:root {
    background-color: #000;
    color: #fff;
}

html {
    display: flex;
    flex-direction: column;
    align-items: center;

    background:
        repeating-linear-gradient( 30deg,
        #6444, #6442 10%,
        #6448 10%, #6442 20%
        ) fixed,
        #000;

    animation:
        1.75s 0.25s backwards ease-out background-in,
        0.15s 2s forwards alternate 4 linear twoblink;
}

@keyframes background-in {
    0% {
        filter: brightness(0);
    } 100% {
        filter: brightness(1);
    }
}

@keyframes twoblink {
    0% {
        filter: brightness(1.0);
    } 100% {
        filter: brightness(0.9);
    }
}

body {
    margin-top: 2em;
    backdrop-filter: brightness(0);
}

body > main {
    min-width: 20ch;
    max-width: 80ch;

    border: 1px solid #fff;
    padding: 0px 1ch;

    background:
        linear-gradient( to bottom,
        #6448 10%, #6447 10%,
        #6447 20%, #6446 20%,
        #6446 30%, #6445 30%,
        #6444 40%, #6443 40%,
        #6443 50%, #6442 50%,
        #6442 60%, #6441 60%,
        #6441 70%, #0000 70%
        ) scroll;
}

h1 {
    text-decoration: 2px dashed underline;
}

nav {
    list-style: inside;

    li::marker {
        font-family: "Source Code Pro", "Noto Sans Mono", monospace;
        content: "> ";
    }
}

a {
    color: #fcc;
}

#daypiece, #timepiece {
    font-family: "Source Code Pro", "Noto Sans Mono", monospace;

    &::before {
        content: "> ";
    }
}