* {
    margin: 0;
    padding: 0;
    background-color: rgb(252, 252, 252);
}

header#canvas {
    width: 45vw;
    height: 38.3vw;

}

section.yellow {
    display: inline-block;
    width: 65.8%;
    height: 48.5%;
    margin-top: 5%;
    margin-left: 16.5%;
}

figure.black {
    display: inline-block;
    width: 75.4%;
    height: 80.4%;
    margin-top: 12.4%;
    margin-left: 12%;
}

figcaption.crimson {
    display: inline-block;
    width: 65.5%;
    height: 48%;
    margin-left: 17%; 
    margin-top: 17.5%;
}

figcaption.yellow {
    display: inline-block;
    width: 94.6%;
    height: 16%;
    margin-left: 2.7%;
    margin-top: 2.1%;
}

section.red
{
    width: 65.8%;
    height: 38.6%;
    margin-left: 16.5%;
}

figure.orange {
    display: inline-block;
    width: 62%;
    height: 50%;
    margin-left: 18.8%; 
    margin-top: 12.8%;
}

figcaption.blue {
    display: inline-block;
    width: 96%;
    height: 17%;
    margin-left: 2%;
    margin-top: 1.2%;
}

/*css color classes */

.grey {
    background-color: rgb(224, 224, 224);
}

.yellow {
    background-color: yellow;
  
}

.black {
    background-color: black;
}

.red {
    background-color: rgb(168, 18, 18);
}

.orange {
background-color: rgb(248, 166, 58);
}

.blue {
    background-color: rgb(72, 96, 175);
}

.crimson {
    background-color: rgb(220, 20, 20);
}

/*css color hover */

.grey:hover {
    background-color: rgb(82, 202, 78);
}

.yellow:hover {
    background-color: rgb(236, 35, 176);
  
}

.black:hover {
    background-color: rgb(255, 255, 255);
}

.red:hover {
    background-color: rgb(78, 179, 219);
}

.orange:hover {
background-color: rgb(195, 56, 250);
}

.blue:hover {
    background-color: rgb(253, 237, 92);
}

.crimson:hover {
    background-color: rgb(122, 250, 83);
}