*, *:before, *:after{
	box-sizing:border-box;
}

body {
	height:100vh;
	display:grid;
	justify-content:center;
	align-items:center;
	background-color:#D5ECF5;
	animation-name:chameleon;
	animation-duration:2s;
	animation-iteration-count:infinite;
}

.container {
	background-color:#362B48;
	width:50px;
	height:50px;
	transform-origin:center;
	animation:rotate 2s ease-out infinite, colorthang 2s ease forwards infinite,
	roundout 2s ease-out infinite
	;
}

.circle {
	background-color:blue;
	width:50px;
	height:50px;
	position:relative;
}

.circle:nth-child(1){
	left:-100px;
	animation:slidedown 2s ease forwards infinite, roundout 2s ease forwards infinite, 
	colorthang 2s ease forwards infinite;

}

.circle:nth-child(2){
	left:100px;
	top:-50px;
	animation:slideup 2s ease forwards infinite, roundout 2s ease forwards infinite, 
	colorthang 2s ease forwards infinite;

}

@keyframes slidedown{
	
	0%{
		transform:translateY(0px);

	}

	25%{
		transform:translateY(-100px);

	}

	50%{
		transform:translateY(0px);
		
	}

	100%{
		transform:translateY(0px);
		
	}

}

@keyframes slideup{
	
	0%{
		transform:translateY(0px);

	}

	25%{
		transform:translateY(100px);

	}

	50%{
		transform:translateY(0px);
		
	}

	100%{
		transform:translateY(0px);
		
	}

}

@keyframes rotate {
	0%{
		transform:rotate(0deg);

	}

	25%{
		transform:rotate(0deg);

	}

	50%{
		transform:rotate(0deg);
		
	}

	100%{
		transform:rotate(360deg);
		
	}
}

@keyframes roundout {
	0%{
	border-radius: 0 0 0 0

	}

	25%{
	border-radius: 0 0 0 0	

	}

	50%{
	border-radius: 50% 50% 50% 50%	
		
	}

	100%{
	border-radius: 0 0 0 0	
		
	}
}

@keyframes colorthang {
	0%{
	background-color:#362B48;

	}

	25%{
	background-color:#76ACBF;

	}

	50%{
	background-color:#362B48;
		
	}

	100%{
	background-color:#362B48;
		
	}
}

@keyframes chameleon {
	0%{background-color:#D5ECF5;}
	25%{background-color:#D5ECF5;}
	50%{background-color:#655979;}
	100%{background-color:#D5ECF5;}
}

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

.linkki {
	flex:1;
}