/*                                 SINCERELY,
HHH  HHH  HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
AAA  AAA  AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
RRR       RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR
EEE  EEE  EEEEEEEEEEEEEEEEEEEEPHOTOGRAPHHYEEE
NNN  NNN  NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN
_____________________________________________  

HHHHHHHHHH   HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH                                            A
AAAAAAAA   A   AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA                                            S
RRRRRRRR       RRRRRRRRRRRRRRRRRRRRRRRRRRRRRR                                            C
EEEEEEEE  RRR  EEEEEEEEEEEEEEEEEEEEEEEEEEEEEE                                            I
NNNNNNNN  NNN  NNNNNNNNNNNNNNNDESIGNNNNNNNNNN                                            I

_____________________________________________

HHHHHHHHHHHHHHH     HHHHHHHHHHHHHHHHHHHHHHHHH                                            M
AAAAAAAAAAAAAAA  AA  AAAAAAAAAARTDIRECTIONAAA                                            A
RRRRRRRRRRRRRRR     RRRRRRRRRRRRRRRRRRRRRRRRR                                            R
EEEEEEEEEEEEEEE  EE  EEEEEEEEEEEEEEEEEEEEEEEE                                            K
NNNNNNNNNNNNNNN  NNN  NNNNNNNNNNNNNNNNNNNNNNN

_____________________________________________

HHHHHHHHHHHHHHHHHHHHH       HHHHHHHHHHHHHHHHH
AAAAAAAAAAAAAAAAAAAAA  AAAAAAAAAAAAAAAAAAAAAA
RRRRRRRRRRRRRRRRRRRRR     RRRRRRRRRRRRRRRRRRR
EEEEEEEEEEEEEEEEEEEEE  EEEEEEEUSEREXPERIENCEE
NNNNNNNNNNNNNNNNNNNNN       NNNNNNNNNNNNNNNNN 

_____________________________________________

HHHHHHHHHHHHHHHHHHHHHHHHHHHH   HHH  HHHHHHHHH
AAAAAAAAAAAAAAAAAAAAAAAAAAAA    AA  AAAAAAAAA
RRRRINTERACTIONRRRRRRRRRRRRR  R  R  RRRRRRRRR
EEEEEEEEEEEEEEEEEEEEEEEEEEEE  EE    EEEE20EEE 
NNNNNNNNNNNNNNNNNNNNNNNNNNNN  NNN   NNNN18NNN   
@harensoril                               */

	* {
		margin: 0;
		padding: 0;
		text-decoration: none;
		list-style-type: none;
	}

	body{
		text-align: center;
		background-color: lightsalmon;
		font-family: sans-serif;
	}

	header{
		margin-top: 2.5%;
	}	

	nav{
		display: inline-block;
		margin: 15px 0 15px 0;
	}

	main{
		text-align: center;
		width: 53.5vw;
		height: 27.5vw;
		margin: 0 auto;
		background-color: #c7c6bf;
	}

	section{
		text-align: center;
		width: 100%;
		height: 100%;
		margin: 0 auto;
		display: inline-block; 
	}

	article{
		text-align: center;
		margin: 0 auto;
	}

	figure{
		text-align: center;
		width: 25%;
		height: 100%;
		display: inline-block;
		float: left;
		margin: 0;
	}

	ul{
		width: 100%;
		height: 25%;
		list-style: none;
		float: left;
		margin: 0 auto;
		display: block;
	}

	li{
		width: 25%;
		height: 100%;
		display: inline-block;
		list-style: none;
		float: left;
		margin: 0 auto;
	}

	p{
		margin-bottom: 3%;
		margin-top: 3%;
		color: brown;
	}

	a{
		color: brown;
	}

	a:hover{
		color: tan;
	}

/* TYPE */


/* COLOR CLASSES */
	.white{
		background-color: white;
	}

	.black{
		background-color: black;
	}

	.seagreen{
		background-color: seagreen;
	}

	.navy{
		background-color: navy;
	}

	.aquamarine{
		background-color: aquamarine;
	}

	.tomato{
		background-color: tomato;
	}

	.coral{
		background-color: coral;
	}

	.yellow{
		background-color: yellow;
	}


/* COLOR HOVERS */
	.white:hover{
		background-color: tomato;
	}

	.black:hover{
		background-color: yellow;
	}

	.seagreen:hover{
		background-color: coral;
	}

	.navy:hover{
		background-color: white;
	}

	.aquamarine:hover{
		background-color: black;
	}

	.tomato:hover{
		background-color: navy;
	}

	.coral:hover{
		background-color: aquamarine;
	}

	.yellow:hover{
		background-color: seagreen;
	}

/* ROWS */
	#row-one{
		height: 33%;
	}

	#row-two{
		height: 6%;
	}

	#row-three{
		height: 11%;
	}

	#row-four{
		height: 11%;
	}

	#row-five{
		height: 6%;
	}

	#row-six{
		height: 33%;
	}

/* COLUMNS */
	#column-one{
		width: 16.5%;
	}

	#column-two{
		width: 2.5%;
	}

	#column-three{
		width: 4%;
	}

	#column-four{
		width: 8%;
	}

	#column-five{
		width: 18%;
	}

	#column-six{
		width: 18%;
	}

	#column-seven{
		width: 8%;
	}

	#column-eight{
		width: 4.5%;
	}

	#column-nine{
		width: 2.5%;
	}

	#column-ten{
		width: 18%;
	}