* {
    margin: 0;
    padding: 0;
}

body{
    text-align: center;
}

header#canvas {
    width: 40.4vw;
    height:28.5vw;
    background-color:rgb(236, 236, 236); 
    margin: 2vw auto 0 auto;
    
}

section {
    width:85.5%;
    height:87.5%;
    float: left;
    margin-top:4.5%;
    margin-left:7.2%;
}

article#one{
    width: 100%;
    height: 10%;
    margin-top: 11%;

}
article#two{
    width: 100%;
    height: 9.8%;
    margin-top: 6.8%;   
}

article#three{
    width: 100%;
    height: 9.8%;
    margin-top: 33%;   
}

figure {
    width: 10%;
    height:100%;
    float: left;
    
}

/* CSS NAMED COLOR CLASSES */

.yellow {
    background-color: rgb(235, 200, 6);
}
   

.red {
    background-color: rgb(196, 7, 7);
}
    .red:hover {
        border-radius: 50%;
        background-color: rgb(251, 255, 0);
    }    
.limegreen {
    background-color: rgb(43, 177, 43);
}
    .limegreen:hover {
        border-radius: 50%;
        background-color: lime;
    }    
    
.blue {
    background-color: rgb(23, 105, 212);
}
    .blue:hover {
        border-radius: 50%;
        background-color: white;
    }    

.orange {
    background-color: rgb(250, 139, 12);
}
    .orange:hover {
        border-radius: 50%;
        background-color: red;
    }    
.lightblue {
    background-color:rgb(167, 189, 197);
}
    .lightblue:hover {
        border-radius: 50%;
        background-color: yellow;
    }    
.pink {
    background-color: rgb(224, 144, 157);
}
    .pink:hover {
        border-radius: 50%;
        background-color: rgb(255, 15, 255);
    }    
.purple {
    background-color: purple;
}
    .purple:hover {
        border-radius: 50%;
        background: hotpink;
    }    
.black {
    background-color: black;
}
    .black:hover {
        background-color: rgb(9, 245, 253);
        border-radius: 50%;
    }    

/* CSS WIDTH CLASSES */

.sizeone {
    width: 1%;
}
.sizetwo {
    width: 1.88%;
}
.sizethree {
    width: 3.8%;
}
.sizefour {
    width: 6%;
}
.sizefive {
    width: 8.3%;
}
.sizesix {
    width: 14.3%;
}
.sizeseven {
    width: 16.888%;
}
.sizeeight {
    width: 31.5%;
}
.sizenine {
    width: 25%;
}

.sizeten {
    width: 56.8%;
}

/* CSS MARGIN CLASSES */

.marginzero{
    margin-left: 0.6%;
}
.marginone {
    margin-left: 1.1%;
}
.margintwo {
    margin-left: 2.4%;
}
.marginfour {
    margin-left: 6%;
}
.marginfive {
    margin-left: 5%;
}
.marginsix {
    margin-left: 9.9%;
}

.marginend{
    margin-left:5.7%;
    margin-right:0.1%;   
}

.marginenda{
    margin-left:10.1%;
    margin-right:0.1%;    
}

.marginendb{
    margin-left:18.1%;
    margin-right:0.1%;    
}

h3{
    font-size:50px;
    font-family: 'Courier New', Courier, monospace;
    float: center;
  
}
    h3:hover{
        font-size: 70pt;
    }