$BG_TOP: #265a60;
$BG_BOTTOM: #665238;
$BG_HOUSE: #000;
$BG_WINDOW: #f6e833;
$BG_WINDOW_MODIFY: #f0db90;
$BG_GRAVE: #000;
$BG_GHOST: #000;
$BG_BAT: #000;

@import url("https://fonts.googleapis.com/css?family=Special+Elite");

@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

@mixin animation($animation-name) {
  -webkit-animation: $animation-name;
  -moz-animation: $animation-name;
  animation: $animation-name;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

@mixin prefixes($property, $value) {
  @each $prefix in -webkit-, -moz-, -ms-, -o-, "" {
    #{$prefix}#{$property}: $value;
  }
}

.main-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.error {
  margin: 10px auto 0;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  @include prefixes(justify-content, center);
  align-items: baseline;
  height: 230px;
  width: 500px;
  &__num {
    color: #fff;
    font-size: 200px;
    margin: 0;
  }
  &__moon {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #f0db90;
    border-radius: 50%;
    box-shadow: 0 0 10px #ffffff, 0 0 0 2px rgba(143, 101, 169, 0.1);
    -webkit-box-shadow: 0 0 10px #ffffff, 0 0 0 2px rgba(143, 101, 169, 0.1);
  }
}

.house {
  width: 220px;
  height: 215px;
  position: absolute;
  bottom: 4px;
  overflow: hidden;
  z-index: 0;
  @include prefixes(transform, rotate(-10deg));

  &__window {
    position: absolute;
    background-color: $BG_WINDOW;
    z-index: 10;
    @include animation(window 3s linear infinite);

    &:before, &:after {
      background-color: $BG_WINDOW;
      @include animation(window 3s linear infinite);
    }
  }
  &__right {
    position: absolute;
    bottom: 0;
    left: 153px;
    width: 27px;
    height: 100px;
    background-color: $BG_HOUSE;
    @include prefixes(transform, rotate(23deg));

    &:before {
      top: -35px;
      right: -19px;
      width: 0;
      height: 0;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      border-bottom: 36px solid $BG_HOUSE;
      @include prefixes(transform, rotate(-5deg));
    }
    &:after {
      top: -1px;
      right: -12px;
      width: 0;
      height: 0;
      border-right: 15px solid transparent;
      border-top: 100px solid $BG_HOUSE;
      @include prefixes(transform, rotate(-4deg));
    }
    .house__window {
      width: 10px;
      height: 10px;
      position: absolute;
      left: 12px;
      &:after {
        width: 8px;
        height: 12px;
        left: 1px;
        top: 17px;
      }
    }
  }
  &__center {
    position: absolute;
    bottom: 61px;
    left: 118px;
    width: 27px;
    height: 100px;
    transform: rotate(-3deg);
    background-color: $BG_HOUSE;
    @include prefixes(transform, rotate(-3deg));

    .house__window {
      @include prefixes(transform, rotate(4deg));

      &:first-of-type {
        width: 8px;
        height: 10px;
        position: absolute;
        top: 6px;
        left: 12px;
        &:after {
          width: 8px;
          height: 12px;
          left: 1px;
          top: 17px;
        }
      }
      &:nth-of-type(2) {
        left: 26px;
        width: 10px;
        height: 10px;
        position: absolute;
        top: 6px;
        &:after {
          width: 8px;
          height: 12px;
          left: 1px;
          top: 17px;
        }
      }
    }
    &:before {
      top: -53px;
      right: -27px;
      width: 0;
      height: 0;
      border-left: 33px solid transparent;
      border-right: 33px solid transparent;
      border-bottom: 54px solid $BG_HOUSE;
      @include prefixes(transform, rotate(-3deg));
    }
    &:after {
      top: -5px;
      right: -11px;
      width: 15px;
      height: 90px;
      background-color: $BG_HOUSE;
      @include prefixes(transform, rotate(5deg));
    }
  }
  &__left {
    position: absolute;
    bottom: 56px;
    left: 54px;
    width: 25px;
    height: 60px;
    background-color: $BG_HOUSE;
    @include prefixes(transform, rotate(-11deg));
    &:before {
      top: -33px;
      right: -26px;
      width: 0;
      height: 0;
      border-left: 33px solid transparent;
      border-right: 33px solid transparent;
      border-bottom: 35px solid $BG_HOUSE;
      @include prefixes(transform, rotate(-3deg));
    }
    &:after {
      top: -5px;
      right: -11px;
      width: 15px;
      height: 90px;
      background-color: $BG_HOUSE;
      @include prefixes(transform, rotate(5deg));
    }
    .house__window {
      &:first-of-type {
        width: 6px;
        height: 10px;
        position: absolute;
        top: 6px;
        left: 12px;
        &:after {
          width: 6px;
          height: 12px;
          left: 1px;
          top: 17px;
        }
      }
      &:nth-of-type(2) {
        left: 26px;
        width: 6px;
        height: 12px;
        position: absolute;
        top: 6px;
        &:after {
          width: 6px;
          height: 12px;
          left: 0;
          top: 17px;
        }
      }
    }
  }
  &__mini {
    position: absolute;
    bottom: 52px;
    left: 25px;
    width: 14px;
    height: 35px;
    background-color: $BG_HOUSE;
    @include prefixes(transform, rotate(-21deg));

    &:before {
      top: -25px;
      right: -9px;
      width: 0;
      height: 0;
      border-left: 17px solid transparent;
      border-right: 17px solid transparent;
      border-bottom: 26px solid $BG_HOUSE;
      @include prefixes(transform, rotate(1deg));
    }
    &:after {
      top: -3px;
      right: -1px;
      width: 8px;
      height: 37px;
      background-color: $BG_HOUSE;
      @include prefixes(transform, rotate(6deg));
    }
    .house__window {
      width: 7px;
      height: 8px;
      position: absolute;
      left: 4px;
      top: 3px;
      &:after {
        width: 5px;
        height: 6px;
        left: 1px;
        top: 13px;
      }
    }
    .bridge {
      position: absolute;
      bottom: -11px;
      left: 11px;
      width: 14px;
      height: 35px;
      background-color: $BG_HOUSE;
      @include prefixes(transform, rotate(90deg));
    }
  }
  &__bottom {
    position: absolute;
    bottom: -2px;
    left: 63px;
    width: 92px;
    height: 80px;
    background-color: $BG_HOUSE;
    @include prefixes(transform, rotate(-10deg));
    &:after {
      bottom: -5px;
      left: 57px;
      width: 35px;
      height: 90px;
      background-color: $BG_HOUSE;
      @include prefixes(transform, rotate(10deg));
    }
    .house__window {
      width: 26px;
      height: 34px;
      left: 39px;
      top: 30px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      @include prefixes(transform, rotate(10deg));
    }
  }
}

.graves {
  width: 300px;
  height: 85px;
  position: absolute;
  bottom: -2px;
  right: 14px;
  overflow: hidden;
  z-index: 0;
}

.grave {
  position: absolute;
  width: 15px;
  height: 80px;
  background-color: #000;
  z-index: 0;
  @include prefixes(transform, rotate(0));
  @include animation(grave 3s linear 3s infinite);

  &:before {
    top: 5px;
    right: 0;
    width: 10px;
    height: 40px;
    background-color: #000;
    @include prefixes(transform, rotate(90deg));
  }
  &:after {
    top: 0px;
    right: -9px;
    width: 0;
    height: 0;
    border-right: 15px solid transparent;
    border-top: 100px solid $BG_GRAVE;
    @include prefixes(transform, rotate(0));
  }
  &--mini {
    left: 100px;
    width: 5px;
    height: 65px;
    @include animation(grave 2s linear 3s infinite);

    &:before {
      top: 1px;
      right: -3px;
      width: 7px;
      height: 26px;
      @include prefixes(transform, rotate(90deg));
    }
    &:after {
      top: 0px;
      right: -9px;
      width: 0;
      height: 0;
      border-right: 10px solid transparent;
      border-top: 38px solid #000;
      @include prefixes(transform, rotate(-2deg));
    }
  }
  &:nth-of-type(1) {
    bottom: 0;
    left: 190px;
    @include prefixes(transform, rotate(10deg));
  }
  &:nth-of-type(2) {
    bottom: -13px;
    left: 150px;
    @include prefixes(transform, rotate(3deg));
    @include animation(grave 3.5s linear 3s infinite);
  }
  &:nth-of-type(3) {
    bottom: -4px;
    left: 118px;
  }
}

.ground-wrapper {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 15px;
  background-color: #000;
  overflow: hidden;
}

.bat {
  position: absolute;
  width: 10px;
  height: 17px;
  border-radius: 40%;
  background-color: $BG_BAT;
  @include animation(bat 5s linear infinite alternate);

  &:before, &:after {
    width: 4px;
    height: 10px;
    top: -4px;
    right: 0;
    border-radius: 40%;
    background-color: $BG_BAT;
  }

  &:after {
    left: 0;
  }

  &__right-wing {
    position: absolute;
    top: -7px;
    right: -30px;
    width: 0;
    height: 0;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-bottom: 14px solid #000;
    border-radius: 50px;
    @include prefixes(transform, rotate(-3deg));
    @include animation(bat-right-wing 2s linear infinite alternate);

    &:before {
      top: 9px;
      right: -4px;
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 10px solid #000;
      border-radius: 50px;
      @include prefixes(transform, rotate(19deg));
    }
    &:after {
      top: 9px;
      right: -15px;
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 12px solid transparent;
      border-top: 10px solid #000;
      border-radius: 50px;
      @include prefixes(transform, rotate(19deg));
    }
  }
  &__left-wing {
    position: absolute;
    top: -7px;
    left: -30px;
    width: 0;
    height: 0;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-bottom: 14px solid #000;
    border-radius: 50px;
    @include prefixes(transform, rotate(-3deg));
    @include animation(bat-left-wing 2s linear infinite alternate);

    &:before {
      top: 9px;
      left: -4px;
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 10px solid #000;
      border-radius: 50px;
      @include prefixes(transform, rotate(-19deg));
    }
    &:after {
      top: 9px;
      left: -15px;
      width: 0;
      height: 0;
      border-left: 12px solid transparent;
      border-right: 8px solid transparent;
      border-top: 10px solid #000;
      border-radius: 50px;
      @include prefixes(transform, rotate(-19deg));
    }
  }
  &--left {
    top: 100px;
    left: 100px;
  }
  &--right {
    top: 150px;
    right: 100px;
  }
}

.button-container {
  width: 100%;
  p {
    margin-top: 20px;
    text-align: center;
    font-size: 20px;
  }
}

.button {
  position: relative;
  display: block;
  width: 150px;
  height: 50px;
  margin: auto;
  text-decoration: none;
  color: #fff;
  text-align: center;
  font-size: 35px;
  padding-top: 15px;
  &:hover {
    color: #000;
    @include prefixes(transition, color 0.5s ease-out);
  }
}

.ghost {
  position: absolute;
  width: 40px;
  height: 45px;
  left: -50px;
  background-color: $BG_GHOST;
  border-top-left-radius: 40%;
  border-top-right-radius: 40%;
  border-bottom-right-radius: 40%;
  border-bottom-left-radius: 10%;
  @include animation(ghost 20s linear infinite);

  &__hand {
    position: absolute;
    width: 20px;
    height: 1px;
    left: 27px;
    top: 27px;
    height: 6px;
    background-color: $BG_GHOST;
    border-radius: 20px;
    transform: rotate(-29deg);
    @include prefixes(transform, rotate(-29deg));

    &:before {
      width: 8px;
      left: 16px;
      top: 3px;
      height: 6px;
      background-color: $BG_GHOST;
      border-bottom-right-radius: 5px;
      border-top-right-radius: 5px;
      @include prefixes(transform, rotate(49deg));
    }
  }
  &__tail {
    border-left: 9px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid #000;
    border-radius: 30%;
    position: absolute;
    left: -8px;
    top: 34px;
    @include prefixes(transform, rotate(42deg));
  }
  &__face {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 5px;
    height: 5px;
    background-color: #f6e833;
    border-radius: 50%;
    &:after {
      top: 10px;
      right: -6px;
      width: 4px;
      height: 1px;
      background-color: #f6e833;
    }
  }
}

@include keyframes(ghost) {
  0% {
    @include prefixes(transform, translateX(0) rotateY(0));
  }

  45% {
    @include prefixes(transform, translateX(190px) translateY(20px) rotateY(0));
  }

  50% {
    @include prefixes(transform, translateX(200px) translateY(10px) rotateY(180deg));
  }

  95% {
    @include prefixes(transform, translateX(10px) translateY(10px) rotateY(180deg));
  }

  100% {
    @include prefixes(transform, translateX(0) rotateY(0));
  }
}

@include keyframes(grave) {
  0% {
    @include prefixes(transform, rotateZ(0));
  }

  25% {
    @include prefixes(transform, rotateZ(10deg));
  }

  50% {
    @include prefixes(transform, rotateZ(0));
  }

  100% {
    @include prefixes(transform, rotateZ(0));
  }
}

@include keyframes(window) {
  0% {
    background-color: $BG_WINDOW;
  }
  100% {
    background-color: $BG_WINDOW_MODIFY;
  }
}

@include keyframes(bat) {
  0% {
    @include prefixes(transform, translateY(0));
  }
  100% {
    @include prefixes(transform, translateY(-30px));
  }
}

@include keyframes(bat-right-wing) {
  0% {
    @include prefixes(transform, rotateZ(0));
  }
  100% {
    @include prefixes(transform, rotateZ(-20deg));
  }
}

@include keyframes(bat-left-wing) {
  0% {
    @include prefixes(transform, rotateZ(0));
  }
  100% {
    @include prefixes(transform, rotateZ(20deg));
  }
}

// base
html, body {
  width: 100%;
  height: 100%;
}
body {
  padding: 0;
  margin: 0;
  background: linear-gradient(180deg, $BG_TOP, $BG_BOTTOM) fixed;
  font-family: "Special Elite", cursive;
}
* {
  position: relative;
  &:before,
  &:after {
    position: absolute;
    content: "";
  }
}