/*  My ASCII art

ooo        ooooo   .oooooo.                          
`88.       .888'  d8P'  `Y8b                            
 888b     d'888  888               /\.../\         
 8 Y88. .P  888  888              ( =^.^= )        
 8  `888'   888  888              /       \    PURR...   
 8    Y     888  `88b    ooo     /   ...   \            
o8o        o888o  `Y8bood8P'    \,,/     \,,/           

*/

@charset "UTF-8";

/* CSS RESET */

	* {
		margin: 0;
		padding: 0;
		color: #000;
	}

/* CANVAS */

	main#canvas {
		width: 44.55vw;
		height: 44.452vw;
		margin: 2vh auto 0 auto;   
	}

/* ARTIST CREDIT */

	section#artist {
		margin: 0.5vw auto 0 auto;  
		font-size: 16pt;
		text-align: center;
		font-family: comic sans ms, cursive;
	}

/* HTML5 SEMANTIC TAGS */

	section#quad1 {
		width: 50%;
		height: 50%;
	}

	section#quad2 {
		width: 50%;
		height: 50%;
	}

	section#quad3 {
		width: 50%;
		height: 50%;
	}

	section#quad4 {
		width: 50%;
		height: 50%;
	}

    article {
    	width: 89.3%;
    	height: 56%;
     }

    figure {
    	width: 81%;
    	height: 49%;
     }

    figcaption {
     	width: 62%;
    	height: 39%;
     }

 	.left {
		float: left;  
    }

    .right {
		float: right;  
    }

    .bottom1 {
    	margin-top: 44%;
    }

    .bottom2 {
    	margin-top: 31.85%;
    }

    .bottom3 {
    	margin-top: 23.2%;
    }

    .top {
    	margin-top: 0%;
    }

/*  CSS COLOR CLASSES and HOVER PSEUDO-CLASS INTERACTIONS  */

	.blue {
		background-color: #349eda;
	}
		.blue:hover {
			background-color: #7dc7f0;
		}

	.green {
		background-color: #61a946;
	}
		.green:hover {
			background-color: #8ecc76;
		}

	.dkblue {
		background-color: #2b559f;
	}
		.dkblue:hover {
			background-color: #5c87d3;
		}

	.purple {
		background-color: #535296;
	}
		.purple:hover {
			background-color: #6e6ce0;
		}

	.yellow {
		background-color: #fbe619;
	}
		.yellow:hover {
			background-color: #c4b205;
		}

	.red {
		background-color: #c63323;
	}
		.red:hover {
			background-color: #9e1d0f;
		}

	.orange {
		background-color: #e39f20;
	}
		.orange:hover {
			background-color: #b87a05;
		}

	.magenta {
		background-color: #bb317e;
	}
		.magenta:hover {
			background-color: #d466a4;
		}