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

body{
    background-color: rgb(235, 246, 246);
    padding-top: 35px;
}

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

h1{
    font-family: superkindly;
    color: rgb(8, 51, 145);
    font-size: 40px;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 20px;
}

a{
    text-decoration: none;
    font-family: superkindly;
    color: rgba(4, 40, 124, 0.745);
}

ul{
    text-align: center;
}

h1{
    text-align: center;
    font-family: superkindly;
    color: rgb(135, 166, 243);
}

h2{
    text-align: center;
    font-family: superkindly;
    color: rgb(135, 166, 243);
}

h1{
    font-size: 4em;
}

h2{
    font-size: 2em;
}

main#canvas{
    width: 60vw;
    height: 80vw;
    border: 0.5vw solid #cc6633; 
    margin-top: 4vh;
}

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

section{
    width: 60vw;
    height: 3.81vw;
}

/* =-=-=-=-=-=- article sizes =-=-=-=-=-=-= */

article#one{
width: 10vw;
height: 3.81vw;
margin-left: auto;
margin-right: auto;
}

article#two{
width: 15vw;
height: 3.81vw;
margin-left: auto;
margin-right: auto;
}

article#three{
width: 20vw;
height: 3.81vw;
margin-left: auto;
margin-right: auto;
}

article#four{
width: 25vw;
height: 3.81vw;
margin-left: auto;
margin-right: auto;
}

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

article#six{
width: 35vw;
height: 3.81vw;
margin-left: auto;
margin-right: auto;
}

article#seven{
width: 40vw;
height: 3.81vw;
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;
}

/* =-=-=-=-=-=- 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;
}

/* =-=-=-=-=-=- hover color classes =-=-=-=-=-=-= */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.orange-one:hover{
    background-color: #003cff;
}

.orange-two:hover{
    background-color: #006eff;
}

.orange-three:hover{
    background-color: #3b61ea;
}

.orange-four:hover{
    background-color: #3b7ddf;
}

.orange-five:hover{
    background-color: #6fb7ff;
}

.orange-six:hover{
    background-color: #7eafff;
}

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

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

.pink-two:hover{
    background-color: #18a284;
}

.pink-three:hover{
    background-color: #3da28c;
}

.pink-four:hover{
    background-color: #18a284;
}

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

.pink-six:hover{
    background-color: #67ffde;
}

.pink-seven:hover{
    background-color: #18a284;
}



@font-face {
    font-family: playful swollen;
    src: url(../../../Fonts/Playful\ Swollen.otf);
}

@font-face {
    font-family: superkindly;
    src: url(../../../Fonts/Super\ Kindly.ttf);
}