/* vt323-regular - latin */
@font-face {
  font-family: "VT323";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/vt323-v9-latin-regular.eot"); /* IE9 Compat Modes */
  src:
    local("VT323 Regular"),
    local("VT323-Regular"),
    url("../fonts/vt323-v9-latin-regular.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/vt323-v9-latin-regular.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/vt323-v9-latin-regular.woff") format("woff"),
    /* Modern Browsers */ url("../fonts/vt323-v9-latin-regular.ttf") format("truetype"),
    /* Safari, Android, iOS */ url("../fonts/vt323-v9-latin-regular.svg#VT323") format("svg"); /* Legacy iOS */
}

body {
  font-family: "VT323", sans-serif;
  color: #04d944;
  background: #252525;
  text-align: center;
  margin: 0;
}

h1 {
  font-weight: normal;
  text-transform: uppercase;
  font-size: 67px;
  margin-top: 0;
}

h2 {
  font-weight: normal;
}

h3 {
  font-weight: normal;
}

.hidden {
  display: none;
}

.error {
  color: #fff;
  font-size: 2rem;
}

pre {
  font-weight: 700;
  font-family: Arial;
}


.gif {
  max-width: 80px;
  display: block;
  margin: auto;
}

.deny-gif {
  max-width: 200px;
  margin-right: -1.5rem;
}

.notfound-gif {
  mix-blend-mode: color-dodge;
  max-width: 200px;
}


img.logo {
  max-width: 400px;
  height: auto;
  display: block;
  margin: auto;
}

img.logo-decoration {
  max-width: 100px;
  height: auto;
  display: block;
  margin: auto;
}

.content {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#term {
  height: 100vh;
  --background: #031e11;
  --size: 1.5;
}

.self {
  transform: scale(-1, 1);
}

#term::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.2);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.12s infinite;
}

@keyframes flicker {
0% {
  opacity: 0.552;
}
5% {
  opacity: 0.48287;
}
10% {
  opacity: 0.59134;
}
15.0% {
  opacity: 0.79543;
}
20% {
  opacity: 0.75134;
}
25% {
  opacity: 0.1956;
}
30.0% {
  opacity: 0.90687;
}
35% {
  opacity: 0.122;
}
40% {
  opacity: 0.62254;
}
45% {
  opacity: 0.56977;
}
50% {
  opacity: 0.9925;
}
55.0% {
  opacity: 0.55487;
}
60.0% {
  opacity: 0.16607;
}
65% {
  opacity: 0.12353;
}
70% {
  opacity: 0.2214;
}
75% {
  opacity: 0.67908;
}
80% {
  opacity: 0.97163;
}
85.0% {
  opacity: 0.1275;
}
90% {
  opacity: 0.37186;
}
95% {
  opacity: 0.24475;
}
100% {
  opacity: 0.37221;
}
}


.terminal {
  text-shadow: 0 0.2rem 1rem #0c7b46;
}

.scanlines {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(
      to bottom,
      rgba(255,255,255,0),
      rgba(255,255,255,0) 50%,
      rgba(0,0,0,.2) 70%,
      rgba(0,0,0,.6)
  );
  background-size: 100% .3rem;
  position: fixed;
  pointer-events: none;
}

.scanlines:before {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 5px;
background: #fff;
background: linear-gradient(to bottom,
  rgba(255,0,0,0) 0%,
  rgba(255,250,250,1) 50%,
  rgba(255,255,255,0.98) 51%,
  rgba(255,0,0,0) 100%
);
opacity: .1;
}

.scanlines:after {
box-shadow: 0 2px 6px rgba(25,25,25,0.2),
  inset 0 1px rgba(50,50,50,0.1),
  inset 0 3px rgba(50,50,50,0.05),
  inset 0 3px 8px rgba(64,64,64,0.05),
  inset 0 -5px 10px rgba(25,25,25,0.1);
}

#term + .scanlines:before {
content: '';
animation: vline calc(var(--time, 2) * 1s) linear infinite;
}

@supports (-ms-ime-align:auto) {
  .scanlines:before {
      content: '';
      animation: vline 3s linear infinite;
  }
}

@keyframes vline {
to { transform: translate(0, 100vh)}
}


.tv {
  height: 100vh;
  position: relative;
}

.tv.collapse {
  animation: size 2s ease-out;
  animation-fill-mode: forwards;
}

.tv.collapse:before {
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: white;
  z-index: 1;
  opacity: 0;
  animation: opacity 2s ease-out;
  animation-fill-mode: forwards;
}

@keyframes opacity {
  to { opacity: 1; }
}
@keyframes size {
  50% {
      transform: scaleX(calc(1 / var(--width)));
      opacity: 1;
  }
  98% {
      transform: scaleX(calc(1 / var(--width))) scaleY(calc(1 / var(--height)));
      opacity: 1;
  }
  100% {
      transform: scaleX(calc(1 / var(--width))) scaleY(calc(1 / var(--height)));
      opacity: 0;
  }
}