html {
            scroll-behavior: smooth;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            /* Layout */
            max-width: 1600px;
            margin: 0 auto;
            padding: 20px;
            display: flex;
            gap: 30px;
            padding-bottom: 8em;

            /* Colors */
            background: rgb(240, 240, 240);
            color: rgb(52, 52, 52);

            /* Font */
            font-family: sans-serif;
            line-height: 1.6;
        }

        /* Text Styles */
        h1, h2, h3, h4 {
            margin: 30px 0 15px 0;
        }

        h2 {
            text-align: center;
        }

        h4 {
            text-decoration: underline;
        }

        p {
            margin: 1.2em 0;
            line-height: 1.4;
        }

        figure {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1em;
        }

        figcaption {
            font-style: italic;
            font-size: smaller;
            display: block;
            margin-top: 15px;
            width: 100%;
            text-align: center;
            max-width: 90%;
            margin: 0 auto;
            margin-bottom: 15px;
        }

        img.centered {
            display: block;
            margin: 1em auto;
        }

        ul,
        ol {
            padding-left: 2em;
        }

        /* Side Navigation */
        .nav {
            width: 200px;
            padding: 20px 0;
            height: fit-content;
            flex-shrink: 0;
            position: sticky;
            top: 20px;
        }

        .nav ul {
            list-style: none;
            padding: 0;
        }
        .nav ul > ul {
            padding-left: 1.5em;
        }

        .nav li {
            padding: 5px 0;
        }

        .nav a {
            color: inherit;
            text-decoration: underline;
            display: block;
        }

        .nav a:hover {
            text-decoration: none;
        }

        /* Container for Page Content */
        .page-content {
            flex: 1;
            padding-right: 200px;
        }

        /* Narrow-Width Windows/Phones */
        @media (max-width: 1500px) {
            body {
                flex-direction: column;
                gap: 20px;
            }

            .page-content {
                padding: 0;
                position: static;
            }

            img {
                max-width: 90%;
                object-fit: contain;
            }

            .nav {
                position: static;
            }
        }

        /* Dark Style */
        @media (prefers-color-scheme: dark) {
            body {
                background: rgb(64, 64, 64);
                color: rgb(234, 234, 234);
            }
        }