@import url(reset.css);

body {
    background-color: aqua;
}

.mainArea {
    display: grid;
    background-color: white;
    height: 100vh;
    width: 80vw;
    margin-right: auto;
    margin-left: auto;
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}

#header {
    background-color: white;
    grid-column: 3 span;
    grid-row: 1 span;
}

#song {
    background-color: gray;
    grid-column: 1;
    grid-row: 2 ;
}

#zac {
    background-color: darkgray;
    grid-column: 2;
    grid-row: 2;
}
#bob {
    background-color: lightgray;
    grid-column: 3;
    grid-row: 2;
}
#movies {
    background-color: darkgray;
    grid-column: 1;
    grid-row-start: 3;
    grid-row-end: 5;
}
#loc {
    background-color: gray;
    grid-column-start: 2;
    grid-column-end: 4;
}
#rugby {
    background-color: lightgray;
    grid-column: 1;
    grid-row-start: 5;
    grid-row-end: 6;
}
#poem {
    background-color: white;
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 4;
    grid-row-end: 6;
}
img {
    width: 100%;
}
p, ol, figcaption{
    padding: 1.5%
}
h1 {
    font-size: 300%;
    text-align: center;
}