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

header{
	margin-top: 2.5%;
}	

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

main{
	text-align: center;
	width: 57.5vw;
	height: 57.5vw;
	margin: 0 auto;
	padding: 3.5% 2% 0.5% 2%;
	background-color: #c7c6bf;
}

#shuffle{
	text-align: center;
	width: 54.5vw;
	height: 54.5vw;
	margin: 0 auto;
}

section{
	text-align: center;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	display: inline-block;
	box-shadow:10px 10px 30px 1px #999; 
}

article{
	width: 100%;
	height: 25%;
	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 */
.canary{
	background-color: #ede189;
}

.perriwinkle{
	background-color: #707fd6;
}

.swamp{
	background-color: #385d5e;
}

.tangerine{
	background-color: #eb7035;
}

.orange{
	background-color: #b64723;
}

.sunshine{
	background-color: #dbdc48;
}

.soil{
	background-color: #4c1f09;
}

.lapislazuli{
	background-color: #272139;
}

.tangerine{
	background-color: #ca4a23;
}

/* COLOR HOVERS */
.canary:hover{
	background-color: #ca4a23;
}

.perriwinkle:hover{
	background-color: #4c1f09;
}

.swamp:hover{
	background-color: #b64723;
}

.tangerine:hover{
	background-color: #272139;
}

.orange:hover{
	background-color: #eb7035;
}

.sunshine:hover{
	background-color: #385d5e;
}

.soil:hover{
	background-color: #dbdc48;
}

.lapislazuli:hover{
	background-color: #707fd6;
}

.tangerine:hover{
	background-color: #ede189;
}



/* ID */


/* LINKS */