body {
	margin: 0;
	padding: 0;
	width: 100%;
	background-color: #779;
}

#the {
	color: #ccd;
	font-variant: small-caps;
	letter-spacing: .7em;
      	position: absolute;
	left: 80px;  
	font-size: .2em;
}

#works {
	float: left;
	font-size: 16em;
	color: #aaf;
}

li {
	font-size: 1.5em;
}

#of {
	position: relative;
	float: left;
	color: #bbb;
	padding-top: 28%;
	left: 32%;
	font-size: .15em;
	width: 0;
	height: 0;
}

.firstname {
	position: relative;
	float: left;
	top: -130px;
	color: #aaf;
	font-size: .3em;
	letter-spacing: -.05em;
}

#lastname {
	position: relative;
	top: -50px;
	float: left;
	font-size: .3em;
	color: #bbf;
}

#copyright {
	font-size: .7em;
	font-variant: small-caps;
	margin-right: 3px;
	position: fixed;
	bottom: 0;
	right: 0;
}

.protip {
	position: absolute;
	padding: .7em;
	font-size: .8em;
	background-color: lightblue;
	display: none;
}

#contents {
	float: left;
	width: 40%;
}

li.contents
{
	float: left;
	width: 170px;
	margin-right: 30px;
	height: 250px;
	padding-left: 10px;
}

a {
	color: #22c;
	text-decoration: none;
}

a:visited {
	color: #ccf;
	text-decoration: none;
}