html {
    scroll-behavior: smooth;
    font-family: "DejaVu Sans", sans-serif, "Liberation Sans", "Arial";
    text-align: justify;
}

@media screen and (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

p, dt, dd, li {
    font-size: 12pt;
}

@media (min-width: 900px) {
    p, dt, dd, li {
        font-size: 13pt;
    }
}

body {
    background-color: darkgray;
    background-image: url("background1080.webp");
    background-size: cover;
    background-attachment: fixed;
    margin: 0;
}

@media (min-width: 1081px) {
    body {
        background-image: url("background1280.webp")
    }
}

@media (min-width: 1281px) {
    body {
        background-image: url("background1366.webp")
    }
}

@media (min-width: 1367px) {
    body {
        background-image: url("background1440.webp")
    }
}

@media (min-width: 1441px) {
    body {
        background-image: url("background1600.webp")
    }
}

@media (min-width: 1601px) {
    body {
        background-image: url("background1920.webp")
    }
}

@media (min-width: 1921px) {
    body {
        background-image: url("background2560.webp")
    }
}

@media (min-width: 2561px) {
    body {
        background-image: url("background3840.webp")
    }
}

@media (min-width: 900px) {
    body {
        display: flex;
    }
}

article {
    margin: 20px;
    max-width: 90ch;
    scroll-margin-top: calc(12pt + 10px + 40px);
    padding: 2ch;
}

@media (min-width: 900px) {
    article {
        margin: 40px;
        scroll-margin-top: 40px;
        padding: 3ch;
    }
}

article, nav {
    background-color: white;
    border: 5px solid black;
}

nav {
    text-align: center;
    margin: 20px;
    height: 100%;
    padding-left: 6ch;
    padding-right: 6ch;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

@media (min-width: 900px) {
    nav {
        top: 40px;
        margin: 40px;
        margin-right: 0;
        padding: 3ch;
    }
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
}

@media (min-width: 900px) {
    nav ul li {
        display: list-item;
    }
}

@media (prefers-color-scheme: dark) {
    a {
        color: cornflowerblue;
    }
    article, nav {
        background-color: black;
        border: 5px solid white;
        color: white;
    }
}