body.small-clever-rooms {
    margin-left: auto;
    margin-right: auto;
    font-size: 14px;
    font-family:
        Optima,
        Candara,
        "Linux Biolinum",
        "Libertinus Sans",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Cantarell,
        "Helvetica Neue",
        Helvetica,
        Ubuntu,
        Roboto,
        "Oxygen-Sans",
        Noto,
        Arial,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol";
    font-weight: var(--font-weight);
    max-width: 1400px;
    counter-reset: sidenote-counter;
    color: var(--color-body);
    background-color: var(--color-body-bg);
    letter-spacing: 0.5px;
}

.small-clever-rooms {
    /* Navigation */

    .sitename {
        border-bottom: none;
    }

    .navigation {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    .navigation h1 {
        font-size: 1.8rem;
        flex-shrink: 1;
        border-bottom: none;
        color: var(--color-active);
    }

    .navigation-list {
        text-align: center;
        padding-left: 0px;
        margin-top: -5px;
        font-size: 1.2rem;
    }

    .navigation li {
        list-style-image: none;
        list-style-type: none;
        display: inline-block;
        margin-left: 1rem;
    }

    .navigation li.active {
        color: var(--color-hover);
    }

    .navigation a {
        color: var(--color-active);
    }

    .navigation a:hover {
        color: var(--color-hover);
    }

    /* Header font */

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    subtitle {
        font-family:
            Baskerville,
            Constantia,
            Georgia,
            "Droid Serif",
            "Times New Roman",
            "Source Serif Pro",
            serif,
            "Apple Color Emoji",
            "Segoe UI Emoji",
            "Segoe UI Symbol";
        font-style: inherit;
        line-height: 1.4;
    }

    /* move padding from article to main */
    main {
        position: relative;
        padding: 5rem 0rem;
    }

    article {
        padding: 0rem; 
    }

    h1 {
        font-size: 2.2rem;
    }

    h2 {
        margin-top: 2.1rem;
        margin-bottom: 0;
        font-size: 1.8rem;
    }

    h3 {
        font-size: 1.5rem;
        margin-bottom: 0;
    }

    main p,
    main ol,
    main ul,
    main dl {
        font-size: 1.2rem;
    }

    blockquote {
        border-left: var(--line-weight) solid var(--color-desc);
        padding-left: 1em;
        font-size: 1.2rem; 
    }

    /* The default x-height for code is slightly too large in side notes */
    .marginnote code, .sidenote code { font-size: 0.9rem; }

    .marginnote img { margin-bottom: 1ex; }

    .sidenote,
    .marginnote {
        margin-bottom: 1em;
        font-size: 1.0rem;
        line-height: 1.6;
    }

    .sidenote-number:after,
    .sidenote:before {
        font-family: inherit;
        content: counter(sidenote-counter) " ";
        color: var(--color-highlight);
    }

    .sidenote-number:after {
        font-size: 0.9rem;
    }

    a {
        color: var(--color-active);
        text-decoration: none;
        border-bottom: var(--line-weight) solid var(--color-active);
        padding-bottom: 1px;
    }

    a:hover,
    a:active {
        color: var(--color-hover);
    }

    a:link {
        text-decoration: none;
        background: none;
        background-size: none;
        background-repeat: none;
        text-shadow: none;
    }

    a:link::selection,
    a:link::-moz-selection {
        text-shadow: none;
        background: none;
    }

    main>footer {
        display: block;
        margin-top: 30px;
        border-top: solid var(--line-weight) var(--color-body);
        color: var(--color-desc);
        line-height: 2rem;
    }

    main>footer p {
        font-size: 1rem;
    }
}

@media (min-width: 761px) {
    .small-clever-rooms {
        /* tufte base applies width only to <section> */
        nav,
        main>footer,
        .content
        {
            width: 55%;
        }
    }
}

@media (max-width: 760px) {
    .small-clever-rooms {
        /* reduce padding on mobile */
        main {
            position: relative;
            padding: 2rem 0rem;
        }
    }
}