<link rel='stylesheet' href='//cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack.css'>
<svg>
  <defs>
    <filter id="screen-glitch" x="-50%" y="-50%" width="200%" height="200%">
      <feTurbulence type="fractalNoise" baseFrequency="0 0.01" result="noise" numOctaves="2"/>
      <feDisplacementMap in="SourceGraphic" in2="noise" scale="200"/>
    </filter>
  </defs>
</svg>
<input type="checkbox" id="dark-mode">
<div class="container">
  <label for="dark-mode">
    <div class="dark-mode-button_sun"></div>
    <div class="dark-mode-button_moon"></div>
  </label>
  <header data-content="Loading Data">Loading Data</header>
  <div class="random-letters">
    <div class="random-letters_letter">
      <p>G</p>
      <p>3</p>
      <p>[</p>
      <p>6</p>
      <p>E</p>
      <p>!</p>
      <p>G</p>
      <p>T</p>
      <p>1</p>
      <p>J</p>
    </div>
    <div class="random-letters_letter">
      <p>L</p>
      <p>M</p>
      <p>U</p>
      <p>{</p>
      <p>}</p>
      <p>F</p>
      <p>-</p>
      <p>H</p>
      <p>*</p>
      <p>9</p>
    </div>
    <div class="random-letters_letter">
      <p>I</p>
      <p>+</p>
      <p>W</p>
      <p>]</p>
      <p>=</p>
      <p>L</p>
      <p>?</p>
      <p>5</p>
      <p>V</p>
      <p>1</p>
    </div>
    <div class="random-letters_letter">
      <p>T</p>
      <p>D</p>
      <p>7</p>
      <p>$</p>
      <p>S</p>
      <p>~</p>
      <p>C</p>
      <p>%</p>
      <p>"</p>
      <p>5</p>
    </div>
    <div class="random-letters_letter">
      <p>C</p>
      <p>M</p>
      <p>U</p>
      <p>{</p>
      <p>}</p>
      <p>F</p>
      <p>-</p>
      <p>H</p>
      <p>*</p>
      <p>9</p>
    </div>
    <div class="random-letters_letter">
      <p>H</p>
      <p>+</p>
      <p>W</p>
      <p>]</p>
      <p>=</p>
      <p>L</p>
      <p>?</p>
      <p>5</p>
      <p>V</p>
      <p>1</p>
    </div>
    <p>...<div class="cursor">|</div></p>
  </div>
  <div class="loading-bar"></div>
  <footer>
    <p>A glitchy loading page without any Javascript.</p>
  </footer>
</div>

:root {
  --header_font-size: 140px;
  --random-letter_font-size: 48px;
  --loading-bar_width: 500px;
  --loading-bar_height: 28px;
  --loading-bar_border: 3px;
  --dark-mode_transition-time: .25s;
}

* {
  margin: 0;
}

svg,
#dark-mode {
  display: none;
}

.container {
  --color_primary: rgb(010, 010, 010);
  --color_secondary: rgb(245, 245, 245);
  position: relative;
  display: grid;
  place-items: center;
  grid-template-rows: 50% auto 1fr 1fr;
  height: 100vh;
  width: 100%;
  background: var(--color_primary);
  color: var(--color_secondary);
  font-family: Hack, monospace;
  transition-duration: var(--dark-mode_transition-time);
  overflow: hidden;
}

#dark-mode:checked + .container {
  --color_primary: rgb(245, 245, 245);
  --color_secondary: rgb(010, 010, 010);
}

.container::before {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  content: "";
  opacity: .75;
  pointer-events: none;
  z-index: 2;
  animation: container_film-grain 1s step-end infinite;
}

label {
  position: absolute;
  top: 20px;
  right: 20px;
  height: 20px;
  width: 20px;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
}

.dark-mode-button_sun,
.dark-mode-button_moon {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: 50%;
}

.dark-mode-button_sun {
  box-sizing: border-box;
  background: var(--color_secondary);
  transition-duration: var(--dark-mode_transition-time);
}

.dark-mode-button_moon {
  left: -100%;
  background: var(--color_primary);
  transition-duration: var(--dark-mode_transition-time);
}

#dark-mode:checked + .container .dark-mode-button_moon {
  transform: translateX(60%);
}

header {
  align-self: end;
  position: relative;
  font-size: var(--header_font-size);
  z-index: 1;
  animation:
    header_chromatic-aberration 5.1s step-end infinite,
    screen-glitch 8.3s step-end infinite;;
}

header::before,
header::after {
  position: absolute;
  content: attr(data-content);
}

header::before {
  left: calc(calc(var(--header_font-size) / 14) * -1);
  animation:
    header_glitch 3s step-end infinite,
    header_clip-before 10.3s linear forwards infinite;
}

header::after {
  left: calc(var(--header_font-size) / 14);
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
  width: fit-content;
  animation:
    header_glitch 2.7s step-end infinite,
    header_clip-after 7.7s linear forwards infinite;
}

.random-letters {
  align-self: start;
  display: flex;
  font-size: var(--random-letter_font-size);
  line-height: var(--random-letter_font-size);
  color: var(--color_secondary);
  height: var(--random-letter_font-size);
  margin: 15px 0 30px 0;
  overflow: hidden;
  z-index: 1;
  transition-duration: var(--dark-mode_transition-time);
  animation: screen-glitch 8.3s step-end infinite;
}

.random-letters_letter {
  animation: random-letters_cycle 1.1s step-end infinite;
}

.cursor {
  animation: cursor_blink 1s step-end infinite;
}

.loading-bar {
  position: relative;
  align-self: start;
  width: var(--loading-bar_width);
  height: var(--loading-bar_height);
  border: var(--loading-bar_border) solid var(--color_secondary);
  border-radius: 2px;
  transition-duration: var(--dark-mode_transition-time);
  z-index: 1;
  animation: screen-glitch 8.3s step-end infinite;
}

.loading-bar::before {
  position: absolute;
  top: 0px;
  height: calc(100% - calc(var(--loading-bar_border) * 2));
  margin: var(--loading-bar_border);
  content: "";
  background: var(--color_secondary);
  transition-duration: var(--dark-mode_transition-time);
  animation: loading-bar_progress 13.3s linear forwards infinite;
}

footer {
  align-self: end;
  font-size: 10px;
  text-align: center;
  opacity: .3;
  margin: 8px 150px;
}

#dark-mode:checked + .container footer {
  opacity: 1;
}

@media only screen and (max-width: 1100px) {
  :root {
    --header_font-size: 70px;
    --random-letter_font-size: 24px;
    --loading-bar_width : 250px;
    --loading-bar_height: 14px;
    --loading-bar_border: 2px;
  }
}

@media only screen and (max-width: 570px) {
  :root {
    --header_font-size: 35px;
    --random-letter_font-size: 12px;
    --loading-bar_width : 125px;
    --loading-bar_height: 7px;
    --loading-bar_border: 1px;
  }
  .random-letters {
    margin: 15px 0 20px 0;
  }
}

@keyframes screen-glitch {
  0% {
    filter: none;
  }
  97% {
    filter: url(#screen-glitch);
  }
}

@keyframes container_film-grain {
  0%  {
    background-image: url(https://www.dropbox.com/s/7c0079mscbpj9yr/noise01.png?dl=1);
  }
  10% {
    background-image: url(https://www.dropbox.com/s/xrhn9bfmz5d10qe/noise02.png?dl=1);
  }
  20% {
    background-image: url(https://www.dropbox.com/s/my05jzarddvrkvs/noise03.png?dl=1);
  }
  30% {
    background-image: url(https://www.dropbox.com/s/4df5nkssyg19fhj/noise04.png?dl=1);
  }
  40% {
    background-image: url(https://www.dropbox.com/s/hygspg34sp2favc/noise05.png?dl=1);
  }
  50% {
    background-image: url(https://www.dropbox.com/s/5fd1sjyw8hcn8ac/noise06.png?dl=1);
  }
  60% {
    background-image: url(https://www.dropbox.com/s/09tprl6ho8809zo/noise07.png?dl=1);
  }
  70% {
    background-image: url(https://www.dropbox.com/s/tsm4az80i4q47r2/noise08.png?dl=1);
  }
  80% {
    background-image: url(https://www.dropbox.com/s/ol1eg4nlnzpz7z7/noise09.png?dl=1);
  }
  90% {
    background-image: url(https://www.dropbox.com/s/hvjoyoyvp2j9ndp/noise10.png?dl=1);
  }
}

@keyframes header_clip-before {
  from {
    clip-path: polygon(0 0, 100% 0, 100% 10%, 0 10%);
  }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%);
  }
}

@keyframes header_clip-after {
  from {
    clip-path: polygon(0 10%, 100% 10%, 100% 100%, 0% 100%);
  }
  to {
    clip-path: polygon(0 90%, 100% 90%, 100% 100%, 0% 100%);
  }
}

@keyframes header_glitch {
  0% {
    opacity: 0;
  }
  97% {
    opacity: 1;
  }
}

@keyframes header_chromatic-aberration {
  0% {
    text-shadow: none;
  }
  97% {
    text-shadow:
      calc(var(--header_font-size) / 20) 0 rgb(255, 0, 0),
      calc(calc(var(--header_font-size) / 20) * -1)  0 rgb(0, 0, 255);
  }
}

@keyframes random-letters_cycle {
  0% {
    transform: translateY(calc(var(--random-letter_font-size) * 0));
  }
  10% {
    transform: translateY(calc(var(--random-letter_font-size) * -1));
  }
  20% {
    transform: translateY(calc(var(--random-letter_font-size) * -2));
  }
  30% {
    transform: translateY(calc(var(--random-letter_font-size) * -3));
  }
  40% {
    transform: translateY(calc(var(--random-letter_font-size) * -4));
  }
  50% {
    transform: translateY(calc(var(--random-letter_font-size) * -5));
  }
  60% {
    transform: translateY(calc(var(--random-letter_font-size) * -6));
  }
  70% {
    transform: translateY(calc(var(--random-letter_font-size) * -7));
  }    
  80% {
    transform: translateY(calc(var(--random-letter_font-size) * -8));
  }
  90% {
    transform: translateY(calc(var(--random-letter_font-size) * -9));
  }
}

@keyframes cursor_blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes loading-bar_progress {
  0% {
    width: 0;
  }
  20% {
    width: calc(6% - calc(var(--loading-bar_border) * 2));
  }
  25% {
    width: calc(6% - calc(var(--loading-bar_border) * 2));
  }
  40% {
    width: calc(10% - calc(var(--loading-bar_border) * 2));
  }
  50% {
    width: calc(10% - calc(var(--loading-bar_border) * 2));
  }
  70% {
    width: calc(40% - calc(var(--loading-bar_border) * 2));
  }
  80% {
    width: calc(40% - calc(var(--loading-bar_border) * 2));
  }
  90% {
    width: calc(60% - calc(var(--loading-bar_border) * 2));
  }
  95% {
    width: calc(80% - calc(var(--loading-bar_border) * 2));
  }
  97% {
    width: calc(80% - calc(var(--loading-bar_border) * 2));
  }
  100% {
    width: calc(100% - calc(var(--loading-bar_border) * 2));
  }
}