@charset "UTF-8";
/* CSS Document */
body {
	background-color:#000;
}

.image {
	position:relative;
}

p.Note {
	color:#CCC;
}

p.storyText {
	position:absolute;
	width:100%;
	font: bold; font-family:'Indie Flower', cursive;
	text-shadow:#000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px;
}
/*
p.typing {
	-webkit-font-smoothing: antialiased;
	animation:type 4s steps(60,end);
	white-space:nowrap;
	overflow:hidden;
}
p.typing:nth-child(2){
	animation:type2 8s steps(60, end);
}
p.typing:nth-child(3){
	animation:type3 12s steps(60, end);
}
p.typing:nth-child(4){
	animation:type4 15s steps(60, end);
}

@keyframes type{
	from{width:0;}
}

@keyframes type2{
	0%{width:0;}
	50%{width:0;}
	100%{width:100;}
}

@keyframes type3{
	0%{width:0;}
	50%{width:0;}
	100%{width:100;}
}

@keyframes type4{
	0%{width:0;}
	50%{width:0;}
	100%{width:100;}
}
*/
p.line01 {
	top:50px;
	color:#F00;
	font-weight:bold;
}

p.line02 {
	top:95px;
	color:#F00;
	font-weight:bold;
}

p.line03 {
	top:140px;
	color:#F00;
	font-weight:bold;
}

p.line04 {
	top:175px;
	color:#F00;
	font-weight:bold;
}

h1 {
	position:absolute;
	left:0px;
	width:100%;
	font: bold; font-family:'Indie Flower', cursive;
	text-shadow:#000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px;
	-webkit-font-smoothing: antialiased;
}
	

h1.line01 {
	top:150px;
	color:#F00;
}

h1.line02 {
	top:210px;
	color:#F00;
}

.modalDialog {
	position:fixed;
	font-family:Arial, Helvetica, sans-serif;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background:rgba(0,0,0,0.8);
	z-index:99999;
	opacity:0;
	-webkit-transition:opacity 400ms ease-in;
	-moz-transition:opacity 400ms ease-in;
	transition:opacity 400ms ease-in;
	pointer-events: none;
}

.modalDialog:target {
	opacity:1;
	pointer-events:auto;
}

.modalDialog > div {
	width:400px;
	position:relative;
	margin:10% auto;
	padding:5px 20px 13px 20px;
	border-radius:10px;
	background:#FFF;
	background:-moz-linear-gradient(#FFF, #999);
	background:-webkit-linear-gradient(#FFF, #999);
	background:-o-linear-gradient(#FFF, #999);
}

.close {
	background:#606061;
	color:#FFFFFF;
	line-height:25px;
	position:absolute;
	right:-12px;
	text-align:center;
	top:-10px;
	width:24px;
	text-decoration:none;
	font-weight:bold;
	-webkit-border-radius:12px;
	-moz-border-radius:12px;
	border-radius:12px;
	-moz-box-shadow:1px 1px 3px #000;
	-webkit-box-shadow:1px 1px 3px #000;
	box-shadow:1px 1px 3px #000;
}

.close:hover {
	background:#00D9FF;
}

.display {
	display:none;
}

.active-display {
	display:block;
}

.rand {
	font: bold; font-family:'Indie Flower', cursive;
	color:#F00;
}

.buttons {
	margin:50px 0;
	position:absolute;
	width:100%;
	top:350px;
}

a.restartBtn {
	font-size:larger;
	color:#FFF;
}