html, body {
	margin:0;
	height:100%;
}

.flex-eclipse-item {
    height:30vh;
}

.flex-eclipse-container {
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:center;
    align-content:center;
    align-items:center;
    height:100%;
}


.eclipse-background {
	animation:backgroundkeyframes:200s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
	-webkit-animation: backgroundkeyframes 200s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-fuction:linear;
	min-height:100%;
	min-width:100%;
	margin:0;
}

.sun {
	animation:circlekeyframes:140s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
	-webkit-animation: circlekeyframes 140s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-fuction:linear;
    width:40vh;
    height:40vh;
    border-radius:50%;
    position: relative;
}

.moon {
	animation:backgroundkeyframes:200s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
	-webkit-animation: backgroundkeyframes 200s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-fuction:linear;
	position: absolute;
	bottom: -20%;
	left: -20%;
    width:40vh;
    height:40vh;
    border-radius:50%;
}

@keyframes circlekeyframes
{
	0%	{background:#FF5858;}
	10%	{background:#FF6C58;}
	20%	{background:#FF8A58;}
	30%	{background:#FF7E46;}
	40%	{background:#F26A07;}
	50%	{background:#E35F00;}
	60%	{background:#FF6A29;}
	70%	{background:#FF6E40;}
	80%	{background:#FF8F60;}
	90%	{background:#F57474;} 	
	100%{background:#FF5858;} 	
}
@-webkit-keyframes circlekeyframes
{
	0%	{background:#FF5858;}
	10%	{background:#FF6C58;}
	20%	{background:#FF8A58;}
	30%	{background:#FF7E46;}
	40%	{background:#F26A07;}
	50%	{background:#E35F00;}
	60%	{background:#FF6A29;}
	70%	{background:#FF6E40;}
	80%	{background:#FF8F60;}
	90%	{background:#F57474;} 	
	100%{background:#FF5858;} 			
}

@keyframes backgroundkeyframes
{
	0%	{background:#FF5858;}
	10%	{background:#FF586C;}
	20%	{background:#FF51AF;}
	30%	{background:#EC3ADA;}
	40%	{background:#D53BE2;}
	50%	{background:#B004ED;}
	60%	{background:#9E00E8;}
	70%	{background:#C700E8;}
	80%	{background:#ED2BDA;}
	90%	{background:#ED2BA0;} 	
	100%{background:#FF5858;}  			
}
@-webkit-keyframes backgroundkeyframes
{
	0%	{background:#FF5858;}
	10%	{background:#FF586C;}
	20%	{background:#FF51AF;}
	30%	{background:#EC3ADA;}
	40%	{background:#D53BE2;}
	50%	{background:#B004ED;}
	60%	{background:#9E00E8;}
	70%	{background:#C700E8;}
	80%	{background:#ED2BDA;}
	90%	{background:#ED2BA0;} 	
	100%{background:#FF5858;}  		
}