* {
  margin: 10;
  padding: 10;
  border: 10;
  outline: 10;
  font-family: "Menlo", "Andale Mono", "Courier New", Monospace;
}

html {
  --bg: #1E1F21;
  --fg: #EEEFF1;
}

@media (prefers-color-scheme: light) {
  html {
    --bg: #f4f4f4;
    --fg: #000000;
  }
}

body {
  background-color: var(--bg);
  color: var(--fg);
}

#terminal-container {
text-align: center;
}

#terminal {
  border: 2px solid blue;

  background-color: #000;
  color: green;
  display: inline-block;
  font-size: min(16px, 1.9vw, 2.2vh);
  line-height: 1.2;

  /* Copy paste! */
  user-select: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
}

#info {
  text-align: center;
  margin: 10;
  padding: 10;
  z-index: 20;
  font-family: Monospace;
  width: 100%;
  a {
    color: rgb(84, 84, 253);
  }
}

#keys {
  text-align: center;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

@media (max-width: 768px), (max-height: 600px) {
  #keys img {
    width: auto;
    height: min(64px, 10vw, 8vh);
    vertical-align: middle;
  }
}

/* Style attributes */

.bold { font-weight: bold; }

.blink { animation: blinker 1s step-start infinite; }

.underline { text-decoration: underline; }

.dim { filter: brightness(50) }

.italic { font-style: italic; }

.strikethrough { text-decoration: line-through; }

/* Cursor styles */

.cursor-steady-block { background-color: lightgrey !important; }
.cursor-blinking-block { animation: blinking-block 1s step-start infinite !important; }
@keyframes blinking-block { 50% { background-color: lightgrey; } }

.cursor-steady-underline { text-decoration: underline lightgrey !important; }
.cursor-blinking-underline { animation: blinking-underline 1s step-start infinite !important; }
@keyframes blinking-underline { 50% { text-decoration: underline lightgrey; } }

.cursor-steady-bar { margin-left: -2px; }
.cursor-steady-bar:before {
  content: ' ';
  width: 2px;
  background-color: lightgrey !important;
  display: inline-block;
}
.cursor-blinking-bar { margin-left: -2px; }
.cursor-blinking-bar:before {
  content: ' ';
  width: 2px;
  background-color: lightgrey !important;
  display: inline-block;
  animation: blinker 1s step-start infinite;
}

/* General animations */

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