body{
  position: absolute;
  z-index: -1;
  font-family: 'Griffy', cursive;
  margin:0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.background{
  height:100vh;
  width: 313vw;
  background-image: url("../img/background.png");
  background-repeat: repeat-x;
  background-position: center;
  animation: animateBackground 15s linear infinite;
}

.overlay{
  background-color: rgba(0,0,0,.7);
  width:100vw;
  height:100vh;
  position: absolute;
  top: 0;
  left: 0;
  transition: background-color .1s linear;
}

.trick{
  padding-top:5vh;
  font-size: 40vh;
  text-align: center;
  line-height:40vh;
  color: #fff;
  mix-blend-mode: hard-light;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #ff7034, 0 0 20px #ff7034, 0 0 25px #ff7034, 0 0 30px #ff7034, 0 0 35px #ff7034;
}

.or{
  font-size: 15vh;
  line-height: 15vh;
  margin-top: -8vh;
  text-align: center;
  padding-left: 26vh;
  color: #fff;
  transform: rotate(15deg);
  mix-blend-mode: hard-light;
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}

.treat{
  font-size: 35vh;
  line-height: 35vh;
  text-align:center;
  color: #fff;
  mix-blend-mode: hard-light;
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #96c457, 0 0 40px #96c457, 0 0 50px #96c457, 0 0 60px #96c457, 0 0 70px #96c457;
}

@keyframes animateBackground {
  100% { 
    transform: translateX(-50%);  
  }
}