@font-face {
    font-family: Typewriter;
    src: url('MonospaceTypewriter.ttf');
}
button {
	font-family: Typewriter;
	font-size: 20px;
	display: inline-block
}
b {
	font-family: Typewriter;
	font-size: 30px
}

.normal {
	color: #000000;
    background: #F2F2F2;
	font-weight: bold;
    border: 2px solid #4980CC;
	border-radius: 4px;
	transition-duration: 0.2s;
	cursor: pointer;
}
.normal:hover {
    color: #FFF;
    background: #4980CC;
}

.infinity {
	color: #FFFFFF;
	background: #1F1F1F;
	font-weight: bold;
	border: 2px solid #B67F33;
	border-radius: 4px;
	transition-duration: 0.2s;
	cursor: pointer;
}
.infinity:hover {
	color: #000000;
	background: #B67F33;
}

.eternity {
	color: #b341e0;
	background: black;
	border: 2px solid #b341e0;
	font-weight: bold;
	border-radius: 4px;
	transition-duration: 0.2s;
	cursor: pointer;
}
.eternity:hover {
	color: #511568;
	background: white;
}

.quantum {
	color: #32c832;
	background: #0a640a;
	border: 2px solid #32c832;
	font-family: Typewriter;
	font-weight: bold;
	border-radius: 4px;
	transition-duration: 0.2s;
	cursor: pointer;
}
.quantum:hover {
	background: #32c832;
	color: #0a640a;
}

.ghostold {
	color: #715fff;
	text-shadow: 0px 0px 3px #f91eff, 0px 0px 3px #bfbfbf;
	background: #320633;
	border: 2px solid #f91eff;
	font-family: Typewriter;
	font-weight: bold;
	border-radius: 4px;
	transition-duration: 0.2s;
	cursor: pointer;
}
.ghostold:hover {
	color: #161333;
	text-shadow: 0px 0px 3px #f91eff, 0px 0px 3px #bfbfbf;
	background: #f91eff;
	border: 2px solid #f91eff;
}

.ghost {
	background: linear-gradient(#0c001e, #3a003f);
	border: 2px solid transparent;
	font-family: Typewriter;
	font-weight: bold;
	border-radius: 4px;
	transition-duration: 0.2s;
	animation: ghost 4s linear infinite
}
.ghost:hover {
	border-color: rgba(255,255,255,0.5);
	box-shadow: inset 0px 0px 12px 0px #ffffff;
	cursor: pointer
}
@keyframes ghost { 
	0%{
		color: #e900ff;
		text-shadow: 0px 0px 3px #e900ff, 0px 0px 6px #ffffff;
	}
	50% {
		color: #6a00ff;
		text-shadow: 0px 0px 6px #6a00ff, 0px 0px 6px #ffffff;
	}
	100%{
		color: #e900ff;
		text-shadow: 0px 0px 3px #e900ff, 0px 0px 6px #ffffff;
	}
}

.ethereal {
	background: repeating-linear-gradient(#00bfff, transparent 50%, #00bfff 100%), repeating-linear-gradient(90deg, #00dfff, #007fff 50%, #00dfff 100%);
	background-size: 200% 200%;
	box-shadow: inset 0px 0px 12px 0px #00bfff;
	border: 2px solid #00bfff;
	border-radius: 4px;
	font-family: Typewriter;
	font-weight: bold;
	color: white;
	text-shadow: 0px 0px 3px white, 0px 0px 3px black;
	transition-duration: 0.2s;
	animation: ethereal 5s linear infinite;
	cursor: pointer
}
.ethereal:hover {
	border: 2px solid #007fff;
	box-shadow: inset 0px 0px 12px 0px #007fff;
	color: #7f9fff;
	text-shadow: 0px 0px 3px black
}
@keyframes ethereal { 
	0%{
		background-position: 0% 0%
	}
	50%{
		background-position: 100% 100%
	}
	100%{
		background-position: 200% 200%
	}
}

.hadron {
	color: #ffffff;
	animation: hadronize 1.5s linear infinite;
	border: 2px solid #1f1f1f;
	background: radial-gradient(transparent, #000000), repeating-linear-gradient(#990000, #009900, #000099, #990000);
	background-size: 100% 200%;
	font-family: Typewriter;
	font-weight: bold;
	border-radius: 4px;
	transition-duration: 0.2s;
	cursor: pointer;
}
.hadron:hover {
	color: #000000;
	animation: hadronize 1.5s linear infinite;
	border: 2px solid #bfbfbf;
	text-shadow: 0px 0px 3px #ffffff, 0px 0px 3px #ffffff;
	font-weight: bold;
	background: radial-gradient(transparent, #000000), repeating-linear-gradient(#990000, #009900, #000099, #990000);
	background-size: 100% 200%;
}
@keyframes hadronize{ 
	0%{
	    background-position: 50% 50%, 0% 0%;
	}
	100%{
	    background-position: 50% 50%, 0% 200%;
	}
}

.star {
	color: #7f6f1f;
	text-shadow: 0 0 1px #000000, 0 0 2px #7f7f7f, 0 0 3px #ffffff;
	background: radial-gradient(closest-side,#ff5400 0,#ff9021 33%,#ffdf3f 100%);
	border: 2px solid #ffdf3f;
	font-family: Typewriter;
	font-weight: bold;
	border-radius: 4px;
	transition-duration: 0.2s;
	cursor: pointer;
}
.star:hover {
	color: #ffffff;
	text-shadow: 0 0 1px #ffdf3f, 0 0 2px #7f6f1f, 0 0 3px #000000;
	background: radial-gradient(closest-side,#ff5400 0,#ff9021 33%,#ffdf3f 100%);
	border: 2px solid #ffdf3f;
}

.universe {
	color: #7fbfff;
	text-shadow: 0 0 3px #7fbfff, 0 0 3px #7fbfff, 0 0 4px #000000;
	background: radial-gradient(closest-side,transparent 0,transparent 50%,#000000 100%), linear-gradient(#000000, #3f5f7f);
	border: 2px solid #000000;
	font-family: Typewriter;
	font-weight: bold;
	border-radius: 4px;
	transition-duration: 0.2s;
	cursor: pointer;
}
.universe:hover {
	text-shadow: 0 0 9px #7fbfff, 0 0 9px #7fbfff, 0 0 12px #000000;
}

.fractal {
	color: #000000;
	text-shadow: 0px 0px 3px #ffffff, 0px 0px 3px #ffffff;
	animation: fract 3s linear infinite;
	border: 2px solid #1f1f1f;
	background: radial-gradient(transparent, #000000), repeating-linear-gradient(90deg,#000764,#206BCB 16%,#EDFFFF 42%,#FFAA00 64.25%,#000200 85.75%,#000764);
	font-family: Typewriter;
	font-weight: bold;
	border-radius: 4px;
	transition-duration: 0.2s;
	cursor: pointer;
	background-size: 200% 100%;
}
.fractal:hover {
	color: #ffffff;
	border: 2px solid #bfbfbf;
	text-shadow: 0px 0px 3px #000000, 0px 0px 3px #000000;
}
@keyframes fract{ 
	0%{
	    background-position: 0% 0%, 0% 0%;
	}
	100%{
	    background-position: 0% 0%, 200% 200%;
	}
}

.abstract {
	color: #000000;
	text-shadow: 0px 0px 3px #7f7f7f, 0px 0px 3px #ffffff;
	background: linear-gradient(#000000,#1f1f1f 50%,#000000 100%);
	border: 2px solid #000000;
	font-family: Typewriter;
	font-weight: bold;
	border-radius: 4px;
	transition-duration: 0.2s;
	cursor: pointer;
}
.abstract:hover {
	color: #ffffff;
	text-shadow: 0px 0px 3px #ffffff, 0px 0px 3px #ffffff
}

.cosmo {
	color: #ffffff;
	text-shadow: 0px 0px 3px #ffffff, 0px 0px 3px #ffffff;
	background: #000000;
	border: 2px solid #000000;
	font-family: Typewriter;
	font-weight: bold;
	border-radius: 4px;
	transition-duration: 0.2s;
	cursor: pointer;
}
.cosmo:hover {
	color: #ffffff;
	text-shadow: 0px 0px 9px #ffffff, 0px 0px 9px #ffffff
}

.beyond {
	color: #bfbfbf;
	text-shadow: 0px 0px 3px #bfbfbf, 0px 0px 3px #bfbfbf;
	background: #ffffff;
	border: 2px solid #efefef;
	font-family: Typewriter;
	font-weight: bold;
	border-radius: 4px;
	transition-duration: 0.2s;
	cursor: pointer;
}
.beyond:hover {
	color: #ffffff;
	text-shadow: 0px 0px 3px #7f7f7f, 0px 0px 3px #7f7f7f;
}

.meta {
	color: #ffffff;
	text-shadow: 0px 0px 3px #000000;
	background: radial-gradient(transparent, #ffffff),  linear-gradient(#cccc00, #00cccc 33%, #cc00cc 66%, #cccc00 100%);
	border: 2px solid #ffffff;
	font-family: Typewriter;
	font-weight: bold;
	border-radius: 4px;
	animation: meta 3s linear infinite;
	background-size: 100% 300%;
	transition-duration: 0.2s
}
.meta:hover {
	text-shadow: 0px 0px 6px #000000;
	cursor: pointer;
}
@keyframes meta { 
	0%{
	    background-position: 0% 0%, 0% 0%;
	}
	100%{
	    background-position: 0% 0%, 300% 300%;
	}
}

.unknown {
	background: #fcfcfc;
	color: #fcfcfc;
	border: 2px solid #ffffff;
	border-radius: 4px;
	transition-duration: 0.2s
}
.unknown:hover {
	background: #000000;
	color: #7f7f7f;
	text-shadow: 0px 0px 3px #3f3f3f;
	border-color: #000000;
	cursor: pointer;
}

.virtualize {
	color: #000000;
	text-shadow: 0px 0px 3px #ffffff;
	background: linear-gradient(#000000, transparent 50%, #000000 100%), radial-gradient(circle, #ffffff, #3f9fff 50%, #000000 100%);
	border: 2px solid transparent;
	font-family: Typewriter;
	font-weight: bold;
	border-radius: 4px;
	transition-duration: 0.2s
}
.virtualize:hover {
	color: #ffffff;
	text-shadow: 0px 0px 3px #000000;
	cursor: pointer
}

.digitize {
	color: #00ff00;
	text-shadow: 0px 0px 6px #000000, 0px 0px 6px #000000, 0px 0px 6px #000000, 0px 0px 6px #000000, 0px 0px 6px #000000, 0px 0px 6px #000000;
	background: url("images/digitize.png");
	border: 2px solid #000000;
	font-family: Typewriter;
	font-weight: bold;
	border-radius: 4px;
	animation: digitize 3s linear infinite;
	transition-duration: 0.2s
}
.digitize:hover {
	color: #000000;
	text-shadow: 0px 0px 6px #00ff00, 0px 0px 6px #00ff00, 0px 0px 6px #00ff00, 0px 0px 6px #00ff00, 0px 0px 6px #00ff00, 0px 0px 6px #00ff00;
	cursor: pointer
}
@keyframes digitize { 
	0%{
	    background-position: 0 0;
	}
	100%{
	    background-position: -20px -40px;
	}
}

.infinitize {
	color: #ffffff;
	text-shadow: 0px 0px 3px #ffffff;
	background: radial-gradient(circle, #ffffff, #000000 75%, #e59900 100%);
	border: 2px solid #000000;
	font-family: Typewriter;
	font-weight: bold;
	border-radius: 4px;
	transition-duration: 0.2s
}
.infinitize:hover {
	color: #000000;
	text-shadow: 0px 0px 6px #e59900, 0px 0px 6px #e59900, 0px 0px 6px #e59900, 0px 0px 6px #e59900, 0px 0px 6px #e59900, 0px 0px 6px #e59900;
	cursor: pointer
}

.timeless {
	border: 2px solid #000000;
	box-shadow: inset 0px 0px 12px 0px #ffffff;
	color: #001966;
	text-shadow: 0px 0px 3px #ffffff, 0px 0px 6px #ffffff;
	background: radial-gradient(circle, #7f7f7f, #000000 25%, transparent 50%), linear-gradient(#ffffff, transparent 33%, transparent 67%, #ffffff 100%), linear-gradient(90deg, #e59900 0%, #b341e0 100%);
	font-family: Typewriter;
	font-weight: bold;
	border-radius: 4px;
	transition-duration: 0.2s
}
.timeless:hover {
	border-color: #0033cc;
	box-shadow: inset 0px 0px 12px 0px #0033cc;
	text-shadow: 0px 0px 3px #0033cc, 0px 0px 6px #0033cc;
	cursor: pointer
}

.continuum {
	border: 2px solid #3f00ff;
	box-shadow: inset 0px 0px 12px 0px #7f00ff;
	color: #3f00ff;
	text-shadow: 0px 0px 6px #1f007f, 0px 0px 3px #1f007f;
	background: linear-gradient(#00007f, #0000ff 50%, #00007f 100%);
	font-family: Typewriter;
	font-weight: bold;
	border-radius: 4px;
	transition-duration: 0.2s
}
.continuum:hover {
	box-shadow: inset 0px 0px 12px 0px #7f00ff;
	text-shadow: 0px 0px 6px #9f7fff, 0px 0px 3px #9f7fff;
	cursor: pointer
}

.omniscient {
	color: #bfbf00;
	text-shadow: 0px 0px 6px #bfbf00, 0px 0px 3px #bfbf00;
	background: radial-gradient(circle, transparent, #000000 50%, #000000 100%), linear-gradient(#3f3f00, transparent 50%, #3f3f00 100%), linear-gradient(#3f3f00, #ffff00 50%, #3f3f00 100%);
	font-weight: bold;
    border: 2px solid #000000;
	border-radius: 4px;
	transition-duration: 0.2s
}
.omniscient:hover {
	text-shadow: 0px 0px 6px #ffff00, 0px 0px 3px #ffffff;
	cursor: pointer
}

.spiritual {
	color: #ff3f00;
	text-shadow: 0px 0px 6px #ff3f00, 0px 0px 3px #000000;
	background: radial-gradient(transparent, #ff7f00), linear-gradient(#ff3f00, transparent 50%, #ff3f00 100%), linear-gradient(90deg, #ff0000, #ff7f00 50%, #ff0000 100%);
	border: 2px solid #ff3f00;
	font-family: Typewriter;
	font-weight: bold;
	border-radius: 4px;
	animation: spiritual 3s linear infinite;
	background-size: 100% 300%;
	transition-duration: 0.2s
}
.spiritual:hover {
	color: #ff7f00;
	text-shadow: 0px 0px 6px #ffbf7f, 0px 0px 3px #ffffff;
	cursor: pointer
}
@keyframes spiritual { 
	0%{
	    background-position: 0 0;
	}
	100%{
	    background-position: 300% 300%;
	}
}

.enlighten {
	border: 2px solid #bfbfbf;
	box-shadow: inset 0px 0px 12px 0px #bfbfbf;
	color: #ff7f7f;
	text-shadow: 0px 0px 6px #ff7f7f, 0px 0px 3px #ff7f7f;
	background: #ffffff;
	font-family: Typewriter;
	font-weight: bold;
	border-radius: 4px;
	transition-duration: 0.2s
}
.enlighten:hover {
	color: #ff0000;
	text-shadow: 0px 0px 6px #ff0000, 0px 0px 3px #ff00000;
	cursor: pointer
}

.colorize {
	border: 2px solid rgba(255,255,255,0);
	border-radius: 4px;
	font-family: Typewriter;
	font-weight: bold;
	transition-duration: 0.2s;
	animation: colorize 6s linear infinite;
	cursor: pointer
}
.colorize:hover {
	border: 2px solid rgba(255,255,255,0.5);
	text-shadow: 0px 0px 6px #ffffff, 0px 0px 3px #ffffff;
}
@keyframes colorize { 
	0%{
		background: #7f0000;
		box-shadow: inset 0px 0px 12px 0px #ff0000;
		color: #ff7f7f
	}
	16%{
		background: #7f7f00;
		box-shadow: inset 0px 0px 12px 0px #ffff00;
		color: #ffff7f
	}
	33%{
		background: #007f00;
		box-shadow: inset 0px 0px 12px 0px #00ff00;
		color: #7fff7f
	}
	50%{
		background: #007f7f;
		box-shadow: inset 0px 0px 12px 0px #00ffff;
		color: #7fffff
	}
	67%{
		background: #00007f;
		box-shadow: inset 0px 0px 12px 0px #0000ff;
		color: #7f7fff
	}
	83%{
		background: #7f007f;
		box-shadow: inset 0px 0px 12px 0px #ff00ff;
		color: #ff7fff
	}
	100%{
		background: #7f0000;
		box-shadow: inset 0px 0px 12px 0px #ff0000;
		color: #ff7f7f
	}
}