/* Copyright (C) 2025 The BBJProjeK Organization */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

html {
  scroll-behavior: smooth;
  word-wrap: break-word;
  max-width: 800px;
  margin: auto;
}

body {
  background-color: var(--background);
  font-family: var(--ffamily);
  margin: 5%;
}

/* Root Classes */
:root {
  --foreground: #202020;
  --foreground-inv: #FFFFFF;
  --background: #FFFFFF;
  --background-alt: #E8E8E8;
  --branding: #5B6236;
  --heading: #404040;
  --ffamily: "IBM Plex Mono",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --foreground: #FFFFFF;
    --foreground-inv: #202020;
    --background: #000000;
    --background-alt: #161B22;
    --branding: #9CAF88;
    --heading: #CCCCCC;
  }
}

h1, h2, h3, h4 {
  color: var(--heading);
}

h1 {
  font-size: 2.4rem;
}

h3, h4 {
  font-style: italic;
}

p, a, li {
  color: var(--foreground);
}

ol li, ul li {
  margin-bottom: 8px;
}

ol > li::marker {
  font-weight: bold;
}

::selection {
  color: var(--foreground-inv);
  background: var(--branding);
}

a:link, a:visited {
  font-weight: bold;
  color: var(--branding);
}

h1, h2, h3, a, p {
  text-decoration-style: dashed;
}

img {
  max-width: 100%;
  border-radius: 10px;
}

hr.foot {
  margin-top: 42px;
  margin-bottom: 16px;
  border: 2px solid;
  color: var(--branding);
}

@media screen and (max-width: 800px) {
  body {
    margin: 5%;
    font-size: 0.9rem;
  }
}