body {
        margin: 1em auto;
        max-width: 65em;
        font-family: sans-serif;
        background: #ffffff;
        color: #333333;
        display: grid;
        gap: .1em;
        grid-template-columns: repeat(5, 1fr);
}

header {
        background: #F1F3F4;
        border-color: #d5d5d5;
        grid-column: 1 / 6;
        grid-row: 1 / 2;
}

nav {
        background: #ffffff;
        border-color: #e7c157;
        grid-column: 1 / 2;
        grid-row: 2 / 3;
}

navi {
        background: #ffffff;
        border-color: #e7c157;
        grid-column: 1 / 2;
        grid-row: 3 / 5;
}

article {
        background: #ffede0;
        border-color: #df6c20;
        grid-column: 2 / 4;
        grid-row: 2 / 4;
}

artic {
        background: #ffede0;
        border-color: #df6c20;
        grid-column: 2 / 4;
        grid-row: 4 / 5;
}

absatz {
        background: #ffede0;
        border-color: #df6c20;
        color: #6a7791;
        font-size: .7em;
        grid-column: 4 / 5;
}

aside {
        background: #ebf5d7;
        border-color: #ebf5d7;
        color: #c64d83;
        grid-column: 5 / 6;
        grid-row: 2 / 4;
}

footer {
        background: #6a7791;
        border-color: #8a9da8;
        font-size: .7em;
        text-align:center;
        grid-column: 1 / 6;
        grid-row: 6 / 7;
}

header,
nav,
navi,
avi,
article,
artic,
absatz,
aside,
footer {
        border-radius: 0em 0em 0em;
        border: thin solid;
        padding: .5em;
        margin: .5em;
}

li {color: #c64d83;}

a { text-decoration: none;}
a:link    {color: #c64d83;}
a:focus   { background-color: red; color: black;}
a:hover   { background-color: #3eb855; color: white; }
a:active  { background-color: yellow; color: black;}