@font-face {
  font-family: quicksand;
  font-display: swap;
  src: url(https://thisisjoes.site/font/quicksand-regular.woff2) format("woff2");
}

@font-face {
  font-family: clip;
  font-display: swap;
  src: url(https://oke.moe/font/clip.woff2) format("woff2");
}

* {
  box-sizing: border-box;
}

html, body, .frame, .container {
  font-family: "Arial", sans-serif;
  margin: 0;
  min-height: 100vh;
  min-width: 100vw;
}

body {
  overflow: hide;
  background-color: #000d1a;
}

.frame {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  border-top: 30vw solid #fe21fb;
  border-right: 30vw solid #52ffff;
  border-bottom: 30vw solid #52ffff;
  border-left: 30vw solid #fe21fb;
  animation-name: reveal; 
  animation-duration: 1s;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.container {
  padding: 45px;
  position: relative;
}

header {
  margin: auto;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

h1 {
  font-family: clip, "Arial", sans-serif;
  font-size: 84px;
  color: #f2f2f2;
  margin: 0;
}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeate(4,minmax(0,1fr));
  grid-auto-rows: max-content;
}

#left {
  color: #ffe6ff;
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
               -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
               0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  animation: shine-one 2s forwards, flicker 3s infinite;
}
 
#right {
  color: #b2f3f2;
  text-shadow: 0 0 0.6rem #b2f3f2, 0 0 1.5rem #75f1f1,
               -0.2rem 0.1rem 1rem #75f1f1, 0.2rem 0.1rem 1rem #75f1f1,
               0 -0.5rem 2rem #1cf3f1, 0 0.5rem 3rem #1cf3f1;
  animation: shine-two 2s forwards, flicker 6s infinite;
}
 
.flicker-pink {
  animation: shine-one 2s forwards, blink-one 10s 1s infinite;
}

.flicker-blue {
  animation: shine-two 2s forwards, blink-two 10s 1s infinite;
}

.fast-flicker-pink {
  animation: shine-one 2s forwards, blink-one 3s 2s infinite;
}

.fast-flicker-blue {
  animation: shine-two 2s forwards, blink-two 3s 2s infinite;
}

@media screen and (max-width: 500px) {
  h1 {
    font-size: 64px;
  }
}

@media screen and (max-width: 375px) {
  h1 {
    font-size: 52px;
  }
}

@media screen and (max-width: 320px) {
  h1 {
    font-size: 48px;
  }
}

@keyframes reveal {
  0% { border-width: 50vw; }
  100% { border-width: 25px; }
}

@keyframes shine-one {
  0% {
    color: #6b1839;
    text-shadow: none;
  }
  100% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
      -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
      0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  }
}
 
@keyframes shine-two {
  0% {
    color: #178685;
    text-shadow: none;
  }
  100% {
    color: #b2f3f2;
    text-shadow: 0 0 0.6rem #b2f3f2, 0 0 1.5rem #75f1f1,
      -0.2rem 0.1rem 1rem #75f1f1, 0.2rem 0.1rem 1rem #75f1f1,
      0 -0.5rem 2rem #1cf3f1, 0 0.5rem 3rem #1cf3f1;
  }
} 
 
@keyframes blink-one {
  0%,
  22%,
  36%,
  75% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
      -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
      0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  }
  28%,
  33% {
    color: #ff65bd;
    text-shadow: none;
  }
  82%,
  97% {
    color: #ff2483;
    text-shadow: none;
  }
}
 
@keyframes blink-two {
  0%,
  22%,
  36%,
  75% {
    color: #ddfefd;
    text-shadow: 0 0 0.6rem #b2f3f2, 0 0 1.5rem #75f1f1,
      -0.2rem 0.1rem 1rem #75f1f1, 0.2rem 0.1rem 1rem #75f1f1,
      0 -0.5rem 2rem #1cf3f1, 0 0.5rem 3rem #1cf3f1;
  }
  28%,
  33% {
    color: #75f1f1;
    text-shadow: 0 0 0.6rem #b2f3f2, 0 0 1.5rem #75f1f1;
  }
  82%,
  97% {
    color: #178685;
    text-shadow: none;
  }
}
 
 
@keyframes flicker {
  from {
    opacity: 1;
  }
 
  4% {
    opacity: 0.9;
  }
 
  6% {
    opacity: 0.85;
  }
 
  8% {
    opacity: 0.95;
  }
 
  10% {
    opacity: 0.9;
  }
 
  11% {
    opacity: 0.922;
  }
 
  12% {
    opacity: 0.9;
  }
 
  14% {
    opacity: 0.95;
  }
 
  16% {
    opacity: 0.98;
  }
 
  17% {
    opacity: 0.9;
  }
 
  19% {
    opacity: 0.93;
  }
 
  20% {
    opacity: 0.99;
  }
 
  24% {
    opacity: 1;
  }
 
  26% {
    opacity: 0.94;
  }
 
  28% {
    opacity: 0.98;
  }
 
  37% {
    opacity: 0.93;
  }
 
  38% {
    opacity: 0.5;
  }
 
  39% {
    opacity: 0.96;
  }
 
  42% {
    opacity: 1;
  }
 
  44% {
    opacity: 0.97;
  }
 
  46% {
    opacity: 0.94;
  }
 
  56% {
    opacity: 0.9;
  }
 
  58% {
    opacity: 0.9;
  }
 
  60% {
    opacity: 0.99;
  }
 
  68% {
    opacity: 1;
  }
 
  70% {
    opacity: 0.9;
  }
 
  72% {
    opacity: 0.95;
  }
 
  93% {
    opacity: 0.93;
  }
 
  95% {
    opacity: 0.95;
  }
 
  97% {
    opacity: 0.93;
  }
 
  to {
    opacity: 1;
  }
}