*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.scene
{
	position: relative;
	width: 100%;
	height:100vh;
	background: linear-gradient(#111425,#3751e0);
	background-attachment: fixed;
	overflow: hidden;
}
.scene::before {
	content: '';
	position: absolute;
	bottom: -100%;
	left: 0;
	width: 100%;
	height: 250px;
	transition: 0.5s;
	background: linear-gradient(transparent, #fff, #2598f3);

}
.scene.active::before {
	bottom: 0;
}
.scene.active {
	background: linear-gradient(#ffeb3b,#ff9800);
}

.space {
	position: relative;
	width: 100%;
	height:70vh;
	background: transparent;
	background-attachment: fixed;
	overflow: hidden;
}


.moon
{
	position: absolute;
	top: 100px;
	left: 400px;
	width: 100px;
	height: 100px;
	background: #fff;
	border-radius: 50%;
	transition: 0.5s;
	z-index: 100;
	cursor: pointer;
}
.scene.active .moon  {
	left: 200px;
	box-shadow: 0 0 0 20px rgba(255,255,255, 0.5 ),
	 			0 0 0 40px rgba(255,255,255, 0.5 ),
	 			0 0 0 60px rgba(255,255,255, 0.3 ),
	 			0 0 0 80px rgba(255,255,255, 0.3 ),
	 			0 0 0 100px rgba(255,255,255, 0.2 ),
	 			0 0 0 300px rgba(255,255,255, 0.1 );
}
.moon::before
{
	content: '';
	position: absolute;
	top: -20px;
	left: 20px;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: linear-gradient(#111425,#3751e0);
	background-attachment: fixed;
}
.scene.active .moon::before {
	opacity: 0;
}
.forest
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	transform: scale(1.2);
	z-index: 100;
	transition: 0.5s;
}

.scene.active .forest {
	bottom: -100%
}

.scene span
{
	position: absolute;
	background: #fff;
	border-radius: 50%;
	animation: animate linear infinite;
}
.scene.active span {
	display: none;
}
.bg {
	position: absolute;
	bottom: 0;
	max-width: 100%;
	transition: 0.5s;
	z-index: 1000;
	transform: translateY(100%)
}
.scene.active .bg {
	transform: translateY(0)
}
.cloud1 {
	position: absolute;
	max-width: 600px;
	top: 20px;
	z-index: 2000;
	animation: animateCloud 50s linear infinite;
	
}
.cloud2 {
	position: absolute;
	max-width: 600px;
	top: 40px;
	left: 0;
	z-index: 2000;
	animation: animateCloud 35s linear infinite;
	
}
.cloud3 {
	position: absolute;
	max-width: 600px;
	top: 60px;
	left: 0;
	z-index: 2000;
	animation: animateCloud 60s linear infinite;
	animation-delay: -12s;
	
}
.cloud4 {
	position: absolute;
	max-width: 500px;
	top: 20px;
	left: 0;
	z-index: 2000;
	animation: animateCloud 24s linear infinite;
	animation-delay: -25s;
	
}
.cloud5 {
	position: absolute;
	max-width: 600px;
	top: 200px;
	left: 0;
	z-index: 2000;
	animation: animateCloud 45s linear infinite;
	animation-delay: -25s;
}
.cloud6 {
	position: absolute;
	max-width: 600px;
	top: 150px;
	left:0;
	z-index: 2000;
	animation: animateCloud 44s linear infinite;
	animation-delay: -5s;
	
}
@keyframes animate
{
	0%
	{
		opacity: 0;
		transform: translateY(0px);
	}
	10%, 90%
	{
		opacity: 1;
	}
	100%
	{
		opacity: 0;
		transform: translateY(-100px);
	}
}

@keyframes animateCloud
{
	0%
	{
		transform: translateX(-100%) scale(1);
	}
	100% {
		transform: translateX(400%) scale(1.5);
	
	}
}
img {
	pointer-events: none;
}

.descr {
	position: absolute;
	top: 80%;
	left: 50%;
	font-size: 36px;
	border: 2px solid blue;
	border-radius: 20px;	
	padding: 10px;
	color:#fff;
	z-index: 1001;
	transition: 0.5s;
}

.scene.active .descr {
	color:blue;
	left: 5%;
}

@media screen and (max-width: 480px)
 {
	.space {
		height:90vh;
	}
	.descr {
		font-size: 16px;
		left: 25%;
	}
	.moon {
		left: 250px;
	}
	.scene.active .moon {
		left : 100px;
	}
}