@import url("https://fonts.googleapis.com/css?family=Homenaje");
@import "https://fonts.googleapis.com/css2?family=Megrim&display=swap";

/***
Earth: Joe Pea
Statistics View: Sarah Dresner 
Gyro: Jonathan Cutrell ***/


.p-canvas-webgl {
  position: relative;
  z-index: 10;
  top: 0;
  left: 0;
}

.p-summary {
  position: relative;
  top: 1px;
  left: 1px;
  z-index: 20;
  color: #fff;
  font-family: "Homenaje", sans-serif;
}
.p-summary h1 {
  margin: 0 0 0.2em;
  font-size: 42px;
  font-weight: 400;
  letter-spacing: 0.05em;  
}
.p-summary p {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
}
.p-summary a {
  color: #fff;
}

.page {
  left: 30px;
  color: #fff; 
  font-family: 'Homenaje', sans-serif; 
  font-size: 80px; 
  display:inline-table; 
  position: absolute;
  transition: top 0.5s ease, left 0.5s ease, opacity 1s ease, transform 1s ease;
  animation: pulse 10s infinite;
}

.page span {
  display: inline;
  animation: pulse 1s infinite, shake 3.5s infinite;
}

.page span:nth-child(6) { animation-delay: 1.1s; }
.page span:nth-child(5) { animation-delay: 0.9s; }
.page span:nth-child(4) { animation-delay: 0.7s; }
.page span:nth-child(3) { animation-delay: 0.5s; }
.page span:nth-child(2) { animation-delay: 0.3s; }
.page span:nth-child(1) { animation-delay: 0.1s; }

.page span:nth-child(12) { animation-delay: 1.1s; }
.page span:nth-child(11) { animation-delay: 0.9s; }
.page span:nth-child(10) { animation-delay: 0.7s; }
.page span:nth-child(9) { animation-delay: 0.5s; }
.page span:nth-child(8) { animation-delay: 0.3s; }
.page span:nth-child(7) { animation-delay: 0.1s; }

.page span:nth-child(18) { animation-delay: 1.1s; }
.page span:nth-child(17) { animation-delay: 0.9s; }
.page span:nth-child(16) { animation-delay: 0.7s; }
.page span:nth-child(15) { animation-delay: 0.5s; }
.page span:nth-child(14) { animation-delay: 0.3s; }
.page span:nth-child(13) { animation-delay: 0.1s; }


@keyframes pulse {
  0% {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.5), 0 0 50px rgba(255, 255, 255, 0.5), 0 0 75px rgba(255, 255, 255, 0.5);
  }
  50% {
    text-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px rgba(255, 255, 255, 1), 0 0 50px rgba(255, 255, 255, 1), 0 0 60px rgba(255, 255, 255, 1), 0 0 90px rgba(255, 255, 255, 1);
  }
  100% {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.5), 0 0 50px rgba(255, 255, 255, 0.5), 0 0 75px rgba(255, 255, 255, 0.5);
  }
}
@keyframes shake {
  0% {
    transform: translateX(5vw) translateY(0vw);
  }
  20% {
    transform: translateX(10vw) translateY(2vw);
  }
  30% {
    transform: translateX(20vw) translateY(3vw);
  }
  60% {
    transform: translateX(25vw) translateY(0vw);
  }
  90% {
    transform: translateX(30wv)translateY(3vw);
  }
  100% {
    transform: translateX(20wv) translateY(4wv);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

html, body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background:#000;
}

#c {
  width: 1000px;
  display:inline-table;
}

/*# sourceMappingURL=glitch.css.map */

#word{
  font-family: Megrim, cursive;
  top: 40px;
  left: 50px;
  font-size: 20vh;
  position: fixed;
  display:inline-block;
  /*bottom: 0;*/
  color: rgb(0, 132, 255);
  -webkit-text-stroke: 0.15vh #c0f;
  opacity: 0.4; /* Start with the text invisible */
  transform: scale(0.5) rotateX(90deg); /* Start smaller and rotated */
  text-shadow: 0 0 10px #00f9ff, 0 0 20px #00f9ff, 0 0 30px #00f9ff;
  animation: futuristicAnimation 1.5s ease-in-out forwards, glowEffect 1.5s alternate infinite;
}


@keyframes futuristicAnimation {
  0% {
    opacity: 0;
    transform: scale(0.5) rotateX(180deg); /* Smaller and rotated */
    filter: blur(10px); /* Start blurry */
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotateX(0deg); /* Grow larger and align text */
    filter: blur(2px); /* Reduce blur */
  }
  100% {
    opacity: 1;
    transform: scale(1) rotateX(0deg); /* Final state at normal size */
    filter: blur(0); /* No blur */
  }
}

@keyframes glowEffect {
  0% {
    text-shadow: 0 0 10px #00f9ff, 0 0 20px #00f9ff, 0 0 40px #00f9ff;
  }
  100% {
    text-shadow: 0 0 20px #3e26da88, 0 0 30px #1e38ba, 0 0 50px #1b29a3;
    color: #0011ffdc;
  }
}

@keyframes walkAcross {
  0% { left: -450px; top: 100px; }
  50% { left: 100vw; top: 150px; }
  100% { left: -450px; top: 200px; }
}

.floating-container-war {
  width: 400px;
  height: 600px;
  top: 40px;
  position: absolute;
  right: 0;
  z-index: 1;
}

.floating-container {
  width: 400px;
  height: 300px;
  position: absolute;
  top: 440px;
  right: 0;
  z-index: 1;
}

.floating-container-el {
  width: 400px;
  height: 300px;
  position: absolute;
  top: 840px;
  right: 0;
  z-index: 1;
}

.floating-container-whis{
  width: 400px;
  height: 300px;
  top: 1240px;
  right: 0;
  position: absolute;
  z-index: 1;
}

.floating-container-kopf{
  width: 400px;
  height: 300px;
  position: absolute;
  top: 1640px;
  right: 0;
  z-index: 1;
}

@keyframes walkRightToLeft {
  0% { right: -450px; top: 200px; }
  50% { right: 100vw; top: 150px; }
  100% { right: -450px; top: 100px; }
}

@keyframes rotateSelf {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}


@keyframes floatUp {
  0%   { bottom: -350px; }
  100% { bottom: 110vh; }
}

@keyframes floatDown {
  0%   { top: -350px; }
  100% { top: 110vh; }
}


.floating-container-let:hover,
.floating-container-el:hover,
.floating-container:hover,
.floating-container-tdrop:hover,
.floating-container-zen:hover {
  animation-play-state: paused;
}