@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

:root {
  --dark-blue: rgb(6,57,112);
  --medium-blue: rgb(30,129,176);
  --light-blue: rgb(171,219,227);
}

* {
  box-sizing: border-box;
}

.shadowed {
  filter: drop-shadow(10px 7px 8px var(--dark-blue));
}

html, body, #error-exella, #terminal, #reveal {
  margin:0;
  padding:0;
  width: 102%;
  height: 102%;
  overflow: hidden;
  position: absolute;
  top: -1%;
  left: -1%;

  background: var(--dark-blue);
  background: linear-gradient(135deg, var(--dark-blue) 0%, var(--medium-blue) 100%);

  color: var(--light-blue);
}

.layer{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

h1.glitch {
  color: #eee;
  font-size: 5vw;
  font-family: 'Share Tech Mono', monospace;
  text-align: center;
  letter-spacing: -.14em;
}

#logo div {
  position: relative;
}
#logo div svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.raleway {
  font-family: 'Raleway', sans-serif;
}
.code {
  font-family: 'VT323', monospace;
}


/*
 * TERMINAL
 */

#crt:before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
  to bottom,
  rgba(18, 16, 16, 0) 50%,
  rgba(0, 0, 0, 0.25) 50%
  );
  background-size: 100% 8px;
  z-index: 2;
  pointer-events: none;
}

.scanline {
  width: 100%;
  height: 100px;
  z-index: 8;
  background: linear-gradient(
  0deg,
  rgba(0, 0, 0, 0) 0%,
  rgba(255, 255, 255, 0.2) 10%,
  rgba(0, 0, 0, 0.1) 100%
  );
  opacity: 0.1;
  position: absolute;
  bottom: 100%;
  animation: scanline 10s linear infinite;
}
@keyframes scanline {
  0% {
    bottom: 100%;
  }
  80% {
    bottom: 100%;
  }
  100% {
    bottom: 0%;
  }
}
#screen {
  position: relative;
  width: 100%;
  height: 67.5vmin;
  border: 30px solid transparent;
  overflow: hidden;
}

#reveal {
  font-size: 2.5rem;
  z-index: 1000;
  background: none;
  font-family: "Share Tech Mono", monospace;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#reveal > div {
  position: absolute;
}
.shake {
  animation: 0.8s linear infinite running shakeme;
}
@keyframes shakeme {
  0%   { transform: translate(2px, 1px) rotate(0deg); }
  10%  { transform: translate(-1px, -2px) rotate(-1deg); }
  20%  { transform: translate(-3px, 0px) rotate(1deg); }
  30%  { transform: translate(0px, 2px) rotate(0deg); }
  40%  { transform: translate(1px, -1px) rotate(1deg); }
  50%  { transform: translate(-1px, 2px) rotate(-1deg); }
  60%  { transform: translate(-3px, 1px) rotate(0deg); }
  70%  { transform: translate(2px, 1px) rotate(-1deg); }
  80%  { transform: translate(-1px, -1px) rotate(1deg); }
  90%  { transform: translate(2px, 2px) rotate(0deg); }
  100% {transform: translate(1px, -2px) rotate(-1deg); }
}
.shakemore {
  animation: 0.8s linear infinite running shakememore;
}
@keyframes shakememore {
  0%   { transform: translate(4px, 2px) rotate(1deg); }
  10%  { transform: translate(-2px, -4px) rotate(-2deg); }
  20%  { transform: translate(-6px, 0px) rotate(2deg); }
  30%  { transform: translate(0px, 4px) rotate(0deg); }
  40%  { transform: translate(2px, -2px) rotate(2deg); }
  50%  { transform: translate(-2px, 4px) rotate(-2deg); }
  60%  { transform: translate(-4px, 2px) rotate(0deg); }
  70%  { transform: translate(4px, 2px) rotate(-2deg); }
  80%  { transform: translate(-2px, -2px) rotate(2deg); }
  90%  { transform: translate(4px, 4px) rotate(0deg); }
  100% {transform: translate(2px, -4px) rotate(-2deg); }
}

.hidden {
  display: none;
}

.text-lightblue {
  transition-property: text-shadow;
  transition-duration: 5s;
}


@keyframes loading {
  0%, 100% { height: attr(height); }
  50%     {  height: 0; }
}
.sine {
  animation: loading 1.5s ease-in-out infinite;
}
.sine:nth-child(1) { animation-delay: 0.1s; }
.sine:nth-child(2) { animation-delay: 0.2s; }
.sine:nth-child(3) { animation-delay: 0.3s; }
.sine:nth-child(4) { animation-delay: 0.4s; }
.sine:nth-child(5) { animation-delay: 0.5s; }
.sine:nth-child(6) { animation-delay: 0.6s; }
.sine:nth-child(7) { animation-delay: 0.7s; }
.sine:nth-child(8) { animation-delay: 0.8s; }
.sine:nth-child(9) { animation-delay: 0.9s; }
.sine:nth-child(10){ animation-delay: 1s;   }
.sine:nth-child(11){ animation-delay: 1.1s; }
.sine:nth-child(12){ animation-delay: 1.2s; }
.sine:nth-child(13){ animation-delay: 1.3s; }
.sine:nth-child(14){ animation-delay: 1.4s; }
.sine:nth-child(15){ animation-delay: 1.5s; }
.sine:nth-child(16){ animation-delay: 1.6s; }
.sine:nth-child(17){ animation-delay: 1.7s; }