.page-root {
    background-color: #EEE;
    color: var(--app-color-slate-5);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.page-root #body {
    flex-grow: 1;
    -ms-flex-align: start;
}
.page-root.preview {
    background-color: var(--app-color-almond-7);
}
.dark.page-root {
    background-color: var(--app-color-slate-4);
    color: var(--app-color-almond-6);
}
.panel {
    display: inline-block;
    width: 100%;
    border-radius: var(--app-distance-025);
    background-color: var(--app-color-almond-6);
    color: var(--app-color-slate-5);
}
.dark .panel {
    background-color: var(--app-color-slate-45);
    color: var(--app-color-almond-6);
}

#header {
    position: sticky;
    top: 0;
    align-self: flex-start;
    width: 100%;
}

#body {
    display: grid;
    column-gap: var(--app-distance-100);
    grid-template-columns: auto minmax(280px, 320px) minmax(600px, 1080px) minmax(280px, 320px) auto;
}

.wide-page #body {
    display: grid;
    column-gap: var(--app-distance-100);
    grid-template-columns: auto minmax(20px, 120px) minmax(600px, 1080px) minmax(80px, 120px) auto;
}

#footer {
    background: var(--app-color-slate-6);
    color: var(--app-color-almond-5);
    font-size: var(--app-distance-075);
    line-height: var(--app-distance-075);
    text-align: right;
    padding: var(--app-distance-050);
    margin-top: var(--app-distance-100);
}
#right-rail,
#left-rail {
    position: sticky;
    top: 76px;
    align-self: flex-start;
}
#main {
    margin-bottom: var(--app-distance-100);
}
#top-bar {
    grid-column: 2 / span 3;
    grid-row: 1 / span 1;
}
#left-rail {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
}
#main {
    grid-column: 3 / span 1;
    grid-row: 1 / span 1;
}
#right-rail {
    grid-column: 4 / span 1;
}