body {
  background-color: #00040D;
    color: #adceff;
}

/* Thin (100) */
@font-face {
  font-family: "JetBrainsMonoNF";
  src: url("./font/JetBrainsMonoNerdFontMono-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "JetBrainsMonoNF";
  src: url("./font/JetBrainsMonoNerdFontMono-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
}

/* ExtraLight (200) */
@font-face {
  font-family: "JetBrainsMonoNF";
  src: url("./font/JetBrainsMonoNerdFontMono-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "JetBrainsMonoNF";
  src: url("./font/JetBrainsMonoNerdFontMono-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
}

/* Light (300) */
@font-face {
  font-family: "JetBrainsMonoNF";
  src: url("./font/JetBrainsMonoNerdFontMono-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "JetBrainsMonoNF";
  src: url("./font/JetBrainsMonoNerdFontMono-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
}

/* Regular (400) */
@font-face {
  font-family: "JetBrainsMonoNF";
  src: url("./font/JetBrainsMonoNerdFontMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "JetBrainsMonoNF";
  src: url("./font/JetBrainsMonoNerdFontMono-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}

/* Medium (500) */
@font-face {
  font-family: "JetBrainsMonoNF";
  src: url("./font/JetBrainsMonoNerdFontMono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "JetBrainsMonoNF";
  src: url("./font/JetBrainsMonoNerdFontMono-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}

/* SemiBold (600) */
@font-face {
  font-family: "JetBrainsMonoNF";
  src: url("./font/JetBrainsMonoNerdFontMono-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "JetBrainsMonoNF";
  src: url("./font/JetBrainsMonoNerdFontMono-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
}

/* Bold (700) */
@font-face {
  font-family: "JetBrainsMonoNF";
  src: url("./font/JetBrainsMonoNerdFontMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "JetBrainsMonoNF";
  src: url("./font/JetBrainsMonoNerdFontMono-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}

/* ExtraBold (800) */
@font-face {
  font-family: "JetBrainsMonoNF";
  src: url("./font/JetBrainsMonoNerdFontMono-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "JetBrainsMonoNF";
  src: url("./font/JetBrainsMonoNerdFontMono-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
}

html, body {
  font-family: "JetBrainsMonoNF", monospace;
}

#star-container {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1; /* behind everything */
}

.star {
  position: absolute;
  opacity: 0;
  animation: blink 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes blink {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 1; }
}

.watermark {
  position: fixed;
  bottom: 16px;
  right: 16px;

  width: 20%;
  max-width: 100px;     /* caps the watermark size */
  min-width: 60px;      /* optional: keeps it readable */

  height: auto;
  opacity: 1;        /* watermark vibes */
  pointer-events: none;/* don't block clicks */
}


@media (max-width: 700px) {
  .watermark {
    max-width: 50px;
    opacity: 1;
  }
}

/* 50% opaque backgrounds for text to improve readability */
h1, h2, h3, h4, h5, h6,
p, li, a, span, strong, em, code, pre {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0.12em 0.35em;
  border-radius: 4px;
  width: fit-content;
}

/* Keep link color but use the same translucent background */
a {
  color: inherit;
  text-decoration: underline;
}