@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;700&display=swap");
@import url("/assets/css/rouge.css"); /* Add this for syntax highlighting */

html, body {
  font-family: "Ubuntu Mono", monospace;
  background-color: #0B2B26; /*!important; /* Add !important to force the override */
  /* background-color: #464646; /*!important; Add !important to force the override */
  color: #c5bfbf; /* Light text */
  margin: 0;
  padding: 1em;
}

a {
  color: #bb86fc; /* Purple links for visibility */
}

a:hover {
  text-decoration: underline;
}

header, main {
  max-width: 800px;
  margin: 0 auto;
}

/* pre, code {
  font-family: "Ubuntu Mono", monospace;
  /*background-color: transparent; /* No background 
  color: #e0e0e0;
} */

pre, code,
.highlight, .highlight *,
.code-wrapper pre {
  font-family:
    "Fira Mono",        /* full box‑drawing set, true mono */
    "DejaVu Sans Mono", /* local fallback that also works   */
    "Ubuntu Mono",      /* your preferred body mono         */
    monospace;
  font-variant-east-asian: normal; /* 3 ▸ keep glyphs full‑width */
}

pre {
  padding: 1em;
  border-radius: 5px;
  overflow-x: auto;
  position: relative;
}

code {
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

.highlight {
  background-color: transparent /*!important; /* Override Rouge theme bg */
}

.highlight pre {
  background-color: transparent; /* Ensure no nested bg override */
  margin: 0;
}

/* Copy button styles */
.copy-btn {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  background-color: #333;
  color: #fff;
  border: none;
  padding: 0.5em;
  cursor: pointer;
  border-radius: 3px;
  font-size: 0.8em;
}

.copy-btn:hover {
  background-color: #555;
}


.highlight, .highlight * { font-family: "Ubuntu Mono", monospace !important; }


/* ---------- Code block wrapper ---------- */
.code-wrapper {
  position: relative;          /* copy button uses this as anchor */
  margin: 1.25rem 0;           /* some breathing room */
}

/* real box around code: */
.code-wrapper pre {
  background: #262626;         /* dark theme bg */
  border: 1px solid #434343;   /* thin frame */
  border-radius: 6px;
  padding: 1rem;
  overflow-x: auto;            /* long lines scroll */
}

/* copy button now sits *outside* top-right, zero overlap */
.code-wrapper .copy-btn {
  position: absolute;
  top: -2.2rem;                /* float above the box */
  right: 0;
  background: #434343;
  color: #fff;
  border: none;
  padding: .4rem .8rem;
  font-size: .75rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
}

.code-wrapper .copy-btn:hover {
  background: #5a5a5a;
  top: -1.5rem;
}


.post img {
  /* never overflow the text column */
  max-width: 100%;
  /* force the image itself to fill that space */
  width: 100%;
  height: auto;      /* keep aspect ratio */
}

.post-content img {
  max-width: 100%;   /* never overflow column            */
  height: auto;      /* keep aspect ratio                */
  display: block;    /* makes the auto margins kick in   */
  margin: 1.25rem auto;  /*  ⬅︎  auto left+right ⇒ centred  */
}

.center { 
  display:block; 
  margin-left:auto; 
  margin-right:auto; 
}