* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
}

#grid-container-menu {
    width: 100%;
    display: grid;
    grid-template-areas:
        'head head'
        'menu menu'
        'left right'
        'foot foot';
    grid-template-columns: 1fr 4fr;
}

#grid-container {
    width: 100%;
    display: grid;
    grid-template-areas:
        'head'
        'menu'
        'right'
        'foot';
    grid-template-columns: 1fr;
}

header {
    grid-area: head;
    text-align: center;
    max-height: 10rem;
    background-color: #775f46;
}

header>img {
    max-height: 10rem;
    max-width: 100%;
    height: auto;
}

nav {
    grid-area: menu;
}

nav ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #9f9488;
}

nav li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 1rem 1rem;
    text-decoration: none;
    min-width: auto;
}

nav li a:hover {
    background-color: gray;
}

aside {
    grid-area: left;
    background-color: #c3bbb3;
}

aside ul {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #c3bbb3;
    color: black;
}

aside li {
    display: inline-block;
    margin: 0;
}

aside li a {
    display: block;
    color: black;
    text-decoration: none;
    text-align: center;
    padding: 0.5rem 2rem;
}

aside li.menu-item a.active {
    background-color: #9f9488;
    text-decoration: underline;
}

aside li.menu-item a:hover:not(.active) {
    background-color: gray;
    text-decoration: underline;
}

.menu-section {
    text-decoration: underline;
    font-weight: bold;
    font-size: 1.5rem;
    background-color: #746c64;
}

.menu-section a {
    cursor: auto;
    padding: 0.5rem 1rem;
}

article {
    grid-area: right;
    background-color: #8f8980;
    text-align: center;
}

article p {
    font-size: 1.5rem;
}

form {
    display: inline-block;
    padding: 1rem 5rem;
    margin-bottom: 1rem;
    border-radius: 1rem;
    background-color: #c3bbb3;
}

label {
    display: block;
}

textarea {
    display: block;
    margin: auto;
    height: 40vh;
    width: 50vw;
}

input[type=submit] {
    display: inline-block;
    margin: auto;
}

footer {
    grid-area: foot;
    background-color: #9f9488;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
    font-weight: bold;
}

@media screen and (max-width: 800px) {
    #grid-container-menu {
        width: auto;
        display: grid;
        grid-template-areas:
            'head'
            'menu'
            'left'
            'right'
            'foot';
        grid-template-columns: auto;
    }
}