/* -=-=-=-=-=-=--=-===-=-=CSS RESET=-=-=-=-=-=-=-===-=-=-=-*/

* {
    margin: 0;
    padding: 0;
}

h1, h2{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 17px;
    color: #000000;
    text-align: center;
    padding-top: 25px;
}

ul {
    text-align: center;

}

ul li{
    display: inline-block;
}

ul li a{
    text-decoration: none;
    font-family: cdlight;
    font-size: 15px;
    display: inline-block;
    color: black;
    display: inline-block;
    margin: 5px;
    margin-bottom: 10px;
    margin-top: 10px;
}

/* -===-=-=-=-==-=-=-==CANVAS=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/

main#canvas {
    width: 33.75vw;
    height: 46.875vw;
}

/* -===-=-=-=-==-=-=-==HTML5 SEMANTIC TAGS=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/

section {
    width: 100%;
    height: 4.7619%;
    float: none;
   
}

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

.article1{
    width: 6.66666667%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.article2{
    width: 20%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.article3{
    width: 33.3333333%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.article4{
    width: 46.66666667%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.article5{
    width: 60%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.article6{
    width: 73.3333333%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.article7{
    width: 86.66666667%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* =-=-=-=-=-=-=COLOR CLASSES=--=-=-=-==-=--=-=-=-=-=-*/


.purple0{
    background-color: #2d1d6d;
}

.purple1{
    background-color: #362679;
}

.purple2{
    background-color: #473881;
}

.purple3{
    background-color: #564488;
}

.purple4{
    background-color: #604f8d;
}

.purple5{
    background-color: #685793;
}

.purple6{
    background-color: #7e6a9f;
}

.purple7{
    background-color: #907dab;
}

.purpleblue{
    background-color: #475496;
}

.blue0{
    background-color: #2b61a1;
}

.blue1{
    background-color: #3b70ac;
}

.blue2{
    background-color: #457db6;
}

.blue3{
    background-color: #255999;
}

.blue4{
    background-color: #235094;
}

.blue5{
    background-color: #22488d;
}

.blue6{
    background-color: #254087;
}

.blue7{
    background-color: #2a3984;
}

.red0{
    background-color: #aa2b1a;
}

.red1{
    background-color: #b62a1b;
}

.red2{
    background-color: #c3291d;
}

.red3{
    background-color: #ce2619;
}

.red4{
    background-color: #d62416;
}

.red5{
    background-color: #e03517;
}

.red6{
    background-color: #e34321;
}

.red7{
    background-color: #e55c3a;
}

.pink0{
    background-color: #cd233d;
}

.pink1{
    background-color: #cb2636;
}

.pink2{
    background-color: #d0243e;
}

.pink3{
    background-color: #d9264e;
}

.pink4{
    background-color: #db2450;
}

.pink5{
    background-color: #e02365;
}

.pink6{
    background-color: #e22275;
}

/* =-=-=-=-=-=-=HOVER COLOR CLASSES=--=-=-=-==-=--=-=-=-=-=-*/


.purple0:hover{
    background-color: #000000;
}

.purple1:hover{
    background-color: #000000;
}

.purple2:hover{
    background-color: #000000;
}

.purple3:hover{
    background-color: #000000;
}

.purple4:hover{
    background-color: #000000;
}

.purple5:hover{
    background-color: #000000;
}

.purple6:hover{
    background-color: #000000;
}

.purple7:hover{
    background-color: #000000;
}

.purpleblue:hover{
    background-color: #000000;
}

.blue0:hover{
    background-color: #000000;
}

.blue1:hover{
    background-color: #000000;
}

.blue2:hover{
    background-color: #000000;
}

.blue3:hover{
    background-color: #000000;
}

.blue4:hover{
    background-color: #000000;
}

.blue5:hover{
    background-color: #000000;
}

.blue6:hover{
    background-color: #000000;
}

.blue7:hover{
    background-color: #000000;
}

.red0:hover{
    background-color: #ffffff;
}

.red1:hover{
    background-color: #ffffff;
}

.red2:hover{
    background-color: #ffffff;
}

.red3:hover{
    background-color: #ffffff;
}

.red4:hover{
    background-color: #ffffff;
}

.red5:hover{
    background-color: #ffffff;
}

.red6:hover{
    background-color: #ffffff;
}

.red7:hover{
    background-color: #ffffff;
}

.pink0:hover{
    background-color: #ffffff;
}

.pink1:hover{
    background-color: #ffffff;
}

.pink2:hover{
    background-color: #ffffff;
}

.pink3:hover{
    background-color: #ffffff;
}

.pink4:hover{
    background-color: #ffffff;
}

.pink5:hover{
    background-color: #ffffff;
}

.pink6:hover{
    background-color: #ffffff;
}