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 9s ease-in-out 2s infinite;
	border: 0px solid black;
	box-sizing: border-box;
	overflow: hidden;
	}

#kuva2 {
	background-image: url("images/spiral2.jpg");
	background-position: center;
	background-size: 50%;
	opacity: 0.0;
	width: 270%;
	height: 270%;
	animation: spiraaliesiin 2s ease-in-out 1s forwards, rotation 70s infinite linear;
	position: absolute;
	top: -75%;
	left: -85%;
	overflow: hidden;
}

#kuva3 {
	background-image: url("images/spiral4.jpg");
	background-position: center;
	background-size: 45%;
	opacity: 0.0;
	width: 270%;
	height: 270%;
	animation: spiraaliesiin 2s ease-in-out 1s forwards, rotation 70s infinite linear;
	position: absolute;
	top: -75%;
	left: -85%;
	overflow: hidden;
}

#kuva4, #kuvam {
	background-image: url("images/spiral3.jpg");
	background-position: center;
	background-size: 50%;
	opacity: 0.0;
	width: 300%;
	height: 300%;
	animation: spiraaliesiin 2s ease-in-out 1s forwards, rotation 70s infinite linear;
	position: absolute;
	top: -85%;
	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;
font-family: monospace;
color: white;
align-items: center;
justify-content: center;
flex-wrap: wrap;
font-size: 1.2em;
text-align: center;
line-height: 1.4em;
}
	
	nav {
		display: flex;
		align-self: flex-start;
		justify-self: center;
		position: fixed;
		margin: 30px;
		font-family: monospace;
		color: white;
		opacity: 0;
		animation: teksti 3s forwards;
		animation-delay: 2s;
		}

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

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

a {
	color: white;
}

#rocket {
	position: fixed;
	width: 5%;
	top: 20%;
	left: 4%;
	animation: rakettiy 3s forwards, raket 0.65s alternate infinite;
}

#rocketwin {
	position: absolute;
	width: 12%;
		top: 50%;
		left: 43%;
	animation: raket 0.65s alternate infinite;
}

#win
{
	margin-bottom: 20vh;
}
.linkit {
	position: absolute;
	top:25%;
	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;
}

@keyframes spiraaliesiin {
	100% {
		opacity: 1.0;
	}
}

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

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

}

@keyframes teksti {
100% {
    opacity: 1.0;
}
}

@keyframes raket {
    from {
    transform: rotate(-4deg);
  }
  to {
    transform: rotate(4deg);
  } 
}

@keyframes rakettiy {
    from {top: 120%;} 
    to{top: 8%} 
   }
}