html,
body {
    font-family: "Andale Mono", monospace;

    margin-top: 5vh;
    margin-left: 5vw;
}

@media (prefers-color-scheme: dark) {
    html,
    body {
        background: #1d1d1d;
        color: white
    }

    a {
        color: orange;
    }

    a:visited {
        color: orangered;
    }
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

ul {
    list-style: lower-alpha;
}

#title {
    animation-name: rainbow-title;
    animation-iteration-count: infinite;
    animation-duration: 1.5s;
    animation-direction: alternate;
}

@keyframes rainbow-title {
    0% {
        transform: skewX(3deg);
        text-shadow: 2px 2px 0px red,
            -2px 2px 0px green,
            2px -2px 0px blue;
    }

    50% {
        transform: skewX(5deg);
        text-shadow: 3px 3px 0px red,
            -3px 3px 0px green,
            3px -3px 0px blue;
    }

    100% {
        transform: skewX(10deg);
        text-shadow: -3px -3px 0px red,
            3px -3px 0px green,
            -3px 3px 0px blue;
    }
}

.noselect {
    user-select: none;
}