/*
     RRRRRR    EEEEEEE  BBBBBB   EEEEEEE   CCCCCC,       AA                    CCCCCC,
     RR   RR   EE       BB   BB  EE       CCC   C       AAAA                  CCC   C
     RR  RR    EE       BB  BB   EE      CC            AA  AA       WITH     CC
     RRRRRR    EEEE     BBBBBB   EEEE    CC           AAAAAAAA               CC
     RR  RR    EE       BB  BB   EE      CC          AA      AA      ONE     CC
     RR   RR   EE       BB   BB  EE       CCC   C,  AA        AA              CCC   C,
     RR    RR  EEEEEEE  BBBBB    EEEEEEE   CCCCCC  AA          AA              CCCCCC

      ^'^
                    ^'^                                        ^'^
                                                 ^'^                                      ^'^
      //`                                                                    /          
     ///``      /      //`         /                    ``                 ///```         
    //////``   //``  /////``      ///`    //`        ////```     //`     /////```    /`  
 ///////////`/////``///////``   //////`` ///``    //////////```  ////`   ///////```` //``  /
////////////``/////``///////``/////////`///////``///////////````//////``/////////````///````/
/////////////````///////////```/////////`////````////////////````////````/////////````///````
////////////////``````////`````````/////`////`````/////````````````/``````/////////````////``
=============================================================================================
~~~~~~~~~~~~~~ * ~~~~~~~~~~~~~~~~~ * ***** *** ~~~~~~~~ * ~~~~~~~~~~~~~~~~ *** ~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~ * ~~~~~ ********** ~~~~ * ~~ * ~~~~~~~~~~~ * ~~~ WEB ~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~***************** ~~~~~~~~~~~~~~~~~~~~~~~~ PAGE ~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~************ **** ~~~~~~~~~~~~~~~~~~~~~ & ~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~ * ~~~~~~ ** **************** ** ~~~~~ * * ~~~~~~~~~ SEA ~~ * ~~~~~~~
~~~~~~~~~~~~~~~~~~~ * ~~~~~~~~ *************************** ~~~~~~~~~~ * * ~~~~~~~ CREATED ~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~ ************************ ** * ~~~~~~~~~~~~~~~~ BY ~~~~~~~~
~~~~~~~~~~~~~~ * ~~~~~~~ ************************************** ~~~~~~~~~~~~~~~~~ REBECA ~~~~
~~~~~~~~~~~~~~~~~~~********** ******************** ******************** ~~~~~~~~~~~~~~~~~~~~~
*/

* {
	margin: 0;
	padding: 0;
	font-family: "Helvetica";
	font-size: 12pt;
	font-weight: 300;
	color: black;
	text-decoration: none;
}

header#canvas {
	width: 55.1vw;
	height: 65.75vw;
	margin: 2vw auto 0 auto;
}
	section {
		float: left;
		width: 100%;
		height: 100%;
	}
		main {
			width: 95.3%;
			height: 95.8%;
			border-style: solid;
			border-width: 1%;
			margin-top: 2%;
			margin-left: 2%;
		}
			article {
				float: left;
				height: 100%;
			}
				article.coral {
					width: 25.5%;
				}
				article.pink {
					width: 24.6%;
				}
				article.purple {
					width: 24.4%;
				}
				article.blue {
					width: 25.5%;
				}
					figure#rectangleone {
						width: 100%;
						height: 4%;
						margin-top: 374%;
					}
					figure#rectangletwo {
						width: 100%;
						height: 3.8%;
						margin-top: 190%;
					}
					figure#rectanglethree {
						width: 100%;
						height: 4%;
						margin-top: 104%;
					}
					figure#rectanglefour {
						width: 100%;
						height: 4%;
						margin-top: 283%;
					}
					figure#rectanglefive {
						width: 100%;
						height: 3.8%;
						margin-top: 90%;
					}
					figure#rectanglesix {
						width: 100%;
						height: 3.8%;
						margin-top: 302%;
					}

	h1 {
		float: left;
		margin-left: 5%;
	}
	h2 {
		margin-left: 65%;
		margin-top: 1%;
	}
		a:hover {
			color: #A52737;
		}

@media screen and (max-width:  479px) {
	body {
		width: 375px;
		height: 627px;
		background-color: black;
	}
	h1, h2,a,cite,time { 
		color: #EFECEF; 
	}
	h1 {
		margin-left: 21%;
	}
}

@media screen and (min-width: 480px) and (max-width: 767px) {
	body {
		width: 480px;
		height: 768px;
		background-color: yellow;
	}
	h2 {
		margin-left: 45%;
	}
}

@media screen and (min-width: 768px) and (max-width: 1365px) {
	body {
		width: 768px;
		height: 1024px;
		background-color: darkgoldenrod;
	}
}
@media screen and (min-width: 1366px) and (max-width: 1919px) {
	body {
		width: 1366px;
		height: 768px;
		background-color: violet;
	}
}
@media screen and (min-width: 1920px) {
	body {
		width: 1920px;
		height: 1080px;
		background-color: greenyellow;
	}
}


/* CSS COLOR CLASSES */
.gray {
	background-color: #EFECEF;
}
	.gray:hover {
	background-color: #C673B6;
	}

.red {
	border-color: #A52737;
}
	.red:hover {
	border-color: #EFECEF;
	}

.coral {
	background-color: #DA7698;
}
	.coral:hover {
	background-color: #5D4BAE;
	}

.pink {
	background-color: #C673B6;
}
.pink:hover {
	background-color: #1941AF;
	}

.purple {
	background-color: #5D4BAE;
}
	.purple:hover {
	background-color: #A52737;
	}

.blue {
	background-color: #1941AF;
}
	.blue:hover {
	background-color: #DA7698;
	}