:root {
    font-family: serif;
}

@media screen {
    body {
        max-width: 920px;
        min-height: 98vh;
        display: flex;
        flex-direction: column;
        margin: auto;
        padding: 0.5rem;
    }
    main {
        flex-grow: 1;
    }
    * :any-link {
        color: inherit;
        text-decoration: underline;
    }
    * :any-link:hover,
    * :any-link:active {
        font-style: italic;
    }
    .topnav {
        background: rgb(139, 0, 0);
        text-decoration: none;
        font-weight: bold;
        color: rgb(255, 255, 255);
        padding: 1rem;
        font-size: 1rem;
    }
    #nav-toogle,
    .topnav a {
        margin-right: 1rem;
        padding-left: 0rem;
        padding-right: 0rem;
    }
    .topnav :any-link,
    .topnav :any-link:hover {
        text-decoration: none;
    }
    @media (max-width: 450px) {
        #nav-toogle,
        .topnav a {
            display: block;
            margin: auto;
            text-align: center;
            padding: 16px;
        }
        .topnav .navlinks {
            display: none;
        }
        .topnav .navlinks.navopen {
            display: block
        }
    }
    .err {
        color: rgb(139, 0, 0);
    }
    @media (prefers-color-scheme: dark) {
         :root {
            background: rgb(0, 0, 0);
            color: rgb(255, 255, 255);
        }
        #menu nav {
            background: rgb(255, 0, 0);
        }
        .err {
            color: rgb(255, 0, 0);
        }
    }
}

@media print {
    header,
    nav,
    footer {
        display: none;
    }
}