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;
}



article {
        background: #ffffff;
        border-color: #df6c20;
        grid-column: 1 / 6;
        grid-row: 2 / 5;
}


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

header,
article,
footer {
        border-radius: 0em 0em 0em;
        border: thin solid;
        padding: 0em;
        margin: .5em;
}

a { text-decoration: none;}
a:link    {color: #333333;}
a:focus   { background-color: red; color: black;}
a:hover   { background-color: #ebf5d7; color: black; }
a:active  { background-color: yellow; color: black;}