@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 {
  background-color: #000;
  color: #ccc;
  margin: 0;
  font-family: "JetBrains NerdFont";
  letter-spacing: 1px;
  background-color: #000;
  /*user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;*/
}

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: 719px;
  justify-content: center;
  align-items: center;
  gap: 10px
}
.badge {
  width: calc(100% / 6);
}

img {
  max-width: 73ch;
}

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

  .badges {
    width: 646px;
  }

  img {
    max-width: 90%;
  }
}

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

  .badges {
    width: 574px;
  }
}

@media screen and (max-width: 590px) {
  pre {
    font-size: 12px;
  }
  
  .badges {
    width: 488px;
  }
}

@media screen and (max-width: 500px) {
  pre {
    font-size: 10px;
  }
  
  .badges {
    width: 415px;
  }
}

@media screen and (max-width: 450px) {
  pre {
    font-size: 9px;
  }
  
  .badges {
    width: 380px;
  }
}

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

  .badges {
    width: 330px;
  }
}

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;
}