.page *
{
    color: var(--accentColorShade1);
    scroll-behavior: smooth;
}

.page nav
{
    background-color: var(--accentColorShade1);
}
.page nav *
{
    color: var(--backgroundColor);
    font-weight: bold;
}
.page nav a:hover
{
    text-decoration: none;
}

.page .main
{
    border-color: var(--accentColorShade1);
    border-style: ridge;
}

.page .divider
{
    background-color: var(--accentColorShade1);
    border-color: var(--accentColorShade1);
    border-style: solid;
}

/* Desktop layout */
@media (min-width: 768px)
{
    .page
    {
        display: grid;
        grid-template-columns: var(--desktopPanelExpandedThumbnailWidth) calc(100% - var(--desktopPanelExpandedThumbnailWidth));
        height: 100%;
        overflow: hidden;
    }

    .page nav
    {
        width: var(--desktopPanelExpandedThumbnailWidth);
        display: flex;
        flex-direction: column;
        padding: 10px;
        margin-top: var(--desktopPanelExpandedThumbnailHeight);
    }
    .page nav li
    {
        margin-bottom: 5px;
    }

    .page .main
    {
        border-width: 4px;
        overflow-y: scroll;
        padding: 0px 30px;
        display: flex;
        gap: 10px;
        flex-direction: column;
        align-items: center;
    }
    .page .main > img
    {
        width: 100%;
    }
    .page .main > p,
    .page .main > img
    {
        max-width: var(--targetParagraphWidth);
    }

    .page .flex-column-content
    {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        max-width: var(--targetParagraphWidth);
        gap: 20px;
        justify-content: center;
    }

    .page .divider
    {
        border-width: 2px;
        width: 100%;
        border-radius: 2px;
        max-width: var(--targetParagraphWidth);
    }

    .page .video
    {
        width: 100%;
        max-width: var(--targetParagraphWidth);
        min-height: 39.375ch;
    }

    .page ol
    {
        padding-inline-start: 25px;
    }
}

/* Mobile layout */
@media (max-width: 767px)
{
    /*
    .page body
    {
        display: grid;
        grid-template-rows: var(--mobilePanelCollapsedThumbnailHeight) 100px auto;
        overflow: hidden;
    }
    */

    .page nav
    {
        display: flex;
        flex-direction: column;
        padding: 10px;
    }
    .page nav li
    {
        margin-bottom: 5px;
    }

    .page .main
    {
        border-width: 4px;
        overflow-y: scroll;
        padding: 0px 30px;
        display: flex;
        gap: 10px;
        flex-direction: column;
        align-items: center;
    }
    .page .main > img
    {
        width: 100%;
    }
    .page .main > p,
    .page .main > img
    {
        max-width: var(--targetParagraphWidth);
    }

    .page .flex-column-content
    {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        max-width: var(--targetParagraphWidth);
        gap: 20px;
        justify-content: center;
    }

    .page .divider
    {
        border-width: 2px;
        width: 100%;
        border-radius: 2px;
        max-width: var(--targetParagraphWidth);
    }

    .page .video
    {
        width: 100%;
        max-width: var(--targetParagraphWidth);
        min-height: 39.375ch;
    }

    .page ol
    {
        padding-inline-start: 25px;
    }
}