:root {
  --accent: rgb(255, 0, 0);
  --header-bg: rgba(9, 0, 51, 1);
  --text-color: white;
}

body {
  font-family: "dos";
  color: var(--text-color);
  background: url('../images/wallpaper.png') center/cover no-repeat fixed;

  animation: flicker 0.15s;
}

@keyframes flicker {
  0% { opacity: 0.2; }
  50% { opacity: 1; }
  70% { opacity: 0.6; }
  100% { opacity: 1; }
}

h1 {
  margin: .5em 0;
}

p, li{
    font-size: 18px;
    margin: 0 0 0.5em 0;
}

ul {
  list-style: square;
}

a { 
  color: inherit; 
  text-decoration: none; 
}

a:hover { 
  text-decoration: underline; 
  color: var(--accent); 
}

pre, code { 
  margin: 0;
  font-family: "dos";
  white-space: pre-wrap; 
  line-height: 1.1em;
}

@font-face {
  font-family: "dos";
  src: url(../fonts/ModernDOS8x14.ttf);
}


/*Flicker and typing when loading, CRT effect the rest of the time*/
/* CRT effect*/
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.2),
    rgba(0,0,0,0.2) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}

/*Typing effect*/
.command {
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
  animation: typing 2s steps(20, end) forwards;
}

@keyframes typing {
  from { max-width: 0 }
  to { max-width: 100% } /* match character count */
}

.output {
  opacity: 0;
  animation: showOutput 0s linear forwards;
  animation-delay: 0.7s;
}

@keyframes showOutput {
  to {
    opacity: 1;
  }
}

@keyframes blink {
  0% {visibility: hidden}
  50% {visibility: visible}
}