.header {
    grid-area: header; 
    font-weight: bold;
    font-size: xx-large;
    color: white;
    background-color: rgb(70, 70, 70);
    padding: 20px;
    text-align: center;
}
.sh0 {
    grid-area: sh0;
    background-color: darkgray;
    padding: 10px;
    font-size: large;
    font-weight: bold;
}
.jpg {
    grid-area: jpg;
    background-color: rgb(230, 230, 230);
}
.gif {
    grid-area: gif;
    background-color: rgb(230, 230, 230);
}
.png {
    grid-area: png;
    background-color: rgb(230, 230, 230);
}
.sh1 {
    Grid-area: sh1;
    background-color: darkgray;
    padding: 10px;
    font-size: large;
    font-weight: bold;
}
.wmf {
    grid-area: wmf;
    background-color: rgb(230, 230, 230);
}
.svg {
    grid-area: svg; 
    background-color: rgb(230, 230, 230);
}
.footer {
    grid-area: footer;
    background-color: rgb(70, 70, 70);
    color: white;
    padding: 30px;
    text-align: center;
}
#big {
    font-size: xx-large;
}

.grid-container {
    display: grid;
    grid-template-areas: 
        'header header header header header header'
        'sh0 sh0 sh0 sh0 sh0 sh0'
        'jpg jpg gif gif png png'
        'sh1 sh1 sh1 sh1 sh1 sh1'
        'wmf wmf wmf svg svg svg'
        'footer footer footer footer footer footer';
}

.grid-container > div {
    padding: 10px;
}

.grid-container > div {
    border: 1px solid black;
    font-family: Arial, Helvetica, sans-serif;
}