.a {
    display: grid;
    width: 800px;
    grid-gap: 2px;
    border: solid black 2px;
    background-color: black;
    grid-template-columns: 200px auto 200px;
    grid-template-areas:
        'h h ac'
        's a ac'
        'f f f';
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

header {
    background-color: lightcoral;
    text-align: center;
    font-size: 50px;
    padding: 10px;
    grid-area: h;
}

article {
    background-color: white;
    padding: 10px;
    grid-area: a;
}

section.c {
    background-color: greenyellow;
    grid-area: s;
    display: flex;
    justify-content: center;
}

section div {
    display: flex;
    flex-direction: column;
    background-color: white;
    border: solid black 2px;
    height: 180px;
    width: 180px;
    text-align: left;
    margin: 10px;
    text-align: center;
    a:hover{
        background-color: lime;
    }
    a {
        display: flex;
        background-color: gray;
        border: solid black 1px;
        margin: 10px;
        margin-right: 10px;
        margin-top: 0px;
        margin-bottom: 0px;
        width: 160px;
        height: 30px;
        align-items: center;
        justify-content: center ;
        color: black;
        text-decoration: none;
    }
}

#röd{
    background-color: red;
    text-decoration: underline red;
}

aside.c {
    display: flex;
    flex-direction: column;
    background-color: yellow;
    grid-area: ac;
    align-items: center;
    text-align: center;
    font-size: 20px;
}

aside div {
    width: 125px;
    height: 50px;
    background-color: white;
    border: solid red 2px;
    text-align: center;
    margin: 10px;
    font-size: medium;
    padding: 5px;
}

nav {
    background-color: lightgray;
}

footer {
    background-color: gray;
    grid-area: f;
    text-align: center;
}

footer b {
    font-size: 50px;
}

img {
    border: solid black 2px;
    width: 200px;
    height: 150px;
}