.container{
  background-color: #113755;
  width:100vw;
  height:100vh;
  position: absolute;
  overflow:hidden;
}

.mountains{
  height:45em;
  width: 20em;
  background-color: #144569;
  position:absolute;
  left:6.9em;
  bottom: -20.62em;
  transform: rotate(-50deg);
  border: 1px solid #ffffff;
}

.mountains::before{
  content: "";
  position: absolute;
  height: 10.75em;
  width: 31em;
  background-color: #144569;
  left:6.2em;
  bottom: 10.25em;
  transform: rotate(-90deg);
  border-bottom: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
}

.mountains:after{
  content: "";
  position: absolute;
  height:27.25em;
  width:26em;
  background-color: #144569;
  left:17.3em;
  bottom:-12.7em;
  transform: rotate(20deg);
  border-top: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
}

.land{
  height: 5em;
  width :120vw;
  background-color: #041524;
  position: absolute;
  left: -1em;
  bottom:-2.31em;
  transform: rotate(2deg);
}

.moon{
  height: 5.2em;
  width:5.2em;
  background: #ffffff;
  position: absolute;
  left: 5.62em;
  top: 4.4em;
  border-radius: 50%;
  box-shadow: 0 0 0 1em rgba(32,105,149,0.6), 0 0 0 2.25em rgba(32,105,149,0.5), 0 0 0 3.5em rgba(32, 105, 149, 0.4);
}
.moon::before{
  content: "";
  position:absolute;
  background-color: #ebefe7;
  height: 0.75em;
  width: 0.75em;
  border-radius: 50%;
  top:2.75em;
  left:1.5em;
}

.moon:after{
  content: "";
  position:absolute;
  background-color: #ebefe7;
  height: 1.43em;
  width: 1.43em;
  border-radius: 50%;
  top:1.25em;
  left:0.75em;
}

.windmill {
  height: 0;
  width: 3.25em;
  border-bottom: 5.37em solid #041524;;
  border-left: 0.15em solid transparent;
  border-right: 0.15em solid transparent;
  position:absolute;
  right: 6.5em;
  bottom: 0.87em;
}

.windmill::after{
  position:absolute;
  content:"";
  background: #041524;;
  height: 1.62em;
  width:3.25em;
  bottom:-0.06em;
  border-radius: 1.25em 1.25em 0 0;
}

.windmill::before{
  content: "";
  position: absolute;
  width:4em;
  height:0;
  border-bottom: 1.27em solid #0b2231;
  border-left: 0.06em solid transparent;
  border-right: 0.06em solid transparent;
  position: absolute;
  right:-0.45em;
  top:0.06em;
}

.light {
  height: 0.5em;
  width: 0.5em;
  background-color: #8daf76;
  position: absolute;
  top: 2.5em;
  left: 1.5em;
  border-radius:50%;
  box-shadow: 0 0 0.12em 0.24em rgba(141,175,118,0.3), 0 0 0.12em 0.5em rgba(141,175,118,0.2);
}

.light::before{
  content :"";
  position: absolute;
  background-color: #0f304f;
  height: 1em;
  width: 1em;
  bottom:-1.75em;
  left:-0.34em;
  border-radius: 0.5em 0.5em 0 0;
}

.blades {
  height: 5.75em;
  width: 5.75em;
  position: absolute;
  bottom: -2.5em;
  left: -1em;
  animation: spin 5s infinite linear;
}

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

.star,
.star:before,
.star:after{
  height:0.36em;
  width:0.36em;
  background-color: #ffffff;
  position: absolute;
  border-radius: 50%;
  opacity:0.3;
  animation: twinkle 2s infinite;
}

@keyframes twinkle {
  50%{
      opacity:1;
  }
}

.star-1 {
  top:5em;
  left: 18.75em;
}
.star-1:before{
  content:"";
  top: 1.9em;
  left: 16.4em;
  animation-delay: 0.3s;
}
.star-1:after{
  content:"";
  left: 70.25em;
  top: 0.7em;
  animation-delay: 0.4s;
}

.star-2 {
  top: 31em;
  left: 18.75em;
  animation-delay: 0.6s;
}
.star-2:before{
  content:"";
  top: -28em;
  left: 77.4em;
  animation-delay: 1s;
}
.star-2:after{
  content:"";
  top:-27em;
  left: 65.25em;
  animation-delay: 0.7s;
}

.star-3 {
  top: 2em;
  left: 26.75em;
  animation-delay: 1.5s;
}

.star-3:after{
  content:"";
  top: 2em;
  left: 33.25em;
  animation-delay: 1.8s;
}

.star-3:before{
  content:"";
  top: 17em;
  left: 84.25em;
  animation-delay: 0.3s;
}

.star-4 {
  top: 3.5em;
  left: 45.75em;
  animation-delay: 0.6s;
}

.star-4:before{
  content:"";
  top: 1em;
  left: 65.25em;
  animation-delay: 0.9s;
}

.star-4:after{
  content:"";
  top: 10em;
  left: -42.75em;
  animation-delay: 0.7s;
}

.blades::before{
  position: absolute;
  content: "";
  height:100%;
  width:0.75em;
  background: #041524;
  left:2.62em;
}

.blades:after{
  position: absolute;
  content: "";
  height:100%;
  width: 0.75em;
  background-color: #041524;
  left: 2.62em;
  transform: rotate(90deg);
}