/* _ _ _ _ _ _ _ _ 
  | | | | | | | | |
   \_/|___|___|\_/ */
   body {
    background-color:blanchedalmond;
    text-align: center;
}
h1 {
    font-size:50pt;
    font-family:'Lucida Sans', 'Lucida Sans Regular';
    color:rgb(96, 52, 20);
}
h2 {
  font-family:'Lucida Sans', 'Lucida Sans Regular';
  color:rgb(131, 76, 36);
}
ul {
    list-style-type: none;
}
li {
    display: inline;
}
    li a:link {
        text-decoration: none; 
    }
    li a:hover {
        background-color:gold;
    }
    li a:active {
        background-color:gold;
        color:rgb(131, 76, 36);
    }
.current-page {
    background-color:rgb(131, 76, 36);
    color:white;
}
#nav {
    font-size:20pt
}

header#canvas {
    width: 50vw;
    height: 50vw;
    margin: 5vw auto 0 auto;
}

section,article,figcaption {
    float: left;
}
article#row-one {
    width: 27.5%;
    height: 100%;
}
    section.red {
        width: 100%;
        height: 64%;
        float: none;
    }
        figure#section-red {
            display: inline-block;
            margin: 28% 21%;
            width: 58%;
            height: 76%;
        }
            figcaption#red-section {
                margin-top: 6%;
                margin-left: 5%;
                width: 18.5%;
                height: 96%;
            }
    section.cyan {
        width: 231.81%;
        height: 36.05%;
    }
        figure.purple {
            margin:10.5% 13.2%;
            width: 73.5%;
            height: 63%;
        }
            figcaption.orange {
                margin-top: 2.5%;
                margin-left: 2.5%;
                width: 21.9%;
                height: 90%;
            }
    section.yellow {
        width: 44.65%;
        height: 36.1%;
    }
        figure.black {
            margin: 14% 17%;
            width: 67.5%;
            height: 65%;
        }
            figcaption.blue {
                margin-top: 4%;
                margin-left: 4%;
                width: 20%;
                height: 90%;
            }
    section.blue {
        width: 27.85%;
        height: 36.1%;
    }
        figure.red {
            margin: 25% 20%;
            width: 62%;
            height: 61%;
        }
            figcaption.white {
                margin-top: 6%;
                margin-left: 5.5%;
                width: 18%;
                height: 92%;
            }
 article#row-two {
    width: 72.5%;
    height: 27.9%;
}   
    section.orange {
        width: 50%;
        height: 100%;
    }
        figure.green {
            margin: 17% 18.5%;
            width: 64%;
            height: 56%;
        }
            figcaption.yellow {
                margin-top: 3%;
                margin-left: 3%;
                width: 21%;
                height: 91%;
            }
    section.black {
        width: 50%;
        height: 229.1%;
    }
        figure.yellow {
            margin: 24.5% 19.5%;
            width: 61.5%;
            height: 72.8%;
        }
            figcaption.red {
                margin-top: 5%;
                margin-left: 5.5%;
                width: 18%;
                height: 95%;
            }

    
/* CSS COLOR CLASSES */

.red {
    background-color: red;
}
    .red:hover {
        background-color: pink;
    }
.pink {
    background-color: pink;
}
    .pink:hover {
        background-color: red;
    }
.orange {
    background-color: orange;
}
    .orange:hover {
        background-color: yellow;
    }
.yellow {
    background-color: yellow;
}
    .yellow:hover {
        background-color: orange;
    }
.green {
    background-color: limegreen;
}
    .green:hover {
        background-color: cyan;
    }
.cyan {
    background-color: cyan;
}
    .cyan:hover {
        background-color: limegreen;
    }
.purple {
    background-color: purple;
}
    .purple:hover {
        background-color: blue;
    }
.blue {
    background-color: blue;
}
    .blue:hover {
        background-color: purple;
    }
.black {
    background-color: black;
}
    .black:hover {
        background-color: white;
    }
.white {
    background-color: white;
}
    .white:hover {
        background-color: black;
    }