article,aside,details,figcaption,figure,footer,header,hgroup,hr,menu,nav,section{display:block}a,hr{padding:0}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}ins,mark{background-color:#ff9;color:#000}body{line-height:1}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;font-size:100%;vertical-align:baseline;background:0 0}ins{text-decoration:none}mark{font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}


html {
	width: 100%;
	height: 100%;
	}

	body {
	width: 100%;
	height: 100%;
	background-color: black;
	animation: border 12s ease-in-out 2s infinite;
	animation-delay: 3s;
	border: 0px solid black;
	box-sizing: border-box;
	overflow: hidden;
	}

#kuva {
	background-image: url("images/spiral.jpg");
	background-position: center;
	background-size: 100%;
	opacity: 0.0;
	width: 300%;
	height: 300%;
	animation: spiraaliesiin 6s ease-in-out 5s forwards, rotation 70s infinite linear;
	position: absolute;
	top: -100%;
	left: -100%;
	overflow: hidden;
}

.boksi {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.tekstit {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
	
	nav {
		display: flex;
		align-self: flex-start;
		justify-self: center;
		position: fixed;
		margin: 30px;
		font-family: monospace;
		font-size: 1.2em;
		}

		#choose {
			display: flex;
			flex-direction: row;
		}

		li {
			margin-left: 10px;
			margin-right: 10px;
			list-style: none;
		}

#choose a {
	color: black;
}

#read {
	color: lightcyan;
}

.boksi .teksti1 {
	color: white;
	font-family: monospace;
	font-size: 50px;
	opacity: 0.0;
	margin: 20px;
	animation: teksti 12s alternate infinite;
	animation-delay: 2s;
	text-shadow: 0px 0px 3px white;
}


.boksi .teksti2 {
	color: white;
	font-family: monospace;
	font-size: 50px;
	opacity: 0.0;
	margin: 20px;
	animation: teksti 12s alternate infinite;
	animation-delay: 8s;
	text-shadow: 0px 0px 3px white;
}

.welcome {
		justify-self: center;
		align-self: center;
		position: absolute;
		margin-bottom: 150px;
		border-right: .15em solid white;
		font-size: 30px;
		font-family: monospace;
		padding-right: 10px;
		color: white;
		opacity: 1;
		animation: fade 5s ease-out 2s forwards, blink-caret .75s step-end infinite;
		text-shadow: 1px 1px 4px white;
		}

.linkit {
	position: absolute;
	top:50%;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
}

.linkki {
	flex: 1;
}

.linkki:nth-child(1) {
cursor: w-resize;
}

.linkki:nth-child(2) {
cursor: e-resize;
}

#rocket {
	position: fixed;
	transform: rotate(90deg);
	width: 3%;
	top: 8%;
	left: -20%;
	animation: rakettiy 35s ease-in 5s infinite;
	animation-delay: 8s;
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: white;}
}
@keyframes spiraaliesiin {
	100% {
		opacity: 1.0;
	}
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

@keyframes fade {
100% {opacity: 0;
}
}

@keyframes border {
  50% {
    border: 40px solid;
  }

}
@keyframes teksti {
50% {
    opacity: 0.0;
}
50% {
	opacity: 1.0;
}
}

@keyframes rakettiy{
 from {left: -20%;} 
    to{left: 900%;}
   }
}