*{
    margin: 0;
    padding: 0;

}

h1, h2{
    text-align:center;
    font-family: verdana;
}

h1{
    font-size: 3em;
}

h2{
    font-size:1em
}

/*=-=-=-=-=-MAIN CANVAS-=-=-=-=-=-=-=*/

main#canvas{
    width: 800px;
    height: 400px;
    margin: 2vh auto;
}

/*=-=-=-=-=-ROW ONE-=-=-=-=-=-=-=*/
div#one{
    width: 131.5px;
    height: 400px;
    float: left;
}
article#one{
    width: 131.5px;
    height: 131.5px;
}
section#one{
    width: 131.5px;
    height: 24.93px;
}
figure#one{
    width: 131.5px;
    height: 43.57px;
}
figcaption#one{
    width: 131.5px;
    height: 44.96px;
}
h1#one{
    width: 131.5px;
    height: 21.78px;
}
h2#one{
    width: 131.5px;
    height: 133.25px;
}
/*=-=-=-=-=-=-ROW TWO=-=-=-=-=-=-=-=*/
div#two{
    width: 22.93px;
    height: 400px;
    float: left;
}
article#two{
    width: 22.93px;
    height: 131.5px;
}
section#two{
    width: 22.93px;
    height: 24.93px;
}
figure#two{
    width: 22.93px;
    height: 43.57px;
}
figcaption#two{
    width: 22.93px;
    height: 44.96px;
}
h1#two{
    width: 22.93px;
    height: 21.78px;
}
h2#two{
    width: 22.93px;
    height: 133.25px;
}
/*=-=-=-=-=-=-ROW THREE=-=-=-=-=-=-=-=*/
div#three{
    width: 44.43px;
    height: 400px;
    float: left;
}
article#three{
    width: 44.43px;
    height: 131.5px;
}
section#three{
    width: 44.43px;
    height: 24.93px;
}
figure#three{
    width: 44.43px;
    height: 43.57px;
}
figcaption#three{
    width: 44.43px;
    height: 44.96px;
}
h1#three{
    width: 44.43px;
    height: 21.78px;
}
h2#three{
    width: 44.43px;
    height: 133.25px;
}
/*=-=-=-=-=-=-ROW FOUR=-=-=-=-=-=-=-=*/
div#four{
    width: 67.78px;
    height: 400px;
    float: left;
}
article#four{
    width: 67.78px;
    height: 131.5px;
}
section#four{
    width: 67.78px;
    height: 24.93px;
}
figure#four{
    width: 67.78px;
    height: 43.57px;
}
figcaption#four{
    width: 67.78px;
    height: 44.96px;
}
h1#four{
    width: 67.78px;
    height: 21.78px;
}
h2#four{
    width: 67.78px;
    height: 133.25px;
}
/*=-=-=-=-=-=-ROW FIVE=-=-=-=-=-=-=-=*/
div#five{
    width: 133.36px;
    height: 400px;
    float: left;
}
article#five{
    width: 133.36px;
    height: 131.5px;
}
section#five{
    width: 133.36px;
    height: 24.93px;
}
figure#five{
    width: 133.36px;
    height: 43.57px;
}
figcaption#five{
    width: 133.36px;
    height: 44.96px;
}
h1#five{
    width: 133.36px;
    height: 21.78px;
}
h2#five{
    width: 133.36px;
    height: 133.25px;
}
/*=-=-=-=-=-=-ROW SIX=-=-=-=-=-=-=-=*/
div#six{
    width: 133.36px;
    height: 400px;
    float: left;
}
article#six{
    width: 133.36px;
    height: 131.5px;
}
section#six{
    width: 133.36px;
    height: 24.93px;
}
figure#six{
    width: 133.36px;
    height: 43.57px;
}
figcaption#six{
    width: 133.36px;
    height: 44.96px;
}
h1#six{
    width: 133.36px;
    height: 21.78px;
}
h2#six{
    width: 133.36px;
    height: 133.25px;
}
/*=-=-=-=-=-=-ROW SEVEN=-=-=-=-=-=-=-=*/
div#seven{
    width: 67.78px;
    height: 400px;
    float: left;
}
article#seven{
    width: 67.78px;
    height: 131.5px;
}
section#seven{
    width: 67.78px;
    height: 24.93px;
}
figure#seven{
    width: 67.78px;
    height: 43.57px;
}
figcaption#seven{
    width: 67.78px;
    height: 44.96px;
}
h1#seven{
    width: 67.78px;
    height: 21.78px;
}
h2#seven{
    width: 67.78px;
    height: 133.25px;
}
/*=-=-=-=-=-=-ROW EIGHT=-=-=-=-=-=-=-=*/
div#eight{
    width: 44.43px;
    height: 400px;
    float: left;
}
article#eight{
    width: 44.43px;
    height: 131.5px;
}
section#eight{
    width: 44.43px;
    height: 24.93px;
}
figure#eight{
    width: 44.43px;
    height: 43.57px;
}
figcaption#eight{
    width: 44.43px;
    height: 44.96px;
}
h1#eight{
    width: 44.43px;
    height: 21.78px;
}
h2#eight{
    width: 44.43px;
    height: 133.25px;
}
/*=-=-=-=-=-=-ROW NINE=-=-=-=-=-=-=-=*/
div#nine{
    width: 22.93px;
    height: 400px;
    float: left;
}
article#nine{
    width: 22.93px;
    height: 131.5px;
}
section#nine{
    width: 22.93px;
    height: 24.93px;
}
figure#nine{
    width: 22.93px;
    height: 43.57px;
}
figcaption#nine{
    width: 22.93px;
    height: 44.96px;
}
h1#nine{
    width: 22.93px;
    height: 21.78px;
}
h2#nine{
    width: 22.93px;
    height: 133.25px;
}
/*=-=-=-=-=-ROW TEN-=-=-=-=-=-=-=*/
div#ten{
    width: 131.5px;
    height: 400px;
    float: left;
}
article#ten{
    width: 131.5px;
    height: 131.5px;
}
section#ten{
    width: 131.5px;
    height: 24.93px;
}
figure#ten{
    width: 131.5px;
    height: 43.57px;
}
figcaption#ten{
    width: 131.5px;
    height: 44.96px;
}
h1#ten{
    width: 131.5px;
    height: 21.78px;
}
h2#ten{
    width: 131.5px;
    height: 133.25px;
}


/*=-=-=-=-=-COLORS-=-=-=-=-=-=*/

.gray {
    background-color: #b3e0ff; /* Light blue */
}

.teal{
    background-color: #66b3ff; /* Medium blue */
}
.black{
    background-color: #3366ff; /* Dark blue */
}
.purple{
    background-color: #2eb8b8; /* Sea green */
}

.darkpurple{
    background-color: #003366; /* Deep blue */
}
.lightpurple{
    background-color: #f0f0f0; /* Light grey */
}
.blue{
    background-color: #333333; /* Dark grey */
}

.gray:hover{
    background-color: #80bfff; /* Hover Light blue */
}
.teal:hover{
    background-color: #4d94ff; /* Hover Medium blue */
}
.black:hover{
    background-color: #1a53ff; /* Hover Dark blue */
}

.purple:hover{
    background-color: #008080; /* Hover Sea green */
}
.darkpurple:hover{
    background-color: #001a66; /* Hover Deep blue */
}
.lightpurple:hover{
    background-color: #cccccc; /* Hover Light grey */
}
.blue:hover{
    background-color: #666666; /* Hover Dark grey */
}