.hope {
	position: relative;
	font-size: 400%;
	font-family: Homestuck, monospace;
	line-height: 0;
}

.hope-dark1 {
	position: relative;
	top: 0.22em;
	animation:dark 150ms linear 0s infinite alternate;
	-moz-animation:dark 150ms linear 0 infinite alternate;
	-webkit-animation:dark 150ms linear 0 infinite alternate;
	-o-animation:dark 150ms linear 0 infinite alternate;
	text-shadow: 0 0 0.1em #FE1, 0 0 0.1em #FE1, 0 0 0.1em #FE1,
				 0 -0.22em 0.1em #FE1, 0 -0.22em 0.1em #FE1, 0 -0.22em 0.1em #FE1;
}

.hope-dark2 {
	position: relative;
	top: 0.11em;
	animation:dark 150ms linear 0s infinite alternate;
	-moz-animation:dark 150ms linear 0 infinite alternate;
	-webkit-animation:dark 150ms linear 0 infinite alternate;
	-o-animation:dark 150ms linear 0 infinite alternate;
}

.hope-top {
	position: relative;
	top: 0em;
	animation:top 150ms linear 0s infinite alternate;
	-moz-animation:top 150ms linear 0 infinite alternate;
	-webkit-animation:top 150ms linear 0 infinite alternate;
	-o-animation:top 150ms linear 0 infinite alternate;
}

#dies-d {
	transform: translate(-90px, 50px) rotate(10deg) scale(1, 1);
	-ms-transform: translate(-90px, 50px) rotate(10deg) scale(1, 1);
	-webkit-transform: translate(-90px, 50px) rotate(10deg) scale(1, 1);
	text-shadow: 0 1px 0 #150, 0 2px 0 #150, 0 3px 0 #150, 0 4px 0 #150, 1px 5px 0 #150, 1px 6px 0 #150, 1px 7px 0 #150, 1px 8px 0 #150, 1px 9px 0 #150, 1px 10px 0 #150, 2px 11px 0 #150, 2px 12px 0 #150;
}

#dies-i {
	transform: translate(-15px, 30px) rotate(68deg) scale(.8, .8);
	-ms-transform: translate(-15px, 30px) rotate(68deg) scale(.8, .8);
	-webkit-transform: translate(-15px, 30px) rotate(68deg) scale(.8, .8);
	text-shadow: 1px 0px 0 #150, 2px 0px 0 #150, 3px 1px 0 #150, 4px 1px 0 #150, 5px 2px 0 #150;

}

#dies-e {
	transform: translate(15px, 35px) rotate(-154deg) scale(.4, .4);
	-ms-transform: translate(15px, 35px) rotate(-154deg) scale(.4, .4);
	-webkit-transform: translate(15px, 35px) rotate(-154deg) scale(.4, .4);
	text-shadow: 0 -1px 0 #150, 0 -2px 0 #150, -1px -3px 0 #150, -1px -4px 0 #150;
}

#dies-s {
	transform: translateY(60px) rotate(-90deg) scale(.3, .3);
	-ms-transform: translateY(60px) rotate(-90deg) scale(.3, .3);
	-webkit-transform: translateY(60px) rotate(-90deg) scale(.3, .3);
}

#dies-period {
	transform: translateY(70px) rotate(90deg) scale(.2, .2);
	-ms-transform: translateY(70px) rotate(90deg) scale(.2, .2);
	-webkit-transform: translateY(70px) rotate(90deg) scale(.2, .2);
}


@font-face {
    font-family: 'Homestuck';
    src: url('fontstuck/fontstuck.eot');
    src: url('fontstuck/fontstuck.eot?#iefix') format('embedded-opentype'),
         url('fontstuck/fontstuck.woff') format('woff'),
         url('fontstuck/fontstuck.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@keyframes top { 0% { color: rgb(31, 147, 1); } 100% { color: rgb(35, 174, 1); }}
@keyframes dark { 0% { color: rgb(16, 80, 0); } 100% { color: rgb(20, 94, 0); }}

@-o-keyframes top { 0% { color: rgb(31, 147, 1); } 100% { color: rgb(35, 174, 1); }}
@-o-keyframes dark { 0% { color: rgb(16, 80, 0); } 100% { color: rgb(20, 94, 0); }}

@-moz-keyframes top { 0% { color: rgb(31, 147, 1); } 100% { color: rgb(35, 174, 1); }}
@-moz-keyframes dark { 0% { color: rgb(16, 80, 0); } 100% { color: rgb(20, 94, 0); }}

@-webkit-keyframes top { 0% { color: rgb(31, 147, 1); } 100% { color: rgb(35, 174, 1); }}
@-webkit-keyframes dark { 0% { color: rgb(16, 80, 0); } 100% { color: rgb(20, 94, 0); }}