header#canvas {
    margin-top: 8vh;
    width: 65vw;
    height: 120vw;
    margin-left: auto;
    margin-right: auto;
    position: static;
}

h1 {
    text-align: center;
    font-size: 2vw;
    text-decoration: none;
    color: black;
}
.red {
    width: 25%;
    height: 40%;
    background-color: #ff1b76;
    float: left;
}
.red_md {
    width: 60%;
    height: 70%;
    float: left;
    margin: 30% 25% 25% 19%;
    background-color: red;
}

.yellow_sm {
    background-color: #fffc00;
    width: 20%;
    height: 97%;
    margin-left: 4%;
    margin-right: 0%;
    margin-bottom: 5%;
    margin-top: 5%;
    float: left;
}

.yellow {
    width: 50%;
    height: 20%;
    background-color: #fffc00;
    float: left;
}
.black_md {
    width: 60%;
    height: 70%;
    float: left;
    margin: 7% auto auto 19%;
    background-color: black;
}
.blue_sm {
    background-color: #0d0483;
    width: 21%;
    height: 93%;
    margin-left: 3%;
    margin-right: 0%;
    margin-bottom: 5%;
    margin-top: 3%;
    float: left;
}
.blue {
    width: 25%;
    height: 20%;
    background-color: #1b20ff;
    float: left;
}
.pink_md {
    width: 60%;
    height: 70%;
    float: left;
    margin: 15% auto auto 19%;
    background-color: #ff1b76;
}
.white_sm {
    background-color: white;
    width: 20%;
    height: 95%;
    margin-left: 4%;
    margin-right: 0%;
    margin-bottom: 5%;
    margin-top: 3%;
    float: left;
}
.orange {
    width: 40%;
    height: 20%;
    background-color: #ffb11b;
    float: left;
    margin-right:0px;
}
.green_md {
    width: 60%;
    height: 70%;
    float: left;
    margin: 10% auto auto 19%;
    background-color: #079500;
}
.yellow_sm2 {
    background-color: #fffc00;
    width: 20%;
    height: 94%;
    margin-left: 4%;
    margin-right: 0%;
    margin-bottom: 5%;
    margin-top: 3%;
    float: left;
}
.dark_grey {
    width: 35%;
    height: 40%;
    background-color: #3c3c3c;
    float: right;
}
.yellow_md {
    width: 60%;
    height: 70%;
    float: left;
    margin: 20% auto auto 19%;
    background-color: #fffc00;
}
.pink_sm {
    background-color: #ff1b76;
    width: 20%;
    height: 97%;
    margin-left: 4%;
    margin-right: 0%;
    margin-bottom: 5%;
    margin-top: 3%;
    float: left;
}

.grey {
    width: 65%;
    height: 20%;
    background-color: #cecece;
    float: left;
}
.blue_md {
    width: 60%;
    height: 70%;
    float: left;
    margin: 10% auto auto 19%;
    background-color: #1b20ff;
}
.orange_sm {
    background-color: #ffb11b;
    width: 20%;
    height: 90%;
    margin-left: 4%;
    margin-right: 0%;
    margin-bottom: 5%;
    margin-top: 4%;
    float: left;
}

.orange_sm:hover {
    background-color: white;
}

.pink_sm:hover {
    background-color: green;
}

.yellow_sm2:hover {
    background-color: hotpink;
}
.white_sm:hover {
    background-color: black;
}

.blue_sm:hover {
    background-color: grey;
}

.yellow_sm:hover {
    background-color: blue;
}

.red:hover {
    background-color: green;
}

.blue:hover {
    background-color: hotpink;
}

.yellow:hover {
    background-color: lightgrey;
}

.orange:hover { 
    background-color: red;
}

.dark_grey:hover {
    background-color: white;
}

.grey:hover {
    background-color: black;
}

.red_md:hover {
    background-color: white;
}

.black_md:hover {
    background-color: green;
}

.pink_md:hover {
    background-color: yellow;
}

.green_md:hover {
    background-color: purple;
}

.blue_md:hover {
    background-color: grey;
}

.yellow_md:hover {
    background-color: orange;
}