css.css

* {
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
}

body {
	background: #000;
	height: 100%;
	min-height: 100%;
	width:100%;
	color: #fff;
	font-family: 'Bitter', serif;
}

p {
	margin: 1em 0;
}

#header {
	min-height: 100%;
	height: 100%;
	width: 300px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 999;
	box-sizing: border-box;
	padding: 0 2%;
	color: #bbb;
}

a, a:link, a:visited, a:active {
	color: #fff;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

#header .block {
	background: #222;
	height: 25%;
	width: 100%;
	float: left;
	display: table-cell;
	vertical-align: middle;
	box-sizing: border-box;
		opacity: 0.5;
  filter: alpha(opacity=50);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#header .block:hover {
	opacity: 1;
  filter: alpha(opacity=100);
}

#header h1 {
	padding-top: 5%;
	float: left;
	display: block;
	font-weight: normal;
	font-size: 35px;
	line-height: 60px;
}

#header .color {
	float: left;
	width: 30px;
	height: 30px;
	margin: 5px;
	border-bottom: #222 5px solid;
	text-align: center;
	font-size: 20px;
	line-height: 30px;
	font-weight: bold;
	display: block;
}

#header .color.selected {
	border-color: #fff;
} 

#palette {
	background: #222;
	z-index: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding-right: 300px;
	position: absolute;
	top: 0;
	left: 0;
}

.color {
	cursor: pointer;
	opacity: 0.9;
  filter: alpha(opacity=90);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.color:hover {
	opacity: 1;
  filter: alpha(opacity=100);
}

#palette .color {
	font-family: 'Arvo', serif;
	float: left;
	width: 20%;
	height: 25%;
	color: #fff;
	box-sizing: border-box;
	padding: 1% 3.5%;
	font-size: 30px;
	line-height: 50px;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

#palette .color span {
	display: table-cell;
	width: 100%;
	vertical-align: middle;
}

.color1 {
	background: #82AFF9;
}

.color2 {
	background: #9881F5;
}

.color3 {
	background: #F97D81;
}

.color4 {
	background: #F9D08B;
}

.color5 {
	background: #6C2D58;
}

.color6 {
	background: #40B8AF;
}

.color7 {
	background: #257E78;
}

.color8 {
	background: #B2577A;
}

.color9 {
	background: #F6B17F;
}

.color10 {
	background: #4f213f;
}