*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

Body
{
	display: flex;
	justify-content: center;
	align-items: center;

	width: 100%;
	height: 100vh;
	background: linear-gradient(-45deg, salmon, paleturquoise, #1c4966, purple);
	background-size: 400% 400%;
	background-position: 0 0;
	position: relative;
	animation: change 10s ease-in-out infinite;
	overflow: hidden;
}

.planet1 {
	position: relative;
	animation: rotate 10s ease-in-out infinite;
}
@keyframes rotate
{
	0%,100%
	{
		transform: rotateX(90deg) rotateZ(0deg) perspective(0);
	}
	50%
	{
		transform: rotateX(90deg) rotateZ(360deg) perspective(0);
	}
}


.wave
{
	position: relative;
	width: 600px;
	height: 600px;
	transform-style: preserve-3d;
	transform: perspective(700px) rotateX(70deg);
}

.wave span 
{
	position: absolute;
	display: block;
	border: 5px solid #fff;
	box-shadow: 0 5px 0 #ccc,
			inset 0 5px 0 #ccc;
	box-sizing: border-box;
	border-radius: 50%;
	animation: animate 3s ease-in-out infinite;

}
.centering {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
}

@keyframes animate
{
	0%,100%
	{
		transform: translateZ(-100px);
	}
	50%
	{
		transform: translateZ(100px);
	}
}


.wave span:nth-child(1)
{
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	animation-delay: 1.4s;
}

.wave span:nth-child(2)
{
	top: 10px;
	left: 10px;
	bottom: 10px;
	right: 10px;
	animation-delay: 1.3s;


}

.wave span:nth-child(3)

{
	top: 20px;
	left: 20px;
	bottom: 20px;
	right: 20px;
	animation-delay: 1.2s;

}


@keyframes change {
	0%
	{
		background-position: 0 50%;
	}
	50%
	{
		background-position: 100% 50%;
	}
	100%
	{
		background-position: 0 50%;
	}
}

.linkit{

position: absolute;
top:0;
left:0;
width:100vw;
height:100vh;
display: flex;
		
}

.linkki {
	flex:1;
}

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

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