/*
 ____ _     ____  _  ____ _____ _  _____ _      ____ 
/   _Y \ /|/  __\/ \/ ___Y__ __Y \/  __// \  /|/  _ \
|  / | |_|||  \/|| ||    \ / \ | ||  \  | |\ ||| / \|
|  \_| | |||    /| |\___ | | | | ||  /_ | | \||| |-||
\____|_/ \|\_/\_\\_/\____/ \_/ \_/\____\\_/  \|\_/ \|

This page was made by Christie!
*/

* {
    margin: 1vh .4vw;
    padding: 0;
}

body{
    background-color: white;
}

main#canvas{
    background-color: blue;
    width: 67.3vw;
    height: 87.3vh;
}

div{
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

div:hover{
    background-color: blue;
}

section{
    width: 26.75%;
    height: 100%;
    margin: 0 auto 0 3.45vw;
}

section:hover{
    background-color: pink;
}

article#bottom{
    width: 18.8%;
    height: 54.5%;
    margin: 39.72vh 0 0 4.4vw;
    float: left;
}

article#bottom:hover{
    background-color: blue;
}

article#top{
    width: 18.8%;
    height: 45.5%;
    margin: 0 auto;
    float: left;
}

article#top:hover{
    background-color: blue;
}

article.right{
    width: 18.8%;
    height: 12.4%;
    margin: 7vh 0 4vh 3.45vw;
    float: left;
    background-color: #eee7dc;
}

article.right:hover{
    background-color: red;
}

article#right-last{
    width: 18.8%;
    height: 12.4%;
    margin: 7vh 0 0 6.83vw;
    float: left;
}

article#right-last:hover{
    background-color: red;
}

/*css color classes*/
.beige{
    background-color: #efe9dd;
}
.black {
    background-color: #272727;
}