*{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

body{
    background-color:#575A4B;
}

a{
    text-decoration: none;
    font-family: 'Courier New', Courier, monospace;
    color: #CFB9A5;
}

ul{
    text-align: center;
    margin-top: 15px;
}

li{
    display: inline;
    margin: 7px;
}

h1, h2{
    text-align: center;
    font-family: mario;
    color: beige;
}

h1{
    font-size: 4em;
    padding-top: 35px;
}

h2{
    font-size: 2em;
}

main#canvas{
    width: 60vw;
    height: 60vw;
}

main{
    margin-left: auto;
    margin-right: auto;
    padding-top: 2vh;
}

section{
    width: 15vw;
    height: 60vw;
    float: left;
}

article{
    width: 15vw;
    height: 15vw;
}

figure{
    width: 25%;
    height: 100%;
    float: left;
}

figcaption{
    width: 100%;
    height: 25%;
    float: left;
}

/* =--==-=-=-=-=-=- Color Classes =-=-=-=-=-=-=-=- */

.green{
    background-color: #404a40;
}

.yellow{
    background-color: #ebd94b;
}

.pink{
    background-color: #d5607c;
}

.orange{
    background-color: #f1a64a;
}

.dark-blue{
    background-color: #1b325e;
}

.blue{
    background-color: #4b9da9;
}

.purple{
    background-color: #31283b;
}

.pale{
    background-color: #f8e283;
}

/* =-=-=-=-=-=-=-=-=- Hover Color Pseudo-Classes =-=-=-=-=-=-=-=-= */
.green:hover{
    background-color: #f8e283;
}

.yellow:hover{
    background-color: #1b325e;
}

.pink:hover{
    background-color: #31283b;
}

.orange:hover{
    background-color: #4b9da9;
}

.dark-blue:hover{
    background-color: #ebd94b;
}

.blue:hover{
    background-color: #f1a64a;
}

.purple:hover{
    background-color: #d5607c;
}

.pale:hover{
    background-color: #404a40;
}

/* =-=-=-=-=-=-=-=-=-= Fonts =-=-=-=-=-=-=-=-=-=-= */
@font-face {
    font-family: mario;
    src: url(../../../fonts/SuperMario256.ttf)
}