/*                                 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: cornsilk;
		font-family: sans-serif;
	}

	header{
		margin-top: 2.5%;
	}

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

	main{
		text-align: center;
		width: 62vw;
		height: 61.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: 100%;
		height: 100%;
		display: inline-block;
		float: left;
		margin: 0;
	}

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

	a{
		color: brown;
	}

	a:hover{
		color: tan;
	}

/* TYPE */


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

	.black{
		background-color: black;
	}

	.blue{
		background-color: deepskyblue;
	}

	.white{
		background-color: white;
	}

	.yellow{
		background-color: yellow;
	}

/* COLOR HOVERS */
	.red:hover{
		background-color: deepskyblue;
	}

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

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

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

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

/* SINGLE COLUMN */
	#single-column{
		width: 100%;
	}

/* FIRST ROW */
	#first-row{
		width: 100%;
		height: 4.5%;
	}

	#first-row-first-column{
		width: 68%;
	}

	#first-row-second-column{
		width: 32%;
	}

/* SECOND ROW */
	#second-row{
		width: 100%;
		height: 6%;
	}

/* THIRD ROW */
	#third-row{
		width: 100%;
		height: 2.1%;
	}

	#third-row-first-column{
		width: 15.5%;
	}

	#third-row-second-column{
		width: 84.5%;
	}


/* FOURTH ROW */
	#fourth-row{
		width: 100%;
		height: 14.25%;
	}

	#fourth-row-first-column{
		width: 68%;
	}

	#fourth-row-second-column{
		width: 32%;
	}

/* FIFTH ROW */
	#fifth-row{
		width: 100%;
		height: 7%;
	}

	#fifth-row-first-column{
		width: 24.5%;
	}

	#fifth-row-second-column{
		width: 75.5%;
	}

/* SIXTH ROW */
	#sixth-row{
		width: 100%;
		height: 23.5%;
	}

	#sixth-row-first-column{
		width: 68%;
	}

	#sixth-row-second-column{
		width: 32%;
	}

/* SEVENTH ROW */
	#seventh-row{
		width: 100%;
		height: 24.75%;
	}

	#seventh-row-first-column{
		width: 24.5%;
	}

	#seventh-row-second-column{
		width: 75.5%;
	}

/* EIGHTH ROW */
	#eighth-row{
		width: 100%;
		height: 2.5%;
	}

/* NINTH ROW */
	#ninth-row{
		width: 100%;
		height: 14.25%;
	}

	#ninth-row-first-column{
		width: 52%;
	}

	#ninth-row-second-column{
		width: 48%;
	}

/* TENTH ROW */
	#tenth-row{
		width: 100%;
		height: 1.75%;
	}

	#tenth-row-first-column{
		width: 15.5%;
	}

	#tenth-row-second-column{
		width: 84.5%;
	}