#z {
    display: grid;
    grid-template-areas: 
        "a a a a"
        "b b b b"
        "c d e f"
        "c d e f"
        "c d e f"
        "g g g g";
    /* sets up the size of the rows*/
    grid-template-rows: 18vmax 18vmax 18vmax 18vmax 18vmax;

    /* sets up the size of the columns */
    grid-template-columns: 16vmax 16vmax 16vmax 16vmax;

    margin-left: 20%;
    margin-right: 20%;

    column-gap: 1px;
    row-gap: 1px;
}

#a {
    display: flex;
    grid-area: a;
    text-align: center;
    align-items: center;
    justify-content: center;
    height: 5vmax;
    background-color:black;
    color: white;
    margin-top: 20%;
    font-family: bitcount ink;
    
}

#b {
    grid-area: b;
    background-color:black;
    color: white;
    font-family: sofia;
    
}

#c {
    grid-area: c;
    background-color:black;
    color: white;
    font-family: sofia;
}

#d {
    grid-area: d;
    background-color:black;
    color: white;
    font-family: sofia;
}

#e {
    grid-area: e;
    background-color:black;
    color: white;
    font-family: sofia;
}

#f {
    grid-area: f;
    background-color:black;
    color: white;
    font-family: sofia;
}

#g {
    display: flex;
    grid-area: g;
    width: 100%;
    height: auto;
    display: block;
    height: 5vmax;
    background-color:black;
    color: white;
    justify-content: center;
    font-family: sofia;
}

#h {
    grid-area: h;
    background-color:black;
    color: white;
    font-family: sofia;
}

#z > *{
border: 1px solid black;
}
h1 {
    display: flex;
    justify-content: center;
}
body {
  background-image: url("Images/diver.jpg");

}