style2.css

html {
		height: 100%;
		width: 100%;
		font: 100%/1.25 sans-serif;
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2NkIA78ZyRC3X+gGkZkhWABNI1wMZwS6DZhsxqbyRhWwQzCUIzPMyiKSfYMVnchewhkIkFFIA0Ak1IMCv1gGaUAAAAASUVORK5CYII=) #309090
	
}

body
{
	width: 36rem;
	min-height: 100%;
	margin: 0 auto;
	padding: 1rem;
	color: #444;
	background: rgba(238,238,238,.9)
}

h1,h2,h3
{
	font-family: Boogaloo,sans-serif;
	margin-top: 0;
	margin-bottom: 0;
	color: #111;
	text-shadow: .03rem .03rem .05rem #b0e0e0,.04rem .04rem .04rem #b0e0e0,.05rem .05rem .04rem #b0e0e0
}

h1
{
	font-size: 8rem;
	line-height: 1.29;
	border-bottom: 1px solid #b0e0e0
}

h1 a
{
	text-decoration: none;
	color: #111
}

h2
{
	font-size: 5rem;
	line-height: 1.28
}

h3
{
	font-size: 3rem;
	line-height: 1.3
}

ul
{
	list-style: none
}

li
{
	margin-bottom: .5rem
}

nav ol
{
	counter-reset: li;
	list-style: none;
	*list-style: decimal;
	padding: 0;
	margin-bottom: 4rem
}

nav li:before
{
	display: inline-block;
	content: counter(li);
	counter-increment: li;
	background: #b0e0e0;
	border: 1px solid #000;
	border-radius: 1rem;
	padding: .2rem .6rem;
	font: 900 2rem Boogaloo,sans-serif
}

nav li:nth-child(n+10):before
{
	padding: .2rem .33rem .2rem .27rem
}

nav li p
{
	margin-left: 4rem
}

nav a
{
	text-decoration: none;
	display: inline-block;
	margin: 0 .8rem .09rem 0;
	padding-left: .5rem;
	color: #111;
	-webkit-transition: all .1s ease-out;
	-moz-transition: all .1s ease-out;
	-o-transition: all .1s ease-out;
	transition: all .1s ease-out;
	font: 2rem Boogaloo,sans-serif
}

nav a:hover
{
	text-shadow: .07rem .07rem .07rem #b0e0e0,.08rem .08rem .08rem #b0e0e0,.09rem .09rem .09rem #b0e0e0;
	margin: 0
}

#footer
{
	background: #000;
	font-size: .75rem;
	color: #ccc;
	border-radius: 1rem;
	-moz-border-radius: 1rem;
	-webkit-border-radius: 1rem;
	padding: .5rem
}

#footer a
{
	text-shadow: none;
	color: #aaf;
	margin: 0;
	text-decoration: underline
}

@media (min-width: 1217px) {
	html
	{
		font-size: 100%
	}
}

@media (max-width: 1216px) {
	html
	{
		font-size: 93%
	}
}

@media (max-width: 1140px) {
	html
	{
		font-size: 87%
	}
}

@media (max-width: 1064px) {
	html
	{
		font-size: 81%
	}
}

@media (max-width: 988px) {
	html
	{
		font-size: 75%
	}
}

@media (max-width: 912px) {
	html
	{
		font-size: 68%
	}
}

@media (max-width: 836px) {
	html
	{
		font-size: 62%
	}
}

@media (max-width: 760px) {
	html
	{
		font-size: 56%
	}
}

@media (max-width: 684px) {
	html
	{
		font-size: 50%
	}
}

a,p,li
{
	font-size: 100%
}