:root {
    /** The maximum width of the layout area */
    --layout-max-width: 1680px;
    /** The base header height */
    --layout-header-base-height: 70px;
    /** The height of the area under the header */
    --layout-header-under-height: 0px;
    /** The height of the banner area */
    --layout-banner-height: 0px;
    /** The width of the sidebar area */
    --layout-sidebar-width: 0px;
    /** The width of the toolbar area */
    --layout-toolbar-width: 0px;
    /** The height of the panel area */
    --layout-panel-height: 0px;
    /** The height of the cookie area */
    --layout-cookie-height: 0px;

    /** The current width of the body */
    --layout-current-width: min(var(--layout-max-width), 100vw);
    /** The distance from the edge of the screen to edge of the body */
    --layout-current-edge: calc((100vw - var(--layout-current-width)) / 2);

    /** The total height of the header area */
    --layout-header-height: calc(
        var(--layout-header-base-height) + var(--layout-header-under-height)
    );

    /** The top of the body area */
    --layout-body-top: calc(
        var(--layout-header-height) + var(--layout-banner-height)
    );
    /** The bottom of the body area */
    --layout-body-bottom: calc(
        var(--layout-panel-height) + var(--layout-cookie-height)
    );
    /** The minimum height of the body area */
    --layout-min-body-height: calc(
        100vh - var(--layout-body-top) - var(--layout-body-bottom)
    );

    /** The bottom of the site */
    --layout-site-bottom: var(--layout-cookie-height);

    /** The maximum width of the body area */
    --layout-body-max-width: calc(
        var(--layout-max-width) - var(--layout-sidebar-width) -
            var(--layout-toolbar-width)
    );
    /** @deprecated Use var(--layout-body-max-width) */
    --layout-content-max-width: var(--layout-body-max-width);

    /** The maximum width of the panel area */
    --layout-panel-max-width: calc(
        var(--layout-max-width) - var(--layout-sidebar-width)
    );

    /** The sans serif font family */
    --font-family-sans: 'Open Sans', Arial, sans-serif;
    /** The sans serif font styles */
    --font-sans: 400 16px var(--font-family-sans);
    /** The monospace font family */
    --font-family-monospace: 'Source Code Pro', monospace;
    /** The monospace font styles */
    --font-monospace: 400 16px var(--font-family-monospace);
}

body {
    font: var(--font-sans);
    -webkit-font-smoothing: subpixel-antialiased;
    padding: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100vh;
    width: 100%;
    max-width: var(--layout-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns:
        var(--layout-sidebar-width)
        minmax(0, 1fr)
        var(--layout-toolbar-width);
    grid-template-rows:
        var(--layout-header-height) var(--layout-banner-height)
        max-content
        var(--layout-panel-height) var(--layout-cookie-height);
    grid-template-areas:
        'header header header'
        'banner banner banner'
        'sidebar body toolbar'
        'sidebar panel panel'
        'cookie cookie cookie';
}