:root {
    --main-content-max-width: 780px;
    --gap: 18px;
    --content-size: 780px;
    --menu-size: 300px;
    --border-radius: 6px;
}

/*
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
 */

html {
    height: 100%;
    color-scheme: var(--color-scheme);
    color: var(--color);
    background-color: var(--background);
}

body {
    margin: 0;
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-areas:
    "header     header      header     header"
    "left       sidemenu    main       right"
    "left       sidemenu    comments   right"
    "left       sidemenu    footer     right"
    "left       bottom      bottom     right";
    grid-template-rows: auto auto 1fr auto 0;
    grid-template-columns: 1fr var(--menu-size) var(--content-size) 1fr;

    font-family: Verdana, Helvetica Neue, Helvetica, Arial, sans-serif;

    gap: var(--gap);
}

.block {
    background-color: var(--blockBackground);
}

.main-header {
    grid-area: header;
    padding-left: 1rem;
    padding-right: 1rem;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main-sidemenu {
    grid-area: sidemenu;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: var(--border-radius);
}

.main-content {
    grid-area: main;
    border-radius: var(--border-radius);
    padding-left: 1rem;
    padding-right: 1rem;
}

.main-comments {
    grid-area: comments;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: var(--border-radius);
}

.main-footer {
    grid-area: footer;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: var(--border-radius);
}

.text-muted {
    color: var(--muted);
}