:root {
    --header-height: 4rem;
    --sidebar-width: 10rem;
}

main {
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

#header {
    height: var(--header-height);
    width: 100%;
    border: var(--border-style);
    border-top: var(--border-style-thick);
    border-radius: var(--border-radius);
    padding: 1rem;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#sidebar {
    flex: 0 0 var(--sidebar-width);
    /* Set the background color so the rollover sidebar is opaque. */
    background-color: var(--background-color);
    height: calc(100dvh - var(--header-height));
    overflow: auto;
    padding: 1rem;
    position: relative;
    /* Allow the browser to handle vertical scrolling in the sidebar. */
    touch-action: pan-y;
    transition: left 500ms;
    width: var(--sidebar-width);
    border: var(--border-style);
    border-radius: var(--border-radius);
    /* The rollover sidebar should always be on top of the page's contents. */
    z-index: 100;
}
.sidebar-hiding {
    left: calc(-1 * var(--sidebar-width));
    @starting-style {
        left: 0px;
    }
}
.sidebar-showing {
    left: 0px;
}

#content {
    flex: 1 1 auto;
    overflow: auto;
    padding: 1rem;
    transition: margin-left 500ms;
    height: calc(100dvh - var(--header-height));
    border: var(--border-style);
    border-radius: var(--border-radius);
}
.content-full-width {
    margin-left: calc(-1 * var(--sidebar-width));
}
.content-with-sidebar {
    margin-left: 0px;
}