:root {
    --bgColour: snow;
    --barColour: seashell;
    --shoutOutColour: darkseagreen;
    --mildShoutColour: olivedrab;
    --linkBG: cadetblue;
    --linkColour: lightgray;
    --textColour: olive;
}

* {
    padding: 0;
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 103%;
    color: var( --textColour );
}


h1 {
    font-Size: 2.5em;
    color: var( --shoutOutColour );
}
h2, h3 {
    font-size: 1.875em;
    color: var( --mildShoutColour );
}
h4, h5, h6 {
    font-size: 1.5em;
}
/*fill these out to h6 */

p {
    font-size: .9em;
}

.containerBox {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 150px 1fr 60px;

    text-align: center;
    width: 100vw;
    height: 100vh;
}

.boxHeader {
    grid-column: 1 / 4;
    grid-row: 1;
    background-color: var( --barColour  );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.boxFooter {
    grid-column: 1 / 4;
    grid-row: 3;
    background-color: var( --barColour );
    padding-top: 20px;
}

.boxBody {
    grid-column: 1 / 4;
    grid-row: 2;
    word-wrap: break-word;
}

.galleryFrame {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}
.splitFrame {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.linkBoxBack {
    background-color: var( --linkBG );
}

/* Sets color, font, line for the links in the header*/
a.menuLink:link, a.menuLink:visited, a.menuLink:hover, a.menuLink:active {
    color: var( --linkColour);
    text-decoration: none;
}

/* For example nest the polContainer in the polaroid div, after the image source*/
.polaroid {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba( 0, 0, 0, 0.19);
    text-align: center;
}
.polContainer{
    padding: 10px;
}