/* _ _ _ _ _ _ _ _ 
  | | | | | | | | |
   \_/|___|___|\_/ */
* {
    margin: 0;
    padding: 0;
}

body {
    background-color:blanchedalmond;
    text-align: center;
}
h1 {
    font-size:50pt;
    font-family:'Lucida Sans', 'Lucida Sans Regular';
    color:rgb(96, 52, 20);
    margin-top:45px;
    margin-bottom:45px;
}
h2 {
  font-family:'Lucida Sans', 'Lucida Sans Regular';
  color:rgb(131, 76, 36);
  margin:20px;
}
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: 60vw;
    height: 40vw;
    margin: 5vw auto 0 auto;
}

    section {
        width: 16.6666666%;
        height: 100%;
        float: left;
    }

        article {
            width: 60%;
            height: 80%;
            margin-left: 20%;
            margin-top: 40%;
        }

            figure {
                width: 15%;
                height: 97.5%;
                float: left;
                margin-left: 8%;
                margin-top: 6%;
            }

    /* CSS NAMES COLOR CLASSES */

    .red {
        background-color: tomato;
    }
        .red:hover {
            background-color: peachpuff;
        }
    .pink {
        background-color: peachpuff;
    }
        .pink:hover {
            background-color: tomato;
        }
    .orange {
        background-color: orange;
    }
        .orange:hover {
            background-color: yellow;
        }
    .yellow {
        background-color:yellow;
    }
        .yellow:hover {
            background-color: orange;
        }
    .green {
        background-color: darkcyan;
    }
        .green:hover {
            background-color: limegreen;
        }
    .limegreen {
        background-color: limegreen;
    }
        .limegreen:hover {
            background-color: darkcyan;
        }
    .cyan {
        background-color: powderblue;
    }
        .cyan:hover {
            background-color: blue;
        }
    .blue {
        background-color: blue;
    }
        .blue:hover {
            background-color: powderblue;
        }
    .purple {
        background-color: darkorchid;
    }
        .purple:hover {
            background-color: black;
        }
    .black {
        background-color: black;
    }
        .black:hover {
            background-color: darkorchid;
        }