* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body * {
  position: absolute;
}

.sky {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at bottom, #559 -150%, transparent 80%), radial-gradient(#003, #002);
  z-index: -2;
}

.moon {
  right: 5%;
  top: 2em;
  width: 85px;
  height: 150px;
  transform: rotate(-30deg);
  z-index: -1;
}
.moon:before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  background-color: #ffb;
  border-radius: 150px 0 0 150px;
}
.moon:after {
  content: "";
  position: absolute;
  left: 50%;
  width: 200%;
  top: -10%;
  height: 120%;
  background: linear-gradient(90deg, #002 50%, rgba(0, 0, 0, 0));
  border-radius: 150px 0 0 150px;
}

.dot {
  background-color: #fff;
  width: 2px;
  height: 2px;
  border-radius: 2px;
  -webkit-animation: opacityPulse infinite 4s ease-out;
          animation: opacityPulse infinite 4s ease-out;
  opacity: 0;
}
.dot:nth-child(1) {
  top: 74%;
  left: 47%;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(0.09);
}
.dot:nth-child(2) {
  top: 4%;
  left: 45%;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(0.96);
}
.dot:nth-child(3) {
  top: 18%;
  left: 19%;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(0.33);
}
.dot:nth-child(4) {
  top: 18%;
  left: 14%;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(0.91);
}
.dot:nth-child(5) {
  top: 71%;
  left: 2%;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(1.17);
}
.dot:nth-child(6) {
  top: 43%;
  left: 65%;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(0.83);
}
.dot:nth-child(7) {
  top: 56%;
  left: 39%;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(0.38);
}
.dot:nth-child(8) {
  top: 62%;
  left: 42%;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(1.02);
}
.dot:nth-child(9) {
  top: 20%;
  left: 92%;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(0.27);
}
.dot:nth-child(10) {
  top: 8%;
  left: 97%;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(0.6);
}
.dot:nth-child(11) {
  top: 70%;
  left: 88%;
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(0.11);
}
.dot:nth-child(12) {
  top: 55%;
  left: 39%;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(0.64);
}
.dot:nth-child(13) {
  top: 28%;
  left: 14%;
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(0.38);
}
.dot:nth-child(14) {
  top: 51%;
  left: 74%;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(1.3);
}
.dot:nth-child(15) {
  top: 10%;
  left: 41%;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(0.74);
}
.dot:nth-child(16) {
  top: 20%;
  left: 43%;
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(1.18);
}
.dot:nth-child(17) {
  top: 3%;
  left: 7%;
  -webkit-animation-delay: 1.7s;
          animation-delay: 1.7s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(1.29);
}
.dot:nth-child(18) {
  top: 35%;
  left: 20%;
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(0.72);
}
.dot:nth-child(19) {
  top: 40%;
  left: 26%;
  -webkit-animation-delay: 1.9s;
          animation-delay: 1.9s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(1.25);
}
.dot:nth-child(20) {
  top: 45%;
  left: 35%;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(0.95);
}
.dot:nth-child(21) {
  top: 13%;
  left: 2%;
  -webkit-animation-delay: 2.1s;
          animation-delay: 2.1s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(0.28);
}
.dot:nth-child(22) {
  top: 53%;
  left: 9%;
  -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(0.87);
}
.dot:nth-child(23) {
  top: 54%;
  left: 14%;
  -webkit-animation-delay: 2.3s;
          animation-delay: 2.3s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(1.3);
}
.dot:nth-child(24) {
  top: 54%;
  left: 73%;
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(0.62);
}
.dot:nth-child(25) {
  top: 50%;
  left: 76%;
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(0.4);
}
.dot:nth-child(26) {
  top: 56%;
  left: 37%;
  -webkit-animation-delay: 2.6s;
          animation-delay: 2.6s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(0.19);
}
.dot:nth-child(27) {
  top: 36%;
  left: 9%;
  -webkit-animation-delay: 2.7s;
          animation-delay: 2.7s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(0.34);
}
.dot:nth-child(28) {
  top: 15%;
  left: 84%;
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(0.76);
}
.dot:nth-child(29) {
  top: 16%;
  left: 93%;
  -webkit-animation-delay: 2.9s;
          animation-delay: 2.9s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(0.93);
}
.dot:nth-child(30) {
  top: 10%;
  left: 48%;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  transform: scale(0.16);
}

.star {
  width: 0;
  height: 0;
  border-right: 3px solid transparent;
  border-bottom: 7px solid #fe3;
  border-left: 3px solid transparent;
  transform: scale(0.8) rotate(-3deg);
  -webkit-animation: starDance infinite alternate 8s ease-out;
          animation: starDance infinite alternate 8s ease-out;
}
.star:before, .star:after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  top: 6px;
  left: -10px;
  border-right: 10px solid transparent;
  border-bottom: 7px solid #fe3;
  border-left: 10px solid transparent;
  transform: rotate(-32deg);
}
.star:after {
  transform: rotate(32deg);
}
.star .center {
  background-color: #fe3;
  border-radius: 10px;
  width: 10px;
  height: 10px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 5px);
  position: absolute;
}
.star .center:before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 20px;
  box-shadow: 0 0 7px #fe3, 0 0 15px #fe3;
}

.star-wrap:nth-child(31) {
  top: 8%;
  left: 7%;
  transform: scale(1.41) rotate(-20deg);
}
.star-wrap:nth-child(31) .star {
  -webkit-animation-delay: 312ms;
          animation-delay: 312ms;
}

.star-wrap:nth-child(32) {
  top: 25%;
  left: 22%;
  transform: scale(1.91) rotate(-30deg);
}
.star-wrap:nth-child(32) .star {
  -webkit-animation-delay: 996ms;
          animation-delay: 996ms;
}

.star-wrap:nth-child(33) {
  top: 65%;
  left: 28%;
  transform: scale(2.17) rotate(-10deg);
}
.star-wrap:nth-child(33) .star {
  -webkit-animation-delay: 1206ms;
          animation-delay: 1206ms;
}

.star-wrap:nth-child(34) {
  top: 1%;
  left: 38%;
  transform: scale(1.78) rotate(-20deg);
}
.star-wrap:nth-child(34) .star {
  -webkit-animation-delay: 1464ms;
          animation-delay: 1464ms;
}

.star-wrap:nth-child(35) {
  top: 65%;
  left: 49%;
  transform: scale(1.76) rotate(10deg);
}
.star-wrap:nth-child(35) .star {
  -webkit-animation-delay: 2130ms;
          animation-delay: 2130ms;
}

.star-wrap:nth-child(36) {
  top: 40%;
  left: 61%;
  transform: scale(2.12) rotate(-10deg);
}
.star-wrap:nth-child(36) .star {
  -webkit-animation-delay: 2484ms;
          animation-delay: 2484ms;
}

.star-wrap:nth-child(37) {
  top: 18%;
  left: 77%;
  transform: scale(1.44) rotate(-30deg);
}
.star-wrap:nth-child(37) .star {
  -webkit-animation-delay: 1680ms;
          animation-delay: 1680ms;
}

.shooting-star-path {
  width: 120%;
  margin-left: -60%;
  left: 50%;
  height: 2px;
}
.shooting-star-path .shooting-star {
  background: linear-gradient(to left, rgba(255, 255, 255, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  width: 60px;
  height: 1px;
  left: -10%;
  border-radius: 2px;
  -webkit-animation: shootingStar infinite 140s ease-in;
          animation: shootingStar infinite 140s ease-in;
}
.shooting-star-path:nth-child(38) {
  top: 58%;
  transform: rotate(11deg);
}
.shooting-star-path:nth-child(38) .shooting-star {
  transform: scale(1.95);
  -webkit-animation-delay: 9s;
          animation-delay: 9s;
}
.shooting-star-path:nth-child(39) {
  top: 40%;
  transform: rotate(-24deg);
}
.shooting-star-path:nth-child(39) .shooting-star {
  transform: scale(1.77);
  -webkit-animation-delay: 16s;
          animation-delay: 16s;
}
.shooting-star-path:nth-child(40) {
  top: 10%;
  transform: rotate(-5deg);
}
.shooting-star-path:nth-child(40) .shooting-star {
  transform: scale(1.23);
  -webkit-animation-delay: 30s;
          animation-delay: 30s;
}
.shooting-star-path:nth-child(41) {
  top: 29%;
  transform: rotate(0deg);
}
.shooting-star-path:nth-child(41) .shooting-star {
  transform: scale(2.14);
  -webkit-animation-delay: 37s;
          animation-delay: 37s;
}
.shooting-star-path:nth-child(42) {
  top: 62%;
  transform: rotate(24deg);
}
.shooting-star-path:nth-child(42) .shooting-star {
  transform: scale(2.08);
  -webkit-animation-delay: 48s;
          animation-delay: 48s;
}
.shooting-star-path:nth-child(43) {
  top: 31%;
  transform: rotate(-14deg);
}
.shooting-star-path:nth-child(43) .shooting-star {
  transform: scale(2);
  -webkit-animation-delay: 59s;
          animation-delay: 59s;
}
.shooting-star-path:nth-child(44) {
  top: 53%;
  transform: rotate(-28deg);
}
.shooting-star-path:nth-child(44) .shooting-star {
  transform: scale(1.81);
  -webkit-animation-delay: 68s;
          animation-delay: 68s;
}

.wind {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
}
.wind path {
  stroke: #fff;
  opacity: 0.3;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  -webkit-animation: dash 7s ease-in forwards infinite;
          animation: dash 7s ease-in forwards infinite;
}
.wind path:nth-child(1) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.wind path:nth-child(2) {
  -webkit-animation-delay: 11s;
          animation-delay: 11s;
}
.wind path:nth-child(3) {
  -webkit-animation-delay: 16s;
          animation-delay: 16s;
}
.wind path:nth-child(4) {
  -webkit-animation-delay: 22s;
          animation-delay: 22s;
}
.wind path:nth-child(5) {
  -webkit-animation-delay: 29s;
          animation-delay: 29s;
}
.wind path:nth-child(6) {
  -webkit-animation-delay: 34s;
          animation-delay: 34s;
}

.bat {
  top: 50%;
  left: 105%;
  transform: translate(-50%);
  width: 1em;
  height: 1.2em;
  -webkit-animation: 4s infinite alternate ease-in-out;
          animation: 4s infinite alternate ease-in-out;
  font-size: 7px;
}
.bat, .bat *, .bat :before, .bat :after {
  position: absolute;
}
.bat__head {
  background: #222;
  width: 100%;
  height: 100%;
  border-radius: 2em;
}
.bat__eye {
  background: radial-gradient(#fc0 15%, #c80 40%);
  width: 0.2em;
  height: 0.2em;
  border-radius: 1em;
  left: 18%;
  bottom: 50%;
}
.bat__eye + .bat__eye {
  left: auto;
  right: 18%;
}
.bat__wing {
  width: 4em;
  height: 1.6em;
  right: 50%;
  bottom: 20%;
  background: #222;
  -webkit-clip-path: polygon(65% 59%, 39% 53%, 33% 33%, 10% 22%, 0 0, 70% 0, 100% 65%, 100% 100%);
          clip-path: polygon(65% 59%, 39% 53%, 33% 33%, 10% 22%, 0 0, 70% 0, 100% 65%, 100% 100%);
  z-index: -1;
  transform-origin: 100%;
  -webkit-animation: wing 0.15s infinite alternate ease-in-out;
          animation: wing 0.15s infinite alternate ease-in-out;
}
.bat__wing + .bat__wing {
  left: 50%;
  right: auto;
  -webkit-clip-path: polygon(0% 100%, 0 65%, 30% 0, 100% 0%, 91% 22%, 66% 33%, 61% 53%, 35% 59%);
          clip-path: polygon(0% 100%, 0 65%, 30% 0, 100% 0%, 91% 22%, 66% 33%, 61% 53%, 35% 59%);
  -webkit-animation: wing 0.15s 0.15s infinite alternate ease-in-out;
          animation: wing 0.15s 0.15s infinite alternate ease-in-out;
  transform-origin: 0;
}

@-webkit-keyframes wing {
  0% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(-30deg);
  }
}

@keyframes wing {
  0% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(-30deg);
  }
}
.bat:nth-child(1) {
  -webkit-animation-name: fly-1;
          animation-name: fly-1;
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

@-webkit-keyframes fly-1 {
  0% {
    top: 73vw;
    left: 15vw;
    transform: translate(0, 0);
  }
  20% {
    transform: translate(5vw, 4vh);
  }
  40% {
    transform: translate(-9vw, -7vh);
  }
  60% {
    transform: translate(5vw, 7vh);
  }
  80% {
    transform: translate(-3vw, 10vh);
  }
  100% {
    transform: translate(-5vw, 0);
    top: 38vh;
  }
}

@keyframes fly-1 {
  0% {
    top: 73vw;
    left: 15vw;
    transform: translate(0, 0);
  }
  20% {
    transform: translate(5vw, 4vh);
  }
  40% {
    transform: translate(-9vw, -7vh);
  }
  60% {
    transform: translate(5vw, 7vh);
  }
  80% {
    transform: translate(-3vw, 10vh);
  }
  100% {
    transform: translate(-5vw, 0);
    top: 38vh;
  }
}
.bat:nth-child(2) {
  -webkit-animation-name: fly-2;
          animation-name: fly-2;
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

@-webkit-keyframes fly-2 {
  0% {
    top: 35vw;
    left: 61vw;
    transform: translate(0, 0);
  }
  20% {
    transform: translate(0vw, 1vh);
  }
  40% {
    transform: translate(-2vw, 10vh);
  }
  60% {
    transform: translate(6vw, 10vh);
  }
  80% {
    transform: translate(-3vw, 3vh);
  }
  100% {
    transform: translate(0vw, 0);
    top: 64vh;
  }
}

@keyframes fly-2 {
  0% {
    top: 35vw;
    left: 61vw;
    transform: translate(0, 0);
  }
  20% {
    transform: translate(0vw, 1vh);
  }
  40% {
    transform: translate(-2vw, 10vh);
  }
  60% {
    transform: translate(6vw, 10vh);
  }
  80% {
    transform: translate(-3vw, 3vh);
  }
  100% {
    transform: translate(0vw, 0);
    top: 64vh;
  }
}
.bat:nth-child(3) {
  -webkit-animation-name: fly-3;
          animation-name: fly-3;
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes fly-3 {
  0% {
    top: 49vw;
    left: 46vw;
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-2vw, 4vh);
  }
  40% {
    transform: translate(-1vw, -5vh);
  }
  60% {
    transform: translate(2vw, 10vh);
  }
  80% {
    transform: translate(5vw, 1vh);
  }
  100% {
    transform: translate(-5vw, 0);
    top: 36vh;
  }
}

@keyframes fly-3 {
  0% {
    top: 49vw;
    left: 46vw;
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-2vw, 4vh);
  }
  40% {
    transform: translate(-1vw, -5vh);
  }
  60% {
    transform: translate(2vw, 10vh);
  }
  80% {
    transform: translate(5vw, 1vh);
  }
  100% {
    transform: translate(-5vw, 0);
    top: 36vh;
  }
}
.bat:nth-child(4) {
  -webkit-animation-name: fly-4;
          animation-name: fly-4;
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

@-webkit-keyframes fly-4 {
  0% {
    top: 90vw;
    left: 12vw;
    transform: translate(0, 0);
  }
  20% {
    transform: translate(10vw, 6vh);
  }
  40% {
    transform: translate(3vw, 4vh);
  }
  60% {
    transform: translate(-4vw, 2vh);
  }
  80% {
    transform: translate(-2vw, 0vh);
  }
  100% {
    transform: translate(6vw, 0);
    top: 20vh;
  }
}

@keyframes fly-4 {
  0% {
    top: 90vw;
    left: 12vw;
    transform: translate(0, 0);
  }
  20% {
    transform: translate(10vw, 6vh);
  }
  40% {
    transform: translate(3vw, 4vh);
  }
  60% {
    transform: translate(-4vw, 2vh);
  }
  80% {
    transform: translate(-2vw, 0vh);
  }
  100% {
    transform: translate(6vw, 0);
    top: 20vh;
  }
}
.bat:nth-child(5) {
  -webkit-animation-name: fly-5;
          animation-name: fly-5;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

@-webkit-keyframes fly-5 {
  0% {
    top: 13vw;
    left: 79vw;
    transform: translate(0, 0);
  }
  20% {
    transform: translate(2vw, -8vh);
  }
  40% {
    transform: translate(8vw, 9vh);
  }
  60% {
    transform: translate(10vw, 5vh);
  }
  80% {
    transform: translate(-1vw, 8vh);
  }
  100% {
    transform: translate(9vw, 0);
    top: 46vh;
  }
}

@keyframes fly-5 {
  0% {
    top: 13vw;
    left: 79vw;
    transform: translate(0, 0);
  }
  20% {
    transform: translate(2vw, -8vh);
  }
  40% {
    transform: translate(8vw, 9vh);
  }
  60% {
    transform: translate(10vw, 5vh);
  }
  80% {
    transform: translate(-1vw, 8vh);
  }
  100% {
    transform: translate(9vw, 0);
    top: 46vh;
  }
}
.bat:nth-child(6) {
  -webkit-animation-name: fly-6;
          animation-name: fly-6;
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}

@-webkit-keyframes fly-6 {
  0% {
    top: 82vw;
    left: 89vw;
    transform: translate(0, 0);
  }
  20% {
    transform: translate(10vw, 8vh);
  }
  40% {
    transform: translate(-9vw, 4vh);
  }
  60% {
    transform: translate(7vw, -1vh);
  }
  80% {
    transform: translate(-4vw, -1vh);
  }
  100% {
    transform: translate(5vw, 0);
    top: 46vh;
  }
}

@keyframes fly-6 {
  0% {
    top: 82vw;
    left: 89vw;
    transform: translate(0, 0);
  }
  20% {
    transform: translate(10vw, 8vh);
  }
  40% {
    transform: translate(-9vw, 4vh);
  }
  60% {
    transform: translate(7vw, -1vh);
  }
  80% {
    transform: translate(-4vw, -1vh);
  }
  100% {
    transform: translate(5vw, 0);
    top: 46vh;
  }
}
.bat:nth-child(7) {
  -webkit-animation-name: fly-7;
          animation-name: fly-7;
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}

@-webkit-keyframes fly-7 {
  0% {
    top: 29vw;
    left: 75vw;
    transform: translate(0, 0);
  }
  20% {
    transform: translate(2vw, -8vh);
  }
  40% {
    transform: translate(2vw, 0vh);
  }
  60% {
    transform: translate(-7vw, -4vh);
  }
  80% {
    transform: translate(4vw, 4vh);
  }
  100% {
    transform: translate(4vw, 0);
    top: 28vh;
  }
}

@keyframes fly-7 {
  0% {
    top: 29vw;
    left: 75vw;
    transform: translate(0, 0);
  }
  20% {
    transform: translate(2vw, -8vh);
  }
  40% {
    transform: translate(2vw, 0vh);
  }
  60% {
    transform: translate(-7vw, -4vh);
  }
  80% {
    transform: translate(4vw, 4vh);
  }
  100% {
    transform: translate(4vw, 0);
    top: 28vh;
  }
}
.bat:nth-child(8) {
  -webkit-animation-name: fly-8;
          animation-name: fly-8;
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}

@-webkit-keyframes fly-8 {
  0% {
    top: 8vw;
    left: 48vw;
    transform: translate(0, 0);
  }
  20% {
    transform: translate(5vw, 1vh);
  }
  40% {
    transform: translate(-8vw, 4vh);
  }
  60% {
    transform: translate(-4vw, -5vh);
  }
  80% {
    transform: translate(3vw, -4vh);
  }
  100% {
    transform: translate(4vw, 0);
    top: 22vh;
  }
}

@keyframes fly-8 {
  0% {
    top: 8vw;
    left: 48vw;
    transform: translate(0, 0);
  }
  20% {
    transform: translate(5vw, 1vh);
  }
  40% {
    transform: translate(-8vw, 4vh);
  }
  60% {
    transform: translate(-4vw, -5vh);
  }
  80% {
    transform: translate(3vw, -4vh);
  }
  100% {
    transform: translate(4vw, 0);
    top: 22vh;
  }
}
.ground {
  background: linear-gradient(#220, #000, #110);
  bottom: 0;
  left: 0;
  right: 0;
  height: 16%;
}

.bundle-of-grass {
  transform-origin: 0% 100%;
  width: 10px;
  height: 70px;
  left: 10%;
}
.bundle-of-grass .grass {
  transform-origin: 100% 100%;
  right: 0;
  width: 50px;
  height: 70px;
}
.bundle-of-grass .grass:nth-child(2) {
  transform: rotate(20deg);
}
.bundle-of-grass .grass:nth-child(3) {
  transform: rotate(-10deg);
}
.bundle-of-grass .grass:before {
  content: "";
  position: absolute;
  right: 0;
  width: 50px;
  height: 70px;
  border: solid 6px #001420;
  border-color: transparent #001420 transparent transparent;
  border-radius: 0 50%/1px 70px 0;
  transform-origin: 100% 100%;
  -webkit-animation: grassDance 8s infinite alternate ease-in-out;
          animation: grassDance 8s infinite alternate ease-in-out;
}
.bundle-of-grass:nth-child(1) {
  left: 5%;
  bottom: 69%;
  transform: scale(0.71);
}
.bundle-of-grass:nth-child(1) .grass:before {
  border-radius: 0 50%/1px 22px 0;
}
.bundle-of-grass:nth-child(2) {
  left: 15%;
  bottom: 33%;
  transform: scale(0.61);
}
.bundle-of-grass:nth-child(2) .grass:before {
  border-radius: 0 50%/1px 26px 0;
}
.bundle-of-grass:nth-child(3) {
  left: 25%;
  bottom: 75%;
  transform: scale(0.99);
}
.bundle-of-grass:nth-child(3) .grass:before {
  border-radius: 0 50%/1px 48px 0;
}
.bundle-of-grass:nth-child(4) {
  left: 35%;
  bottom: 43%;
  transform: scale(0.88);
}
.bundle-of-grass:nth-child(4) .grass:before {
  border-radius: 0 50%/1px 24px 0;
}
.bundle-of-grass:nth-child(5) {
  left: 45%;
  bottom: 92%;
  transform: scale(0.62);
}
.bundle-of-grass:nth-child(5) .grass:before {
  border-radius: 0 50%/1px 10px 0;
}
.bundle-of-grass:nth-child(6) {
  left: 51%;
  bottom: 60%;
  transform: scale(1.14);
}
.bundle-of-grass:nth-child(6) .grass:before {
  border-radius: 0 50%/1px 31px 0;
}
.bundle-of-grass:nth-child(7) {
  left: 62%;
  bottom: 51%;
  transform: scale(0.76);
}
.bundle-of-grass:nth-child(7) .grass:before {
  border-radius: 0 50%/1px 57px 0;
}
.bundle-of-grass:nth-child(8) {
  left: 75%;
  bottom: 95%;
  transform: scale(1.09);
}
.bundle-of-grass:nth-child(8) .grass:before {
  border-radius: 0 50%/1px 61px 0;
}
.bundle-of-grass:nth-child(9) {
  left: 84%;
  bottom: 62%;
  transform: scale(1.03);
}
.bundle-of-grass:nth-child(9) .grass:before {
  border-radius: 0 50%/1px 12px 0;
}
.bundle-of-grass:nth-child(10) {
  left: 93%;
  bottom: 66%;
  transform: scale(0.72);
}
.bundle-of-grass:nth-child(10) .grass:before {
  border-radius: 0 50%/1px 65px 0;
}

.house {
  bottom: 100%;
  width: 240px;
  height: 90px;
  left: 45%;
  transform-origin: 50% 100%;
  z-index: -1;
  -webkit-animation: houseDance 3s infinite alternate ease-in-out;
          animation: houseDance 3s infinite alternate ease-in-out;
  transform: skewX(3deg);
}
.house .face {
  bottom: 0;
  height: 100%;
  background-color: #224;
}
.house .face--front {
  width: 70%;
}
.house .face--right {
  left: 70%;
  width: 10%;
  height: 100%;
  transform: skewY(15deg);
  transform-origin: 0% 100%;
  z-index: 2;
  box-shadow: 10px -12px 25px rgba(0, 0, 0, 0.4), -20px 10px 70px rgba(0, 0, 0, 0.4);
}
.house .face .top {
  bottom: 100%;
  z-index: 1;
  left: 0;
}
.house .face .top:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  bottom: 0;
  left: 0;
  border: 0 solid transparent;
  border-width: 32px 1.4em;
  border-bottom-color: #224;
}
.house > .face .top:before {
  border-width: 20px 0.75em;
  border-right-color: #224;
}
.house .dungeon .face--front .top:before {
  border-width: 34px 1.6em;
}
.house .dungeon .face--right .top:before {
  border-width: 34px 0.65em;
}
.house .window {
  position: absolute;
  left: 20%;
  bottom: 4%;
  height: 44px;
  width: 12px;
}
.house .window:before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: 100%;
  height: 105%;
  background-color: #000;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 100%, 0 100%, 0% 25%);
          clip-path: polygon(50% 0%, 100% 25%, 100% 100%, 0 100%, 0% 25%);
}
.house .window:after {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  width: 90%;
  height: 100%;
  box-shadow: inset 3px -5px 3px rgba(0, 0, 0, 0.4);
  background-color: #c90;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 100%, 0 100%, 0% 25%);
          clip-path: polygon(50% 0%, 100% 25%, 100% 100%, 0 100%, 0% 25%);
}
.house .window + .window {
  left: 45%;
}
.house .window + .window + .window {
  left: 70%;
}
.house .roof {
  left: -15%;
  bottom: 90%;
  height: 60px;
  width: 112%;
  transform: skewX(-50deg);
  transform-origin: 0 100%;
  background-color: #0f0f30;
}
.house .roof--bottom {
  left: -10%;
  bottom: 90%;
  height: 30px;
  width: 110%;
  z-index: 3;
  background-color: #0f0f30;
  transform: skewX(-40deg);
  transform-origin: 0 100%;
  box-shadow: 5px 9px 10px rgba(0, 0, 0, 0.4);
}
.house .dungeon {
  left: 70%;
  bottom: 0;
  height: 178%;
  width: 30%;
  z-index: 1;
}
.house .dungeon .face--right {
  width: 30%;
  box-shadow: -10px 5px 30px rgba(0, 0, 0, 0.4);
}
.house .dungeon .face--right .window {
  width: 9px;
}
.house .dungeon .face--right .window:before {
  top: -1px;
  left: -1px;
}
.house .dungeon .face--right .window + .window {
  bottom: 4%;
  transform: skewY(-20deg);
}
.house .dungeon .window {
  width: 19px;
  height: 36px;
  left: 30%;
  bottom: 78%;
}
.house .dungeon .window:before {
  left: -1px;
  top: -1px;
}
.house .dungeon__top {
  left: 0;
  bottom: 100%;
}
.house .dungeon__top:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 100%;
  height: 0;
  width: 0;
  border: 0 solid transparent;
  border-bottom-color: #0f0f30;
  border-width: 70px 33px;
  transform: skewX(-3deg);
  transform-origin: 0 100%;
}
.house .dungeon__top:after {
  position: absolute;
  content: "";
  left: 36px;
  bottom: -12px;
  height: 0;
  width: 0;
  border: 0 solid transparent;
  border-left-color: #0f0f30;
  border-width: 42px 27px;
}

.fence {
  left: 12%;
  height: 50px;
  bottom: 100%;
  z-index: -1;
  transform: skewX(-10deg);
  transform-origin: 0 100%;
  -webkit-animation: houseDance 2s infinite alternate ease-in-out;
          animation: houseDance 2s infinite alternate ease-in-out;
}
.fence .post {
  background-color: #47476b;
  position: relative;
  margin-left: 18px;
  width: 10px;
  display: inline-block;
  border-radius: 10px 10px 0 0;
  transform-origin: 0 100%;
  box-shadow: 5px -12px 15px rgba(0, 0, 0, 0.5) inset;
}
.fence .post:before, .fence .post:after {
  position: absolute;
  bottom: 55%;
  background-color: inherit;
  width: 40px;
  height: 8px;
  box-shadow: 1px -1px 15px rgba(0, 0, 0, 0.5) inset;
}
.fence .post:before {
  content: "";
  right: 0;
}
.fence .post:first-child:before {
  width: 5px;
  right: 100%;
  margin-right: -1px;
}
.fence .post:nth-child(1) {
  height: 100%;
  transform: rotate(-5deg);
}
.fence .post:nth-child(2) {
  height: 110%;
  transform: rotate(1deg);
}
.fence .post:nth-child(3) {
  height: 110%;
  transform: rotate(-2deg);
}
.fence .post:nth-child(4) {
  height: 110%;
  transform: rotate(4deg);
}
.fence .post:nth-child(5) {
  height: 110%;
  transform: rotate(0deg);
}
.fence .post:nth-child(6) {
  height: 100%;
  transform: rotate(0deg);
}
.fence .post:nth-child(7) {
  height: 90%;
  transform: rotate(3deg);
}
.fence.first {
  left: 2%;
}
.fence.first .post:first-child {
  transform: rotate(-4deg);
}
.fence.first .post + .post:after {
  content: "";
  transform: rotate(60deg);
  transform-origin: 0 50%;
  left: 100%;
  margin-left: -2px;
}

@-webkit-keyframes opacityPulse {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes opacityPulse {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes starDance {
  0% {
    transform: scale(0.8) rotate(-3deg);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8) rotate(6deg);
  }
  100% {
    transform: scale(1.1) rotate(-3deg);
  }
}
@keyframes starDance {
  0% {
    transform: scale(0.8) rotate(-3deg);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8) rotate(6deg);
  }
  100% {
    transform: scale(1.1) rotate(-3deg);
  }
}
@-webkit-keyframes houseDance {
  0% {
    transform: skewX(3deg);
  }
  25% {
    transform: skewX(8deg);
  }
  80% {
    transform: skewX(4deg);
  }
  100% {
    transform: skewX(5deg);
  }
}
@keyframes houseDance {
  0% {
    transform: skewX(3deg);
  }
  25% {
    transform: skewX(8deg);
  }
  80% {
    transform: skewX(4deg);
  }
  100% {
    transform: skewX(5deg);
  }
}
@-webkit-keyframes grassDance {
  0% {
    transform: skewX(-2deg) rotate(0deg);
  }
  15% {
    transform: skewX(20deg) rotate(-10deg);
  }
  40% {
    transform: skewX(5deg) rotate(-3deg);
  }
  70% {
    transform: skewX(-2deg) rotate(-3deg);
  }
  100% {
    transform: skewX(9deg) rotate(-13deg);
  }
}
@keyframes grassDance {
  0% {
    transform: skewX(-2deg) rotate(0deg);
  }
  15% {
    transform: skewX(20deg) rotate(-10deg);
  }
  40% {
    transform: skewX(5deg) rotate(-3deg);
  }
  70% {
    transform: skewX(-2deg) rotate(-3deg);
  }
  100% {
    transform: skewX(9deg) rotate(-13deg);
  }
}
@-webkit-keyframes shootingStar {
  0% {
    left: -10%;
    opacity: 1;
  }
  0.05%, 0.3% {
    opacity: 1;
  }
  0.45% {
    opacity: 0;
  }
  0.5%, 100% {
    left: 100%;
  }
}
@keyframes shootingStar {
  0% {
    left: -10%;
    opacity: 1;
  }
  0.05%, 0.3% {
    opacity: 1;
  }
  0.45% {
    opacity: 0;
  }
  0.5%, 100% {
    left: 100%;
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 800;
  }
  10% {
    stroke-dasharray: 400;
    stroke-dashoffset: 0;
  }
  20%, 100% {
    stroke-dasharray: 800;
    stroke-dashoffset: -800;
  }
}
@keyframes dash {
  0% {
    stroke-dashoffset: 800;
  }
  10% {
    stroke-dasharray: 400;
    stroke-dashoffset: 0;
  }
  20%, 100% {
    stroke-dasharray: 800;
    stroke-dashoffset: -800;
  }
}
/*# sourceMappingURL=outro.css.map */