/* =========================
   CSS VARIABLES (THEME)
   ========================= */
:root {
  /* ===== Base (never change much) ===== */
  --bg-main: #ffffff;
  --bg-soft: #f6f6f6;
  --text-main: #111111;
  --border-main: #111111;

  /* ===== Neutral accents ===== */
  --ink-light: #444444;
  --ink-muted: #777777;

  /* ===== Primary theme color (was red terminal) ===== */
  --theme-main: #ae0011;
  --theme-dark: #c11a00;

  /* ===== RAINBOW ACCENTS ===== */
  --r-red: #ff4d4d;
  --r-orange: #ff944d;
  --r-yellow: #ffd54d;
  --r-green: #4dff88;
  --r-blue: #4dc3ff;
  --r-purple: #b84dff;

  /* ===== FUN EXTRAS ===== */
  --rainbow-gradient: linear-gradient(
    90deg,
    var(--r-red),
    var(--r-orange),
    var(--r-yellow),
    var(--r-green),
    var(--r-blue),
    var(--r-purple)
  );
}

/* =========================
   GLOBAL PAGE STYLES
   ========================= */
html,
body {
    margin: 0;
    padding: 1px;
    min-height: 100%;
    font-family: 'JetBrains Mono';
    font-size: 13px;
    background-color: #ffffff;
    color: #111111;
}

/* =========================
   GLOBAL LINKS
   ========================= */
body a {
    color: #111111;
    font-weight: bold;
}

/* =========================
   LISTS
   ========================= */
.list li {
    padding-bottom: 5px;
}

/* =========================
   MAIN CONTAINER
   ========================= */
#container {
    max-width: 900px;
    margin: 15px auto 0 auto;
    background-color: #ffffff;
}

/* =========================
   HEADINGS
   ========================= */
h1, h3, h5 {
  color: #111111;
}

h2, h4, h6 {
  color: #111111;
}

/* =========================
   HEADER
   ========================= */
#header {
    max-width: 900px;
    margin: 0 auto;
    background-color: #f6f6f6;
    border: 1px solid #111111;

}

.header-img {
    display: block;
    width: 100%;
    height: auto;
}


/* =========================
   NAVBAR
   ========================= */
.navbar {
    background-color: #ffffff;
    max-width: 1000px;
    border: 1px solid #ffffff;
    border-top: none;
    border-bottom: none;
    padding: 5px 0;
    text-align: center;
}

.navbar ul {
    list-style-type: none;
    padding: 0 20px;
}

.navbar li {
    position: relative;
    display: inline-block;
}

.navbar a {
    display: block;
    text-decoration: none;
    color: #111111;
    font-weight: bold;
    font-size: 14px;
    margin-right: 40px;
    transition: 0.2s all linear;
}

.navbar a:hover {
    background: #f6f6f6;
    color: #111111;
}

/* =========================
   DROPDOWN MENUS
   ========================= */
.navbar li > ul {
    display: none;
    position: absolute;
    background: #f6f6f6;
    border: 1px solid #111111;
}

.navbar li:hover > ul {
    display: block;
}

.navbar li > ul li {
    display: block;
}

.navbar li > ul a {
    padding: 5px 10px;
}

.navbar ul ul ul {
    position: absolute;
    left: 100%;
    top: 0;
}

.subitems {
    padding: 0;
    margin: 0;
}

/* =========================
   PAGE TITLES
   ========================= */
.title {
    font-size: 35px;
    text-align: center;
    font-style: italic;
    color: #111111;
}

.section-title {
    text-align: center;
    font-weight: bold;
    padding: 5px 0;
    background-color: #f6f6f6;
    color: #111111;
    font-size: 12px;

    border-bottom: 2px solid transparent;
    border-image: linear-gradient(
        90deg,
        #ff4d4d,
        #ff944d,
        #ffd54d,
        #4dff88,
        #4dc3ff,
        #b84dff
    ) 1;
}

/* =========================
   LAYOUT WRAPPER
   ========================= */
.wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

/* =========================
   SIDEBAR
   ========================= */
#left-sidebar {
    font-family: 'Poppins';
    width: 197px;
    border: 1px solid #111111;
    border-right: none;
    background-color: #ffffff;
}

/* =========================
   MAIN CONTENT
   ========================= */
.main-content {
    font-family: 'Poppins';
    width: 700px;
    border: 1px solid #111111;
}

.content {
    padding: 10px;
}

p {
    padding: 5px;
}

p a {
    color: #111111;
    font-weight: bold;
}

/* =========================
   CUSTOM SCROLLBAR
   ========================= */
.scroll::-webkit-scrollbar {
    width: 10px;
    background-color: #2e1e1a;
}

.scroll::-webkit-scrollbar-track {
    background-color: #ffffff;
}

.scroll::-webkit-scrollbar-thumb {
    background-color: #f6f6f6;
}

/* =========================
   FOOTER
   ========================= */
#footer {
    text-align: center;
    margin-bottom: 5px;
}

#footer p {
    background-color: #f6f6f6;
    width: 370px;
    margin: 5px auto;
    padding: 5px;
}

/* =========================
   FORM ELEMENTS
   ========================= */
textarea {
    background-color: #f6f6f6;
    color: #111111;
    font-size: 10px;
}

/* =========================
   CODE BLOCKS
   ========================= */
.code-wrapper {
    display: flex;
    padding-left: 10px;
}

.corner-img {
    position: fixed;       /* sticks in place even when scrolling */
    bottom: 0px;          /* distance from bottom */
    left: 10px;            /* distance from left */
    width: 250px;           /* adjust size as needed */
    height: auto;          /* keeps aspect ratio */
    z-index: 9999;         /* stays above all content */
    pointer-events: none;  /* clicks “pass through” */
}

.wave-img {
    width: 100px;           /* adjust size as needed */
    height: auto;          /* keeps aspect ratio */
    pointer-events: none;  /* clicks “pass through” */
}