*{
    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: 50vw;
    height: 73.5vw;
    border: 0.5vw solid #c88b4c;
    margin-top: 2vh;
}

main{
    margin-left: auto;
    margin-right: auto;
}

section{
    width: 50vw;
    height: 3.5vw;
}

/* =-=-=-=-=-=-=-=-= Article Sizes =-=-=-=-=-=-=-==-= */

article#one{
    width: 3vw;
    height: 3.5vw;
    margin-left: auto;
    margin-right: auto;
}

article#two{
    width: 9vw;
    height: 3.5vw;
    margin-left: auto;
    margin-right: auto;
}

article#three{
    width: 16vw;
    height: 3.5vw;
    margin-left: auto;
    margin-right: auto;
}

article#four{
    width: 23vw;
    height: 3.5vw;
    margin-left: auto;
    margin-right: auto;
}

article#five{
    width: 30vw;
    height: 3.5vw;
    margin-left: auto;
    margin-right: auto;
}

article#six{
    width: 37vw;
    height: 3.5vw;
    margin-left: auto;
    margin-right: auto;
}

article#seven{
    width: 43vw;
    height: 3.5vw;
    margin-left: auto;
    margin-right: auto;
}

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

.purple-one{
    background-color: #342776;
}

.purple-two{
    background-color: #392c7a;
}

.purple-three{
    background-color: #4c3d84;
}

.purple-four{
    background-color: #58468a;
}

.purple-five{
    background-color: #5f4e8e;
}

.purple-six{
    background-color: #604f8f;
}

.purple-seven{
    background-color: #7e6aa0;
}

.purple-eight{
    background-color: #927dab;
}

.middle{
    background-color: #465496;
}

.blue-one{
    background-color: #273c81;
}

.blue-two{
    background-color: #264088;
}

.blue-three{
    background-color: #22488d;
}

.blue-four{
    background-color: #235294;
}

.blue-five{
    background-color: #255999;
}

.blue-six{
    background-color: #2e63a3;
}

.blue-seven{
    background-color: #3a70ab;
}

.blue-eight{
    background-color: #477fb8;
}

/* =-=-=-=-=-=-=-=-=- Sections Hover Color Pseudo-Classes =-=-=-=-=-=-=-=-= */

.purple-one:hover{
    background-color: #FAAE7B;
}

.purple-two:hover{
    background-color: #E09A7A;
}

.purple-three:hover{
    background-color: #C68678;
}

.purple-four:hover{
    background-color: #AC7277;
}

.purple-five:hover{
    background-color: #915F75;
}

.purple-six:hover{
    background-color: #774B74;
}

.purple-seven:hover{
    background-color: #5D3772;
}

.purple-eight:hover{
    background-color: #432371;
}

.middle:hover{
    background-color: #AD4A6B;
}

.blue-one:hover{
    background-color: #A8F368;
}

.blue-two:hover{
    background-color: #B6CB66;
}

.blue-three:hover{
    background-color: #B4D167;
}

.blue-four:hover{
    background-color: #CB8C64;
}

.blue-five:hover{
    background-color: #D66A62;
}

.blue-six:hover{
    background-color: #E24861;
}

.blue-seven:hover{
    background-color: #ED255F;
}

.blue-eight:hover{
    background-color: #F9035E;
}

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

.orange-one{
    background-color: #9d3624;
}

.orange-two{
    background-color: #a83927;
}

.orange-three{
    background-color: #b43927;
}

.orange-four{
    background-color: #bf3828;
}

.orange-five{
    background-color: #c93b2a;
}

.orange-six{
    background-color: #cf452a;
}

.orange-seven{
    background-color: #d25031;
}

.pink-one{
    background-color: #ba3741;
}

.pink-two{
    background-color: #ba373d;
}

.pink-three{
    background-color: #c03744;
}

.pink-four{
    background-color: #c5394e;
}

.pink-five{
    background-color: #cb3a54;
}

.pink-six{
    background-color: #ce3964;
}

.pink-seven{
    background-color: #d03a74;
}

/* =-=-=-=-=-=-=-=-=- Article Hover Color Pseudo-Classes =-=-=-=-=-=-=-=-= */

.orange-one:hover{
    background-color: #07F49E;
}

.orange-two:hover{
    background-color: #11CC99;
}

.orange-three:hover{
    background-color: #1BA493;
}

.orange-four:hover{
    background-color: #257C8E;
}

.orange-five:hover{
    background-color: #2E5489;
}

.orange-six:hover{
    background-color: #382C83;
}

.orange-seven:hover{
    background-color: #42047E;
}

.pink-one:hover{
    background-color: #B15B86;
}

.pink-two:hover{
    background-color: #9F4E7D;
}

.pink-three:hover{
    background-color: #8D4274;
}

.pink-four:hover{
    background-color: #7B356B;
}

.pink-five:hover{
    background-color: #682862;
}

.pink-six:hover{
    background-color: #561C59;
}

.pink-seven:hover{
    background-color: #440F50;
}

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