@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/jetbrains-mono.ttf");
}

@font-face {
  font-family: "JetBrains NerdFont";
  src: url("./fonts/jetbrains-nerdfont.ttf");
}

html {
  margin: 0;
  scroll-behavior: smooth;
}

body,
header,
footer,
main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

body {
  margin: 0;
  min-height: 100vh;
  color: #fff;

  /* fallback black background */
  background-color: #000;

  background-image:
    /* bottom fade to black */
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0) -40%,
      rgba(0, 0, 0, 1) 80%),

    linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)),

    /* image */
    url("../images/background.gif");

  background-repeat: no-repeat;

  /* key change: NO cover */
  background-size: 100% auto;

  background-position: top center;
}

pre {
  margin: 0;
  padding: 0;
  font-weight: bolder;
  font-size: 18px;
}

.eyes {
  width: 3.3ch;
  /* Width of the image as 20 characters wide */
  height: 1em;
  /* Height of the image to match one line of text */
  vertical-align: middle;
  /* Align image with text */
  transform: scaleX(-1);
}

.badges {
  display: flex;
  width: 100%;
  height: fit-content;
  justify-content: center;
  align-items: center;
  gap: 10px
}

.badge {
  height: 15%;
}

img {
  max-width: 73ch;
}

@media screen and (max-width: 740px) {
  pre {
    font-size: 16px;
  }

  img {
    max-width: 90%;
  }
}

@media screen and (max-width: 810px) {
  pre {
    font-size: 14px;
  }
}

@media screen and (max-width: 650px) {
  pre {
    font-size: 12px;
  }
}

@media screen and (max-width: 570px) {
  pre {
    font-size: 10px;
  }
}

@media screen and (max-width: 500px) {
  pre {
    font-size: 9px;
  }
}

@media screen and (max-width: 450px) {
  pre {
    font-size: 8px;
  }
}

@media screen and (max-width: 410px) {
  pre {
    font-size: 7px;
  }
}

@media screen and (max-width: 360px) {
  pre {
    font-size: 6px;
  }
}

@media screen and (min-width: 400px) {
  .badge {
    padding-bottom: 20px
  }
}

a {
  color: #5454ff;
}

.red {
  color: #ff5555;
}

.green {
  color: #54ff54;
}

.blue {
  color: #5454ff;
}

.light-blue {
  color: #4f8cef;
}

.yellow {
  color: #ffff54;
}

.orange {
  color: #d89a58;
}

.cyan {
  color: #54ffff;
}

.purple {
  color: #8951c1;
}

.pink {
  color: #d692e5;
}

.gray {
  color: #a3a3a3;
}

.brown {
  color: #9e644a;
}