@font-face {
  font-family: 'DS Digital';
  src: url("../fonts/ds-digi-webfont.woff2") format("woff2"), url("../fonts/ds-digi-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'DS Digital';
  src: url("../fonts/ds-digib-webfont.woff2") format("woff2"), url("../fonts/ds-digib-webfont.woff") format("woff");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'DS Digital';
  src: url("../fonts/ds-digii-webfont.woff2") format("woff2"), url("../fonts/ds-digii-webfont.woff") format("woff");
  font-weight: normal;
  font-style: italic; }

@font-face {
  font-family: 'DS Digital';
  src: url("../fonts/ds-digit-webfont.woff2") format("woff2"), url("../fonts/ds-digit-webfont.woff") format("woff");
  font-weight: bold;
  font-style: italic; }

/*
(TEXT) PARAMS
=================
1. Namespace
2. Intensity
3. Text color
4. Background color (flat)
5. Highlight #1 color
6. Highlight #2 color
7. Width (px)
8. Height (px)
*/
body {
  position: relative;
  background: #222;
  color: #eee;
  display: flex;
  flex-direction: column;
  font-family: 'VT323', monospace;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0; }

h1, h2, h3, h4, h5, h6, p {
  margin: 0; }

h1 {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 20px;
  text-decoration: blink; }

h2 {
  font-size: 2vw; }

.timer .readout {
  display: flex;
  font-size: 11vw;
  font-family: 'DS Digital', monospace;
  font-style: italic;
  font-weight: bold; }

.timer [data-datetime] {
  background: #111;
  display: flex;
  margin-right: 2%;
  margin-bottom: 2%;
  border-radius: 4px; }
  .timer [data-datetime] .placeholder {
    color: #222; }

.timer .blink {
  width: auto;
  animation: blinkingText 1s infinite steps(1); }

@keyframes blinkingText {
  0% {
    color: inherit; }
  50% {
    color: transparent; }
  100% {
    color: inherit; } }

#now {
  text-align: left;
  position: absolute;
  top: 50px;
  left: 0;
  margin: 0; }
  #now .readout {
    font-size: 30px;
    color: #4caf50; }

#destination {
  color: red;
  position: relative; }
  #destination .digit {
    width: 6vw;
    text-align: center; }
  #destination .digit.live {
    text-shadow: 0 0 5px black, 0 0 20px red; }
  #destination.traveling {
    transform: skewY(-30deg); }
    #destination.traveling span {
      color: red;
      position: relative; }

@keyframes glitch-one-anim-1 {
  0% {
    clip-path: inset(95% 0 6% 0); }
  6.66667% {
    clip-path: inset(12% 0 49% 0); }
  13.33333% {
    clip-path: inset(64% 0 37% 0); }
  20% {
    clip-path: inset(63% 0 11% 0); }
  26.66667% {
    clip-path: inset(13% 0 50% 0); }
  33.33333% {
    clip-path: inset(42% 0 22% 0); }
  40% {
    clip-path: inset(85% 0 12% 0); }
  46.66667% {
    clip-path: inset(66% 0 31% 0); }
  53.33333% {
    clip-path: inset(88% 0 2% 0); }
  60% {
    clip-path: inset(74% 0 6% 0); }
  66.66667% {
    clip-path: inset(23% 0 33% 0); }
  73.33333% {
    clip-path: inset(13% 0 14% 0); }
  80% {
    clip-path: inset(29% 0 61% 0); }
  86.66667% {
    clip-path: inset(23% 0 9% 0); }
  93.33333% {
    clip-path: inset(98% 0 2% 0); }
  100% {
    clip-path: inset(15% 0 22% 0); } }

@keyframes glitch-one-anim-2 {
  0% {
    clip-path: inset(66% 0 6% 0); }
  6.66667% {
    clip-path: inset(75% 0 25% 0); }
  13.33333% {
    clip-path: inset(88% 0 3% 0); }
  20% {
    clip-path: inset(23% 0 48% 0); }
  26.66667% {
    clip-path: inset(74% 0 11% 0); }
  33.33333% {
    clip-path: inset(91% 0 3% 0); }
  40% {
    clip-path: inset(1% 0 38% 0); }
  46.66667% {
    clip-path: inset(26% 0 54% 0); }
  53.33333% {
    clip-path: inset(14% 0 25% 0); }
  60% {
    clip-path: inset(60% 0 10% 0); }
  66.66667% {
    clip-path: inset(36% 0 36% 0); }
  73.33333% {
    clip-path: inset(52% 0 12% 0); }
  80% {
    clip-path: inset(38% 0 25% 0); }
  86.66667% {
    clip-path: inset(39% 0 40% 0); }
  93.33333% {
    clip-path: inset(76% 0 14% 0); }
  100% {
    clip-path: inset(26% 0 41% 0); } }
      #destination.traveling span::before, #destination.traveling span::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: black; }
      #destination.traveling span::after {
        left: 2px;
        text-shadow: -1px 0 blue;
        animation: glitch-one-anim-1 2s infinite linear alternate-reverse; }
      #destination.traveling span::before {
        left: -2px;
        text-shadow: 2px 0 green;
        animation: glitch-one-anim-2 3s infinite linear alternate-reverse; }

#scanning {
  height: 100%;
  background: green;
  opacity: 0.1;
  animation: progress 20s steps(20) infinite;
  position: absolute;
  bottom: 0;
  left: 0; }

@keyframes progress {
  0% {
    width: 0%; }
  100% {
    width: 100%; } }

#loading {
  height: 4rem;
  background: green;
  opacity: 0.4;
  animation: progress 10s linear infinite;
  position: absolute;
  bottom: 0;
  right: 0; }

@keyframes progress {
  0% {
    width: 0%; }
  100% {
    width: 100%; } }

#open-rift {
  position: absolute;
  bottom: -.15em;
  right: 0;
  font-style: italic;
  font-size: 3vw;
  opacity: .5; }