*{
    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;
}

/* =-==-=-=-=-=-=-=- Law of Rocks =-=-=-=-=-=-=-=-=- */

main#canvas{
    width: 68.4vw;
    height: 45.5vw;
}

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

section#law-of-rocks{
    width: 11.4vw;
    height: 100%;
    float: left;
}

article#law-of-rocks{
    width: 60%;
    height: 80%;
    margin-top: 41%;
    margin-left: 20%;
    float: left;
}

figure#law-of-rocks{
    width: 18%;
    height: 97%;
    margin-top: 8%;
    margin-left: 5.5%;
    float: left;
}

/* =-=-=-=-=-=-=-=-= Abstruse Character First Layer =-=-=-=-=-=-=-= */

main#square{
    width: 70vw;
    height: 59vw;
}

section#margin{
    width: 70vw;
    height: 3vw;
    float: inline-end;
}

section#bottom{
    width: 70vw;
    height: 3vw;
    float: inline-end;
}

section#bottom-two{
    width: 70vw;
    height: 3vw;
    float: inline-end;
}

section#tall{
    width: 30vw;
    height: 47vw;
    margin-top: 3vw;
    float: left;
}

section#med{
    width: 34vw;
    height: 35vw;
    margin-top: 15vw;
    margin-left: 3vw;
    float: left;
}

/* =-=-=-=-=-=-=-=-= Abstruse Character Second Layer =-=-=-=-=-=-=-= */

article#wide{
    width: 44vw;
    height: 20vw;
    float: right;
    margin-right: 6vw;
    margin-top: 6vw;
}

article#med{
    width: 30vw;
    height: 31vw;
    float: right;
    margin-top: 4vw;
}

article#tall{
    width: 22vw;
    height: 43vw;
    margin-top: 4vw;
    margin-left: 4vw;
    float: top;
}

article#wider{
    width: 52vw;
    height: 20vw;
    float: right;
    margin-right: 6vw;
    margin-top: 1vw;
}

/* =-=-=-=-=-=-=-=-= Abstruse Character Third Layer =-=-=-=-=-=-=-= */

figure#med{
    width: 30vw;
    height: 24vw;
    float: left;
    margin-top: 4vw;
    margin-left: 4vw;
}

figure#wide{
    width: 36vw;
    height: 12vw;
    margin: 4vw;
}

figure#wider{
    width: 44vw;
    height: 12vw;
    margin: 4vw;
}

/* =-=-=-=-=-=-=-=-= Abstruse Character Fourth Layer =-=-=-=-=-=-=-= */
figcaption#med{
    width: 27vw;
    height: 21vw;
    margin-top: 3vw;
    margin-left: 3vw;
}

figcaption#wide{
    width: 35vw;
    height: 2.375vw;
    margin-top: 0.5vw;
    margin-left: 0.5vw;
    float: left;
}

figcaption#wider{
    width: 43vw;
    height: 2.375vw;
    margin-top: 0.5vw;
    margin-left: 0.5vw;
    float: left;
}

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

.periwinkle{
    background-color: #C6CAED;
}

.rose-quartz{
    background-color: #ADA8BE;
}

.mountbatten{
    background-color: #A28497;
}

.wenge{
    background-color: #6F5E5C;
}

.cool-gray{
    background-color: #7A82AB;
}

.myrtle-green{
    background-color: #307473;
}

.pink{
    background-color: #DE6980;
}

.blue-gray{
    background-color: #89bcbc;
}

.green{
    background-color: #6bab4c;
}

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

.red{
    background-color: #dd3c38;
}

.purple{
    background-color: #76496e;
}

.orange{
    background-color: #e27538;
}

.yellow{
    background-color: #cedb50;
}

/* =-=-=-=-=-=-=-=-=-= Hover Color Pseudo-Class =-=-=-=-=-=-=-=-=-=-= */

.periwinkle:hover{
    background-color: #ADA8BE;
}

.rose-quartz:hover{
    background-color: #6F5E5C;
}

.mountbatten:hover{
    background-color: #7A82AB;
}

.wenge:hover{
    background-color: #307473;
}

.cool-gray:hover{
    background-color: #C6CAED;
}

.myrtle-green:hover{
    background-color: #A28497;
}

.pink:hover{
    background-color: #307473;
}

.blue-gray:hover{
    background-color: #A28497;
}

.green:hover{
    background-color: #ADA8BE;
}

.blue:hover{
    background-color: #6F5E5C;
}

.red:hover{
    background-color: #7A82AB;
}

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

.orange:hover{
    background-color: #89bcbc;
}

.yellow:hover{
    background-color: #E8CCBF;
}


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