styles.css

body {
  text-align: center;
}

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

.text {
  display: inline;
  font-size: 6rem;
  font-family: monospace;
}

.container {
  width: 99%;
}

.qr {
  height: 50px;
  position: absolute;
  bottom: 0;
  display: block;
}

.qr:hover {
  height: 400px;
}

.shell-cursor {
  background-color: white;
  height: 6rem;
  width: 3rem;
  display: inline-block;
  /* https://stackoverflow.com/questions/16344354/how-to-make-blinking-flashing-text-with-css-3 */
  animation: blinker 1s step-start infinite;
  margin-left: 0.5%;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 99%;
}

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

button {
  background-color: rgb(90, 90, 243);
  margin-bottom: 1%;
  border: 0;
  width: 80%;
  border-radius: 5px;
}

.link:hover {
  background-color: rgb(45, 45, 243);
  margin-bottom: 1%;
  border: 0;
}

.highlight {
  color: rgb(90, 90, 243);
}

/* https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design#responsive_typography */
@media screen and (min-width: 1200px) {
  .text {
    font-size: 4rem;
  }
  button {
    width: 30%;
  }
  .shell-cursor {
    height: 4rem;
    width: 2rem;
  }
  .qr{
    height: 100px;
  }
}

/* https://stackoverflow.com/questions/50840168/how-to-detect-if-the-os-is-in-dark-mode-in-browsers */

/* Light mode */
@media (prefers-color-scheme: light) {
  body {
      background-color: white;
      color: black;
  }
  .shell-cursor {
      background-color: black;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
      background-color: rgb(19, 13, 13);
      color: white;
  }
}