purple_ghost

Ghost! | A Movie by purple_ghost

body {
 overflow: hidden;
}

.scene {
  position: fixed;
  display: none;
  top: 0%;
  bottom: 0%;
  z-index: -1;
  right: 0%;
  left: 0%;
}

.attic {
  background-color: #0a0400;
}

.prop {
  display: none;
  position: relative;
  z-index: 1000;
}

.movie {
  position: fixed;
  top: 0%;
  background-color: black;
  bottom: 0%;
  z-index: -1;
  right: 0%;
  justify-content: center;
  align-items: center;
  text-align: center;
  left: 0%;
  color: white;
}

.ghost {
  background-color: #c4fffc;
  width: 100px;
  height: 100px;
  opacity: .9;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  margin-left: 10px;
  animation-delay: 2s;
}

.ghost:after {
    background: linear-gradient(-45deg, #c4fffc 16px, transparent 0), linear-gradient(45deg, #c4fffc 16px, transparent 0);
    background-position: center bottom;
    background-repeat: repeat-x;
    background-size: 32px 32px;
    content: " ";
    display: block;
    transform: scale(-1, -1);
    position: absolute;
    top: 90px;
    left: 0px;
    width: 100px;
    height: 32px;
}

@keyframes glide {
  10% {
   margin-left: 180px;
  }
  20% {
   margin-left: 220px;
  }
  30% {
   margin-left: 260px;
  }
  40% {
   margin-left: 300px;
  }
  50% {
   margin-left: 340px;
  }
  60% {
   margin-left: 380px;
  }
  70% {
   margin-left: 420px;
  }
  80% {
   margin-left: 460px;
  }
  90% {
   margin-left: 500px;
  }
  100% {
   margin-left: 630px;
  }
}

h1 {
  font-size: 40px;
  font-family: Arial;
}