:root {
  color-scheme: light dark;

  --black: #000000;
  --white: #FFFFFF;
  --red: #813338;
  --cyan: #75CEC8;
  --purple: #8E3C97;
  --green: #56AC4D;
  --blue: #2E2C9B;
  --yellow: #EDF171;
  --orange: #8E5029;
  --brown: #553800;
  --light-red: #C46C71;
  --dark-gray: #4A4A4A;
  --gray: #7B7B7B;
  --light-green: #A9FF9F;
  --light-blue: #706DEB;
  --light-gray: #B2B2B2;

  --border-color: light-dark(var(--light-blue), var(--black));
  --background-color: light-dark(var(--blue), var(--black));
  --text-color: light-dark(var(--light-blue), var(--green));;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@keyframes flashing {
  20% {
    background-image: repeating-linear-gradient(
      to bottom,
      var(--cyan)         0.0em  0.5em,
      var(--purple)       0.5em  1.0em,
      var(--green)        1.0em  1.5em,
      var(--blue)         1.5em  2.0em,
      var(--yellow)       2.0em  2.5em,
      var(--orange)       2.5em  3.0em,
      var(--brown)        3.0em  3.5em,
      var(--light-red)    3.5em  4.0em,
      var(--dark-gray)    4.0em  4.5em,
      var(--gray)         4.5em  5.0em,
      var(--light-green)  5.0em  5.5em,
      var(--light-blue)   5.5em  6.0em,
      var(--light-gray)   6.0em  6.5em,
      var(--black)        6.5em  7.0em, /* */
      var(--white)        7.0em  7.5em,   
      var(--red)          7.5em  8.0em
    );
  }   

  42% {
    background-image: repeating-linear-gradient(
      to bottom,
      var(--black)        0.0em  0.5em, /* */
      var(--white)        0.5em  1.0em,   
      var(--red)          1.0em  1.4em,
      var(--cyan)         1.4em  2.0em,
      var(--purple)       2.0em  2.5em,
      var(--green)        2.5em  3.0em,
      var(--blue)         3.0em  3.5em,
      var(--yellow)       3.5em  4.0em,
      var(--orange)       4.0em  4.7em,
      var(--brown)        4.7em  5.0em,
      var(--light-red)    5.0em  5.5em,
      var(--dark-gray)    5.5em  6.1em,
      var(--gray)         6.1em  6.5em,
      var(--light-green)  6.5em  7.0em,
      var(--light-blue)   7.0em  7.5em,
      var(--light-gray)   7.5em  8.0em
    );
  }   

  59% {
    background-image: repeating-linear-gradient(
      to bottom,
      var(--orange)       0.0em  0.7em,
      var(--brown)        0.7em  1.1em,
      var(--light-red)    1.1em  1.5em,
      var(--dark-gray)    1.5em  2.0em,
      var(--gray)         2.0em  2.5em,
      var(--light-green)  2.5em  3.2em,
      var(--light-blue)   3.2em  3.5em,
      var(--light-gray)   3.5em  4.0em,
      var(--black)        4.0em  4.5em, /* */
      var(--white)        4.5em  5.0em,
      var(--red)          5.0em  5.5em,
      var(--cyan)         5.5em  6.3em,
      var(--purple)       6.3em  6.5em,
      var(--green)        6.5em  7.0em,
      var(--blue)         7.0em  7.6em,
      var(--yellow)       7.6em  8.1em
    );
  }

  80% {
    background-image: repeating-linear-gradient(
      to bottom,
      var(--gray)         0.0em  0.5em,
      var(--light-green)  0.5em  1.1em,
      var(--light-blue)   1.1em  1.5em,
      var(--light-gray)   1.5em  2.0em,
      var(--black)        2.0em  2.5em, /* */
      var(--white)        2.5em  3.3em,
      var(--red)          3.3em  3.5em,
      var(--cyan)         3.5em  4.0em,
      var(--purple)       4.0em  4.5em,
      var(--green)        4.5em  5.2em,
      var(--blue)         5.2em  5.5em,
      var(--yellow)       5.5em  6.1em,
      var(--orange)       6.1em  6.5em,
      var(--brown)        6.5em  7.0em,
      var(--light-red)    7.0em  7.5em,
      var(--dark-gray)    7.5em  8.0em
    );
  }
  
  100% {
    background-image: repeating-linear-gradient(
      to bottom,
      var(--purple)       0.0em  0.5em,
      var(--green)        0.5em  1.0em,
      var(--blue)         1.0em  1.6em,
      var(--yellow)       1.6em  2.3em,
      var(--orange)       2.3em  2.5em,
      var(--brown)        2.5em  3.0em,
      var(--light-red)    3.0em  3.5em,
      var(--dark-gray)    3.5em  4.1em,
      var(--gray)         4.1em  4.5em,
      var(--light-green)  4.5em  5.0em,
      var(--light-blue)   5.0em  5.5em,
      var(--light-gray)   5.5em  6.0em,
      var(--black)        6.0em  6.5em, /* */
      var(--white)        6.5em  7.1em,
      var(--red)          7.1em  7.5em,
      var(--cyan)         7.5em  8.2em
    );
  }
}

html {
  height: 100%;
  margin: 0;
}

body {
  height: 100%;
  margin: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: var(--border-color);

  line-height: 1.02;

  font-family: Kommondore, monospace;
  text-transform: uppercase;
  font-size: 2.8vh;

  /* animation: flashing 0.2s step-start 0s infinite; */
}

pre {
  background-color: var(--background-color);
  color: var(--text-color);

  font-family: Kommondore;

  transform: scale(0.936, 1.0);

  width: 40em;
  height: 25em;
  margin: 0;
  padding: 0;
}

pre.with-cursor::after {
  /* content: "\0a \a0"; */
  content: "\a0";
  white-space: pre;
  background-color: var(--text-color);
  animation: blink 0.67s step-start 0s infinite;
}

@media screen and (max-aspect-ratio: 4/3) {
  body {
    font-size: 2.1vw;
  }
}