html {
  height: 100%;
}

body {
  height: 100%;
}

.frame {
  height: 100vh;
  position: relative;
}

.sky {
  background: linear-gradient(to bottom, #08050f 0%, #530e22 50%, #5c0b0b 74%, #610404 84%, #ff0505 100%);
  height: 70vh;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.groundPersepctive {
  background: black;
  bottom: 0;
  height: 30vh;
  left: 0;
  perspective: 30vh;
  position: absolute;
  right: 0;
}

.gridscape__overlay {
  background: linear-gradient(to bottom, #a50000 0%, #a50000 2%, transparent 14%);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.movingLines {
  height: 100vh;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  background: linear-gradient(to bottom, transparent, transparent 40px, #a50000 40px, #a50000 42px), linear-gradient(to right, transparent, transparent 40px, #a50000 40px, #a50000 42px);
  transform-origin: 50% 0;
  transform: rotateX(60deg);
  background-size: 42px 42px;
  -webkit-animation: move-up 10s linear infinite;
          animation: move-up 10s linear infinite;
}

.sun {
  /* background: linear-gradient(to bottom, #FFFF05 0%, #FF4700 50%); */
  border-radius: 50%;
  box-shadow: 0 0 26px 20px rgba(255, 71, 0, 0.5);
  height: 30vw;
  left: 50%;
  bottom: 0;
  position: absolute;
  transform: translate(-50%, 40%);
  width: 30vw;
}

.cross {
  height: 20vw;
  left: 43%;
  bottom: 1vh;
  position: absolute;
  animation: rotate linear 10s infinite;
  animation-delay: 666s;
  opacity: 0;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: rotate(360deg);
    opacity: 1;
  }
}

.devil 
{
  right:0;
  width: 50vw;
  bottom: 0;
  position: absolute;
  animation: devil-anim 9s linear infinite;
}

.devilflash 
{
  right:0;
  width: 50vw;
  bottom: 0;
  position: absolute;
  opacity: 0;
  animation: devilflash .4s;
  animation-delay: 66.6s;
}

@keyframes devilflash {
  0% {
    opacity: 0;
  }
  50% {
	width: 80vw;
	filter: brightness(2); 
	opacity: .7;
  }
  100% {
    opacity: 0;
  }
}

@keyframes devil-anim {
  0% {
    opacity: 0;
  }
  100% {
    opacity: .02;
  }
}

@-webkit-keyframes move-up {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -100%;
  }
}

@keyframes move-up {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -100%;
  }
}

.text 
{
  position: absolute;
  top: 14vh;
  left: 25vw;
  transform-origin: 50% 0;
  color: white;
  font-size: 3em;
  font-family: 'Roboto', sans-serif;
  opacity: .8;

  animation: textmove 5s steps(1, end) infinite;
}

.vaporwave {
  text-shadow: -0.0725rem -0.0625rem 0 #6BFFFF, 0.0725rem 0.0625rem 0 #FF819E;
}

@keyframes textmove {
  0% {
    transform: translatex(0);
  }
  50% {
    transform: translatex(1vw);
  }  
}

.overlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: transparent;
  background-size: 5px 5px, 5px 5px;
  background-position: -1px -1px, -1px -1px;
  background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  mix-blend-mode: difference;
}

.glitch {
  clip-path: polygon(0 0, 100% 0, 100% 0.5em, 0 0.5em);
  animation: glitch 4s linear infinite;
  transform: translatex(0.1rem);
}

@keyframes glitch {
  to {
    clip-path: polygon(0 calc(100% - .5em), 100% calc(100% - .5em), 0 100%, 0 100%);
  }
}

.appearlater
{
  animation: appear 1s;
  animation-fill-mode: forwards;  
  animation-delay: 60s;
  opacity: 0;
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}