* {
	margin:0px;
	padding:0px;
}
.sun-main-box {
	width:100vw;
	height:100vh;
	display:flex;
	justify-content:center;
	align-items:center;
}
.big-box {
	width:240px;
	height:400px;
	border-radius:120px;
	overflow:hidden;
	position:relative;
}
.sky {
	width:630px;
	height:630px;
	border-radius:50%;
	position:absolute;
	top:0%;
	left:50%;
	transform:translateX(-50%);
	animation:skyRotate 10s ease-in-out infinite;
	background:linear-gradient(
          to bottom,rgb(126,208,255),rgb(5,21,114)
        );
}
@keyframes skyRotate {
	40%,50% {
	transform:translateX(-50%) rotate(180deg);
}
90%,100% {
	transform:translateX(-50%) rotate(360deg);
}
}.track {
	width:400px;
	height:400px;
	border-radius:50%;
	/* border:1px solid #9h99;
	*/
        position:absolute;
	top:30%;
	left:50%;
	transform:translateX(-50%) rotate(30deg);
	animation:trackRotate 10s ease-in-out infinite;
}
@keyframes trackRotate {
	40%,50% {
	transform:translateX(-50%) rotate(210deg);
}
90%,100% {
	transform:translateX(-50%) rotate(390deg);
}
}.sun {
	width:50px;
	height:50px;
	border-radius:50%;
	background-color:rgb(253,230,102);
	position:relative;
}
.sun-light {
	border-radius:50%;
	background-color:rgb(253,230,102);
	opacity:0.2;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	animation:sunLight 2s infinite;
}
@keyframes sunLight {
	0% {
	width:50px;
	height:50px;
}
100% {
	width:80px;
	height:80px;
}
}.cloud-box1 {
	width:30px;
	height:10px;
	border-radius:20px;
	background:#fff;
	transform:rotate(-30deg);
	position:absolute;
	top:10px;
	left:80px;
}
.cloud-box1 .cloud-item1 {
	width:20px;
	height:20px;
	border-radius:50%;
	position:absolute;
	bottom:0;
	left:-5px;
	background:#fff;
}
.cloud-box1 .cloud-item2 {
	width:15px;
	height:15px;
	border-radius:50%;
	position:absolute;
	bottom:0px;
	left:10px;
	background:#fff;
}
.cloud-box2 {
	width:40px;
	height:10px;
	border-radius:20px;
	background:#fff;
	transform:rotate(-30deg);
	position:absolute;
	top:30px;
	left:150px;
}
.cloud-box2 .cloud-item1 {
	width:15px;
	height:15px;
	border-radius:50%;
	position:absolute;
	bottom:0;
	left:-5px;
	background:#fff;
}
.cloud-box2 .cloud-item2 {
	width:20px;
	height:20px;
	border-radius:50%;
	position:absolute;
	bottom:1px;
	left:10px;
	background:#fff;
}
.cloud-box2 .cloud-item3 {
	width:10px;
	height:10px;
	border-radius:50%;
	position:absolute;
	bottom:0px;
	left:10px;
	background:#fff;
}
.moon {
	width:50px;
	height:50px;
	border-radius:50%;
	background-color:transparent;
	box-shadow:20px -20px 0px rgb(243,243,243);
	margin-left:100px;
	position:absolute;
	right:20px;
	bottom:0;
}
.star {
	width:2px;
	height:2px;
	border-radius:50%;
	background:#ffffff;
	position:absolute;
	animation:starflashing 2s infinite;
}
.star1 {
	bottom:0;
	right:52px;
}
.star2 {
	bottom:0;
	right:80px;
}
.star3 {
	bottom:10px;
	right:170px;
}
.star4 {
	bottom:20px;
	right:110px;
}
.star5 {
	bottom:30px;
	right:244px;
}
.star6 {
	bottom:45px;
	right:165px;
}
.star7 {
	bottom:14px;
	right:120px;
}
.star8 {
	bottom:84px;
	right:0px;
}
.star9 {
	bottom:4px;
	right:220px;
}
.star10 {
	bottom:-34px;
	right:120px;
}
.star11 {
	bottom:84px;
	right:50px;
}
.star12 {
	bottom:-50px;
	right:52px;
}
.star13 {
	bottom:-50px;
	right:152px;
}
@keyframes starflashing {
	0% {
	filter:brightness(0.3);
}
50% {
	filter:brightness(1);
}
100% {
	filter:brightness(0.3);
}
}.hill1 {
	width:250px;
	height:250px;
	border-radius:30px;
	transform:rotate(45deg);
	position:absolute;
	left:-10%;
	bottom:-70px;
	overflow:hidden;
}
.hill2 {
	width:100px;
	height:100px;
	border-radius:30px;
	transform:rotate(45deg);
	position:absolute;
	left:62%;
	bottom:70px;
	overflow:hidden;
}
.hill-bg {
	width:300px;
	height:300px;
	border-radius:50%;
	position:absolute;
	top:-130px;
	left:-80px;
	animation:hillRotate 10s ease-in-out infinite;
	background:linear-gradient(
          to top,rgb(255,204,108),rgb(226,135,31)
        );
}
@keyframes hillRotate {
	40%,50% {
	transform:rotate(180deg);
}
90%,100% {
	transform:rotate(360deg);
}
}.grassland {
	width:300px;
	height:80px;
	position:absolute;
	left:50%;
	bottom:0;
	border-radius:60%;
	transform:translateX(-50%);
	animation:grasslandChange 10s ease-in-out infinite;
	transition:all 5s;
}
@keyframes grasslandChange {
	0%,100% {
	background:rgb(79,197,105);
}
50% {
	background:rgb(52,153,74);
}
}.tree {
	position:absolute;
	clip-path:polygon(50% 0%,0% 100%,100% 100%);
	animation:treeChange 10s ease-in-out infinite;
	transition:all 5s;
}
@keyframes treeChange {
	0%,100% {
	background:rgb(63,156,50);
}
50% {
	background:rgb(45,143,67);
}
}.tree1 {
	width:20px;
	height:40px;
	bottom:70px;
	left:20px;
}
.tree2 {
	width:40px;
	height:60px;
	bottom:60px;
	left:-10px;
}
.tree3 {
	width:40px;
	height:60px;
	bottom:30px;
	left:50px;
}
.tree4 {
	width:20px;
	height:50px;
	bottom:32px;
	left:90px;
}
.tree5 {
	width:30px;
	height:50px;
	bottom:25px;
	left:70px;
}
.tree6 {
	width:30px;
	height:50px;
	bottom:65px;
	left:120px;
}
.tree7 {
	width:30px;
	height:50px;
	bottom:55px;
	left:140px;
}
.tree8 {
	width:30px;
	height:50px;
	bottom:50px;
	left:180px;
}
.tree9 {
	width:40px;
	height:60px;
	bottom:45px;
	left:195px;
}