html {
    height: 100%;
}
body {
    background: rgb(0,0,0);
    background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(27,27,27,1) 39%, rgba(38,38,38,1) 100%);
    color: lightgreen;
    font-family: 'Roboto Mono', monospace;
    line-height: 25px;
    height:100%;
    width: 100%;
    margin:0;
    padding:0;
}
a,a:visited {
    color: green;
}
.fancyText {
    font-family: 'Press Start 2P', cursive;
}
.mid {
    background-color: orange;
    color: black;
    padding: 1px 5px;
}
.high {
    background-color: orangered;
    color: black;
    padding: 1px 5px;
}
.crit {
    background-color: red;
    color: white;
    padding: 1px 5px;
}

.imprint {
    text-align: center;
}
.sign {

    animation: shine 2s forwards, flicker 3s infinite;
  }
  
  @keyframes blink {
    0%,
    22%,
    36%,
    75% {
      color: #c4f3c4;
      text-shadow: 0 0 0.6rem #c4f3c4, 0 0 1.5rem #11cf11,
        -0.2rem 0.1rem 1rem #85ec85, 0.2rem 0.1rem 1rem #11cf11,
        0 -0.5rem 2rem #008000, 0 0.5rem 3rem #008000;
    }
    28%,
    33% {
      color:#11cf11;
      text-shadow: none;
    }
    82%,
    97% {
      color: #008000;
      text-shadow: none;
    }
  }
  
  .flicker {
    animation: shine 2s forwards, blink 3s 2s infinite;
  }
  
  .fast-flicker {
    animation: shine 2s forwards, blink 10s 0.1s infinite;
  }
  
  @keyframes shine {
    0% {
      color: #008000;
      text-shadow: none;
    }
    100% {
        color: #c4f3c4;
        text-shadow: 0 0 0.6rem #c4f3c4, 0 0 1.5rem #11cf11,
          -0.2rem 0.1rem 1rem #85ec85, 0.2rem 0.1rem 1rem #11cf11,
          0 -0.5rem 2rem #008000, 0 0.5rem 3rem #008000;
    }
  }
  
  @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;
    }
  
}

.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 2s linear infinite;
}

@keyframes scanline {
    0% {
        bottom: 100%;
    }
    80% {
        bottom: 100%;
    }
    100% {
        bottom: 0%;
    }
}

.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;
    pointer-events: none;
    z-index: -1;
}
@media all and (min-width: 600px) {
	.crt {
    		padding: 100px;
	}
}
@media all and (max-width: 600px) {
	.crt {
    		padding: 10px;
	}
	h1 {
		line-height: 65px;
	}
}
.crt h1 {
    z-index: 4;
}
.crt p {
    z-index: 4;
}
.outter {
    position: relative;
    margin: 0;
    padding: 0;
}