/* Body tag creates layout grid, and assigns margins */
body{
    width: 1100px;
    height: auto;
    border: 4px solid darkgrey;
    border-radius: 20px;
    display: grid;
    grid-template-areas: 
    "header header"
    "thumb1 caption"
    "thumb2 mainpic"
    "thumb3 mainpic"
    "thumb4 mainpic"
    "thumb5 mainpic"
    "thumb6 mainpic"
    "footer footer";
    grid-template-columns: 30% 70%;
    grid-template-rows: 100px 125px 200px 200px 200px 200px 200px 100px;
    margin-left: auto;
    margin-right: auto;
}
/*Created colored header/footer with rounded off corners following border. */
.header{
    grid-area: header;
    background-color: cadetblue;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.header h3{
    grid-area: header;
    font-size: 2.25em;
    justify-self: center;
}
#thumb1{
    justify-self: center;
    align-self: center;
}
#thumb2{
    grid-area: thumb2;
    justify-self: center;
    align-self: center;
}
#thumb3{
    grid-area: thumb3;
    justify-self: center;
    align-self: center;
}
#thumb4{
    grid-area: thumb4;
    justify-self: center;
    align-self: center;
}
#thumb5{
    grid-area: thumb5;
    justify-self: center;
    align-self: center;
}
#thumb6{
    grid-area: thumb6;
    justify-self: center;
    align-self: center;
}
#mainpic{
    grid-area: mainpic;
    justify-self: center;
    align-self: center;
    height: 1000px;
}
#caption{
    grid-area: caption;
    justify-self: center;
    align-self: center;
    font-size: xx-large;
}
.footer{
    grid-area: footer;
    background-color: cadetblue;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.footer h3{
    justify-self: center;
    font-size: 2em;
}