style.css

/* Basic page style resets */
html,
body {
    margin: 0;
    border: 0;
    min-height: 100% !important;
    height: 100%;
    overflow: hidden;
}

*,
*:after,
*:before {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

/*https://codepen.io/cjimmy/pen/RwVmgGR?editors=1100*/
/*https://yoksel.github.io/url-encoder/*/
.noise_004 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
}

.noise_00 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
    background-blend-mode: color;
    background-color: #f8f8f8;
}

.noise_02 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
}

.noise_03 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
    background-blend-mode: hard-light;
    background-color: #BBB;
}

.noise_04 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode */
    /*  */
    background-blend-mode: luminosity;
    /*
background-blend-mode: luminosity;
background-blend-mode: screen;
background-blend-mode: multiply;
background-blend-mode: hard-light;
background-blend-mode: difference;
*/
    background-color: #DDD;
}

.noise_09 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.09' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
}

.noise_19 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.19' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
    background-blend-mode: multiply;
    background-color: #FFF;
}

.noise_29 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.29' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
}

.linear_background_1 {
    background: linear-gradient(-45deg,
            hsla(110, 90%, 20%, 0.1),
            hsla(310, 90%, 20%, 0.1));
}

body {
    background-color: #999;

    display: grid;
    row-gap: 0.2em;
    column-gap: 0.3em;
    padding: 0.2em;
    font-family: Geneva, Verdana, Tahoma, Arial, Helvetica, sans-serif;

    header,
    footer,
    nav,
    main,
    aside {
        box-shadow: inset 0 0 9px #0005;
        border-radius: 0.4em;
        padding: 0.3em;
    }
}

body {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto 1fr auto auto;

    header {
        grid-column: 1 / span 3;
        grid-row: 1;
    }

    .nav-menu {
        grid-column: 1 / span 3;
        grid-row: 2;
    }

    .aside-left {
        grid-column: 1;
        grid-row: 3;
    }

    .aside-right {
        grid-column: 3;
        grid-row: 3;
    }

    footer {
        grid-column: 1 / span 3;
        grid-row: 5;
    }
}

@media screen and (max-width: 800px) {
    body {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto 1fr 1fr auto;

        header {
            grid-column: 1;
            grid-row: 1;
        }

        .nav-menu {
            grid-column: 2;
            grid-row: 1;
        }

        .aside-left {
            grid-column: 1;
            grid-row: 2;
        }

        main {
            grid-row: span 2;
        }

        .aside-right {
            grid-column: 1;
            grid-row: 3;
        }

        footer {
            grid-column: 1 / span 2;
            grid-row: 5;
        }
    }
}

@media screen and (max-width: 370px) {
    body {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto 1fr auto auto;

        header {
            grid-column: 1;
            grid-row: 1;
        }

        .nav-menu {
            grid-column: 1;
            grid-row: 2;
        }

        .aside-left {
            grid-column: 1;
            grid-row: 3;
        }

        main {
            grid-row: 4;
        }

        .aside-right {
            grid-column: 1;
            grid-row: 5;
        }

        footer {
            grid-column: 1;
            grid-row: 6;
        }
    }
}

@media (hover: hover) {

    header:hover,
    footer:hover,
    nav:hover,
    main:hover,
    aside:hover {
        box-shadow: inset 0 0 9px #0007;
        transition-duration: 0.5s;
    }
}

.block-main {
    height: 100%;
}

.aside-left {
    padding: 0.5em;
    word-break: break-word;
    /*на будущее*/
}

.aside-right {
    padding: 0.5em;
    overflow: auto;

    a {
        background-color: #FFFF;
        color: darkblue;
        text-decoration: none;
    }
}

.nav-menu {
    /*background-color: hsl(270, 34%, 85%);*/
    background-color: #0004;
}

.block-title {
    font-size: 19px;
    background: linear-gradient(hsla(270, 90%, 20%, 0.2),
            hsla(100, 90%, 20%, 0.2));
}