/*Grid Layout Rules*/

/*Main Rules*/
main{
    display: grid;
    grid-template-areas: "box1 box1" "box2 box3" "box4 box4";
    grid-template-columns: auto auto;
    grid-gap: 1%;
}

main h1:first-child{
    grid-area: box1;
}

main section:nth-child(2){
    grid-area: box2;
}

main section:nth-child(3){
    grid-area: box3;
}

main section:nth-child(4){
    grid-area: box4;
}

/*Nav Rules*/
nav{
    display: grid;
    grid-template-areas: "auto auto auto auto";
    grid-gap: 1%; 
}

/*Index Rules*/
.index main{
    grid-template-areas: "box1 box2" "box3 box2" "box4 box2" "box5 box5";
}

.index main h1:first-child{
    grid-area: box1;
}

.index main figure:nth-child(2){
    grid-area: box2;
}

.index main section:nth-child(3){
    grid-area: box3;
}

.index main section:nth-child(4){
    grid-area: box4;
}

.index main section:nth-child(5){
    grid-area: box5;
}

/*About Rules*/
.about main{
    grid-template-areas: 
        "box1 box1"
        "box2 box3" 
        "box4 box5"
        "box6 box7";
}

.about main h1:first-child{
    grid-area: box1;
}

.about main section:nth-child(2){
    grid-area: box2;
}

.about main figure:nth-child(3){
    grid-area: box3;
}

.about main section:nth-child(4){
    grid-area: box4;
}

.about main figure:nth-child(5){
    grid-area: box5;
}

.about main section:nth-child(6){
    grid-area: box6;
}

.about main figure:nth-child(7){
    grid-area: box7;
}

/*Gallery Rules*/
.gallery main{
    grid-template-areas: 
        "box1 box1 box1" 
        "title1 title1 title1" 
        "squirrel1 squirrel2 squirrel3" 
        "deer1 deer2 deer3" 
        "title2 title2 title2"
        "robin humming1 humming2"
        "finch hawk bluejay" 
        "title3 title3 title3"
        "reflection moon sunset"
        "link link link";
    padding-bottom: 20%;
}

.gallery main h1:first-child{
    grid-area: box1;
}

.gallery main section:nth-child(2){
    grid-area: title1;
}

.gallery main figure:nth-child(3){
    grid-area: squirrel1;
}
.gallery main figure:nth-child(4){
    grid-area: squirrel2;
}
.gallery main figure:nth-child(5){
    grid-area: squirrel3;
}

.gallery main figure:nth-child(6){
    grid-area: deer1;
}
.gallery main figure:nth-child(7){
    grid-area: deer2;
}
.gallery main figure:nth-child(8){
    grid-area: deer3;
}

.gallery main section:nth-child(9){
    grid-area: title2;
}

.gallery main figure:nth-child(10){
    grid-area: robin;
}
.gallery main figure:nth-child(11){
    grid-area: humming1;
}
.gallery main figure:nth-child(12){
    grid-area: humming2;
}

.gallery main figure:nth-child(13){
    grid-area: finch;
}
.gallery main figure:nth-child(14){
    grid-area: hawk;
}
.gallery main figure:nth-child(15){
    grid-area: bluejay;
}

.gallery main section:nth-child(16){
    grid-area: title3;
}

.gallery main figure:nth-child(17){
    grid-area: reflection;
}
.gallery main figure:nth-child(18){
    grid-area: moon;
}
.gallery main figure:nth-child(19){
    grid-area: sunset;
}

.gallery main section:nth-child(20){
    grid-area: link;
}

/*Publications Rules*/
.publication main{
    grid-template-areas: 
        "box1 box1" 
        "box2 box3" 
        "box4 box5" 
        "box6 box7" 
        "box8 box9"
        "box10 box10";
    padding-bottom: 10%;
}

.publication main h1:first-child{
    grid-area: box1;
}

.publication main section:nth-child(2){
    grid-area: box2;
}

.publication main figure:nth-child(3){
    grid-area: box3;
}

.publication main section:nth-child(4){
    grid-area: box4;
}

.publication main figure:nth-child(5){
    grid-area: box5;
}

.publication main section:nth-child(6){
    grid-area: box6;
}

.publication main figure:nth-child(7){
    grid-area: box7;
}

.publication main section:nth-child(8){
    grid-area: box8;
}

.publication main figure:nth-child(9){
    grid-area: box9;
}

.publication main section:nth-child(10){
    grid-area: box10;
}

.publication img{
    max-width: 50%;
}

/*Form Rules*/
.form main{
    grid-template-areas: "box1 box2" "box3 box2" "box4 box4";
}

.form main h1:first-child{
    grid-area: box1;
}

.form main figure:nth-child(2){
    grid-area: box2;
}

.form main section:nth-child(3){
    grid-area: box3;
}

.form main section:nth-child(4){
    grid-area: box4;
}