@font-face {
    font-family: 'Rumutocu';
    src: url('../fonts/Rumutocu.woff2') format('woff2'),
         url('../fonts/Rumutocu.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Rumutocu (display / custom font) */
@font-face {
    font-family: 'Rumutocu';
    src: url('../fonts/Rumutocu.woff2') format('woff2'),
         url('../fonts/Rumutocu.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Hack - Monospace font family */
@font-face {
    font-family: 'Hack';
    src: url('../fonts/Hack/Hack-Regular.woff2') format('woff2'),
         url('../fonts/Hack/Hack-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hack';
    src: url('../fonts/Hack/Hack-Bold.woff2') format('woff2'),
         url('../fonts/Hack/Hack-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hack';
    src: url('../fonts/Hack/Hack-Italic.woff2') format('woff2'),
         url('../fonts/Hack/Hack-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Hack';
    src: url('../fonts/Hack/Hack-BoldItalic.woff2') format('woff2'),
         url('../fonts/Hack/Hack-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

/* IBM Plex Mono - Monospace font family */
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../fonts/IBMPlexMono/IBMPlexMono-Thin.woff2') format('woff2'),
         url('../fonts/IBMPlexMono/IBMPlexMono-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../fonts/IBMPlexMono/IBMPlexMono-ThinItalic.woff2') format('woff2'),
         url('../fonts/IBMPlexMono/IBMPlexMono-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

/* Repeat similar blocks for ExtraLight (200), Light (300), Regular (400), Medium (500), SemiBold (600), Bold (700) */
/* For brevity, the pattern is the same – adjust weight and style accordingly. */
/* Example for Regular: */
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../fonts/IBMPlexMono/IBMPlexMono-Regular.woff2') format('woff2'),
         url('../fonts/IBMPlexMono/IBMPlexMono-Regular.ttf') format('truetype');
    font-weight: normal;   /* or 400 */
    font-style: normal;
    font-display: swap;
}

/* Add the remaining weights and italics following the identical structure. */


/* =============================================
   Custom CSS for Future2021 Grav Theme
   Dark Charcoal / Onyx Theme with Red Accent (#db2828)
   Text: #efefef
   ============================================= */

/* ====================== ROOT BACKGROUND ====================== */
body,
#wrapper {
    background-color: #1e1e1e;           /* Dark charcoal / onyx background */
    color: #efefef;
}

/* Remove any forced white from main content area */
#main {
    background-color: transparent;
}

/* ====================== MAIN CONTENT AREA ====================== */
article.post {
    background-color: #2a2a2a;           /* Slightly lighter charcoal for content */
    color: #efefef;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    padding: 2.5rem 2rem;
}

/* Headings in main content */
article.post h1,
article.post h2,
article.post h3,
article.post h4,
article.post h5,
article.post h6 {
    color: #ffffff;
    font-weight: 600;
}

/* Paragraphs and lists */
article.post p,
article.post li {
    color: #efefef;
    line-height: 1.75;
}

/* Links */
article.post a,
a {
    color: #db2828;
}

article.post a:hover,
a:hover {
    color: #ff4d4d;
}

/* Feature boxes */
article.box {
    background-color: #2a2a2a;
    border: 1px solid #3a3a3a;
    color: #efefef;
}

article.box h3 {
    color: #ffffff;
}

/* Banner section */
#banner {
    background-color: #2a2a2a;
    color: #efefef;
}

#banner .content h2,
#banner .content p {
    color: #ffffff;
}

/* Contact section & form */
#contact {
    background-color: #2a2a2a;
    color: #efefef;
}

form input,
form textarea {
    background-color: #3a3a3a;
    color: #efefef;
    border: 1px solid #555;
}

form input:focus,
form textarea:focus {
    border-color: #db2828;
    background-color: #333;
}

button.button.primary,
.button {
    background-color: #db2828;
    color: #ffffff;
}

.button:hover {
    background-color: #b71f1f;
}

/* ====================== SIDEBAR ====================== */
#sidebar {
    background-color: #252525;
    color: #efefef;
}

#intro {
    background-color: #1e1e1e;
    color: #efefef;
}

#intro h2 {
    color: #ffffff;
}

.mini-posts article.mini-post,
#sidebar ul.posts li article {
    background-color: #2a2a2a;
    color: #efefef;
}

.mini-posts h3 a,
#sidebar ul.posts h3 a {
    color: #efefef;
}

.mini-posts h3 a:hover,
#sidebar ul.posts h3 a:hover {
    color: #db2828;
}

time.published {
    color: #aaaaaa;
}

/* Blurb / About */
.blurb {
    background-color: #2a2a2a;
    color: #efefef;
}

.blurb h2 {
    color: #ffffff;
}

/* ====================== HEADER ====================== */
#header {
    background-color: #1e1e1e;
    color: #efefef;
}

#header .logo a {
    color: #ffffff;
}

#header nav a {
    color: #efefef;
}

#header nav a:hover,
#header nav a.active {
    color: #db2828;
}

/* Dropdown menu */
#header nav.dropdown ul ul {
    background-color: #252525;
}

#header nav.dropdown ul ul a:hover {
    background-color: #1e1e1e;
    color: #db2828;
}

/* ====================== FOOTER ====================== */
#footer {
    background-color: #1e1e1e;
    color: #cccccc;
}

#footer a {
    color: #db2828;
}

#footer a:hover {
    color: #ff4d4d;
}

#footer .icons a {
    color: #cccccc;
}

#footer .icons a:hover {
    color: #db2828;
}

/* ====================== GENERAL ====================== */
body,
h1, h2, h3, h4, h5, h6,
p, li, time {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

pre,
code {
    background-color: #1e1e1e;
    color: #efefef;
    border: 1px solid #444;
}

/* Tables */
table th {
    background-color: #333;
    color: #ffffff;
}

table td {
    border-color: #444;
}

/* =============================================
   Custom Color Overrides for Future2021 Theme
   Place this file at: user/themes/future2021/assets/css/custom.css
   ============================================= */

/* Primary accent/link color */
a,
a:hover,
.button,
.btn,
.theme-accent {
    color: #db2828;          /* Change to your preferred accent color */
}

/* Background colors */
body,
.main-content,
.sidebar {
    background-color: #1e1e1e;   /* Main page background */
}

/* =============================================
   Custom Color & Font Overrides for Future2021 Theme
   File: user/themes/future2021/assets/css/custom.css
   ============================================= */

/* ====================== GENERAL FONT SETTINGS ====================== */
body,
h1, h2 {
    font-family: "Rumutocu";
} 

h3, h4, h5, h6,
p, a, li, time {
    font-family: 'IBMPlexMono', system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    /* Change the above line to your preferred font stack */
}

/* Optional: Increase base font size */
body {
    font-size: 1.02rem;
    line-height: 1.65;
}

/* ====================== SIDEBAR (#sidebar) ====================== */
#sidebar {
    background-color: #1e1e1e;           /* Light sidebar background */
    color: #ffffff;
}

/* Intro section */
#intro {
    background-color: #1e1e1e;           /* Dark header-like background for intro */
    color: #ffffff;
}

#intro h2 {
    color: #ffffff;
    font-family: "Rumutocu";
}

#intro p {
    color: #d1d8e0;
}

/* Logo link in sidebar intro */
#intro .logo {
    color: #ffffff;
    font-family: "Rumutocu";
}

/* Featured / Mini Posts section */
.mini-posts article.mini-post {
    background-color: #1e1e1e;
    border: 1px solid #e0e0e0;
}

.mini-posts h3 a {
    color: #efefef;
}

.mini-posts h3 a:hover {
    color: #db2828;
}

.mini-posts time.published {
    color: #7f8c8d;
}

/* Author images in mini-posts */
.mini-posts .author img {
    border: 2px solid #db2828;
}

/* Recent Posts section */
#sidebar section ul.posts li article {
    background-color: #1e1e1e;
}

#sidebar ul.posts h3 a {
    color: #efefef;
}

#sidebar ul.posts h3 a:hover {
    color: #db2828;
}

#sidebar ul.posts time.published {
    color: #7f8c8d;
}

/* Blurb / About section */
.blurb {
    background-color: #1e1e1e;
    color: #efefef;
}

.blurb h2 {
    color: #efefef;
}

.blurb .button {
    background-color: #db2828;
    color: #3e3e3e;
    border: none;
}

.blurb .button:hover {
    background-color: #db2828aa;
}

/* ====================== FOOTER (#footer) ====================== */
#footer {
    background-color: #1e1e1e;
    color: #ffffff;
}

#footer a {
    color: #db2828;
}

#footer a:hover {
    color: #db2828aa;
}

#footer .icons a {
    color: #db2828;
}

#footer .icons a:hover {
    color: #db2828aa;
}

#footer .copyright {
    color: #efefef;
}

/* ====================== MAIN HEADER (#header) ====================== */
#header {
    background-color: #1e1e1e;
    color: #ffffff;
}

#header .logo a {
    background-color: #1e1e1e;
    color: #ffffff;
    font-weight: 700;
}

/* Navigation links */
#header nav a {
    background-color: #1e1e1e;
    color: #efefef;
    font-weight: 700;
}

#header nav a:hover,
#header nav a.active {
    color: #db2828;
}

/* Dropdown menu styling */
#header nav.dropdown ul ul {
    background-color: #3e3e3e;
}

#header nav.dropdown ul ul a {
    color: #1e1e1e;
}

#header nav.dropdown ul ul a:hover {
    background-color: #3e3e3e;
    color: #db2828;
}

/* Main nav icons (search, menu, login) */
#header nav.main ul li a {
    color: #efefef;
}

#header nav.main ul li a:hover {
    color: #db2828;
}

/* ====================== ACCENT / LINK COLORS ====================== */
a {
    color: #db2828;
}

a:hover {
    color: #db2828aa;
}

/* Buttons */
.button,
.btn {
    background-color: #db2828;
    color: #ffffff;
}

.button:hover,
.btn:hover {
    background-color: #db2828aa;
}

/* ====================== ADDITIONAL USEFUL OVERRIDES ====================== */
/* Adjust these values to match your preferred color palette */

/* Primary accent color */
.accent-color,
.theme-accent {
    color: #db2828;
}

/* Dark mode friendly text on light backgrounds */
body, #sidebar {
    color: #ffffff;
}



/* =============================================
   Main Content Area Overrides (#main, article.post)
   ============================================= */

#main {
    background-color: #1e1e1e;           /* Main content background */
    color: #efefef;                      /* Primary text color */
    padding: 2rem 1.5rem;                /* Optional: adjust inner spacing if needed */
}

/* Article / Post container */
article.post {
    background-color: #1e1e1e;
    color: #efefef;
}

/* Post header with title */
article.post header .title h1 {
    background-color: #1e1e1e;
    color: #efefef;                      /* Main page title color */
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/* All headings inside the post content */
article.post h1,
article.post h2,
article.post h3,
article.post h4,
article.post h5,
article.post h6 {
    color: #efefef;
    font-weight: 600;
    line-height: 1.3;
}

article.post h1 { font-size: 2.2rem; }
article.post h2 { font-size: 1.85rem; }
article.post h3 { font-size: 1.55rem; }
article.post h4 { font-size: 1.35rem; }

/* Paragraphs and normal text */
article.post p,
article.post li,
article.post ul,
article.post ol {
    color: #efefef;
    line-height: 1.75;
}

/* Links inside the main content */
article.post a {
    color: #3498db;
    text-decoration: underline;
}

article.post a:hover {
    color: #2980b9;
}

/* Blockquote */
article.post blockquote {
    background-color: #2f2f2f;
    border-left: 5px solid #db2828aa;
    color: #efefef;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
}

/* Code and preformatted blocks */
article.post pre,
article.post code {
    background-color: #1e1e1e;
    color: #ecf0f1;
    font-family: 'Consolas', 'Courier New', monospace;
    border-radius: 4px;
}

/* Tables */
article.post table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.5rem 0;
}

article.post th,
article.post td {
    border: 1px solid #ddd;
    padding: 0.75rem;
    text-align: left;
}

article.post th {
    background-color: #1e1e1e;
    color: #ffffff;
}

/* Images inside content */
article.post img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1.5rem 0;
}

/* Buy Me a Coffee button image (specific to your page) */
article.post img[alt="Buy Me A Coffee"] {
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}



/* From main.css */


/* Logo */
#header .logo {
  font-family: "Rumutocu", Helvetica, sans-serif;
  font-size: 1.3em;
  font-weight: 800;
  height: inherit;
  line-height: inherit;
  padding: 0 0 0 1.5em;
  white-space: nowrap;
}

#header .logo a {
  font-size: 0.7em;
  letter-spacing: 0.25em;
  text-decoration: none;
  border-bottom: 0;
}

#header .logo a .logo-img {
  padding: 0.25em 0 !important;
  vertical-align: middle;
  height: 3em;
}

@media screen and (max-width: 736px) {
  #header .logo {
    font-size: 1em;
  }
}
/* Dropdown menu in header */
#header .dropdown {
  -moz-flex: 1;
  flex: 1;
  border-left: solid 1px rgba(160, 160, 160, 0.3);
  height: inherit;
  line-height: inherit;
  margin-left: 1.5em;
}

#header .dropdown li {
  position: relative;
  float: left;
  text-transform: uppercase;
  font-size: 14pt;
  height: inherit;
}

#header .dropdown li a {
  font-family: "Raleway", Helvetica, sans-serif;
  font-size: 0.7em;
  font-weight: 400;
  letter-spacing: 0.2em;
  border-bottom: none;
  padding: 0 0.8rem;
}

#header .dropdown li ul {
  position: absolute;
  top: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;
  line-height: normal;
  background-color: rgb(230, 230, 230);
  box-shadow: 0 0.05rem 1rem rgba(0, 0, 0, 0.15) !important;
  z-index: 10002;
}

#header .dropdown li ul li a {
  font-family: "Raleway", Helvetica, sans-serif;
  font-size: 0.7em;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-bottom: none;
  padding: 0.3rem 0.8rem;
  line-height: 2.5em;
}

#header .dropdown li ul li a:hover {
  color: #181818;
}

#header .dropdown li ul li ul {
  left: 100%;
  top: 0;
}

#header .dropdown ul li {
  margin-left: 0.5em;
  padding-left: 0.5em;
}

#header .dropdown ul li:first-child {
  border-left: 0;
}

#header .dropdown ul li:hover > ul {
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -moz-flex-direction: column;
  flex-direction: column;
  flex-wrap: nowrap;
  min-width: 15em;
  border: solid 1px rgba(160, 160, 160, 0.3);
  background-color: #ffffff;
  box-shadow: 0 0.05rem 1rem rgba(0, 0, 0, 0.15) !important;
}

@media screen and (max-width: 1280px) {
  #header .dropdown {
    display: none;
  }
}
@media screen and (max-width: 736px) {
  #header .dropdown {
    margin-left: -1rem;
    margin-right: -1rem;
  }
  #header .dropdown .fixed {
    margin: 0;
  }
}

/* =============================================
   TOP HEADER / NAVIGATION BAR - FORCE DARK BACKGROUND
   This overrides the remaining white background on the top menu
   ============================================= */

#header,
#header nav.dropdown,
#header nav.main,
#header .dropdown ul,
#header .main ul {
    background-color: #1e1e1e !important;   /* Your dark charcoal / onyx */
}

#header {
    border-bottom: 1px solid rgba(160, 160, 160, 0.3);   /* Matches the .heading style you found */
}

/* Logo text color */
#header .logo a {
    color: #efefef !important;
}

/* Navigation links */
#header nav a,
#header nav li a {
    color: #efefef !important;
}

#header nav a:hover,
#header nav a.active {
    color: #db2828 !important;
}

/* Dropdown sub-menus */
#header nav.dropdown ul ul {
    background-color: #252525 !important;
}

#header nav.dropdown ul ul a {
    color: #efefef !important;
}

#header nav.dropdown ul ul a:hover {
    background-color: #1e1e1e;
    color: #db2828 !important;
}

/* Main nav icons (search, menu, login) */
#header nav.main ul li a {
    color: #efefef !important;
}

#header nav.main ul li a:hover {
    color: #db2828 !important;
}