body {
    font-family: monospace, monospace;
}

/* This makes the two columns sit next to each other */
.column-container {
  display: flex;
  gap: 20px; /* Space between the two columns */
  width: 100%;
}


/* Styles for the left column */
.left-column {
  flex: 40%; /* Takes up 30% of the row width */
  background-image: url('https://files.catbox.moe/c487zn.png'); /* Optional: adds a background color */
  background-size: cover;
  background-position: center;
  width: 100%;
  max-width: 400px;
  height: 250px;
  padding: 15px;
}

/* Styles for the right column */
.right-column {
  flex: 40%; /* Takes up 70% of the row width */
  background-image: url('https://files.catbox.moe/c487zn.png'); /* Optional: adds a background color */
  background-size: cover;
  background-position: center;
  width: 100%;
  max-width: 400px;
  height: 250px;
  padding: 15px
}

/* Makes columns stack vertically on mobile screens so your site isn't broken */
@media (max-width: 600px) {
  .column-container {
    flex-direction: column;
  }
}

/* -------------------------------------------------------- */
/* SCROLLBAR STYLING */
/* -------------------------------------------------s------- */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 5px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
    border: 3px double var(--accent);
}

::selection {
    color: black;
    background: var(--accent);
}


/* Scrolling Areas */
.scrollable {
    max-height: 200px;
    border-radius: var(--border-radius);
    padding: var(--padding);
    overflow: scroll;
    border: 1px solid var(--borders);
}

.scrollable ul {
    margin: 0;
}

.image,
.full-width-image,
.two-columns {
    margin: 0.75em 0;
}



pre {
    margin: 1em 0 1.5em;
    overflow: hidden;
}

.header-container {
  position: relative; /* This keeps the images locked to the header */
  width: 100%;
  text-align: center;
  padding: 50px 0; /* Adjust height to fit your layout */
}

.header-banner {
  max-width: 100%;    /* Prevents the image from overflowing mobile screens */
  height: auto;       /* Keeps the original proportions of your image */
  border-radius: 8px;
  border-width: 4px;
  border-style: solid;
  border-color: #b7978b;
}


      /* Container holding all three columns side-by-side */
  .layout-container {
  display: flex;
  gap: 20px; /* Space between the columns */
  max-width: 1200px;
  margin: 0 auto; /* Centers the whole website on the screen */
  padding: 20px;
}

/* Global styles for both sidebars */
.sidebar {
  width: 200px; /* Width of your sidebars */
  flex-shrink: 0; /* Prevents sidebars from shrinking */
  background-color: #fcf4f2; /* Change to match your site's aesthetic */
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  border-width: 4px;
  border-style: solid;
  border-color: #b7978b;
}

/* Main Content takes up all remaining space */
.main-content {
  flex-grow: 1;
  background-color: #fcf4f2;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  border-width: 4px;
  border-style: solid;
  border-color: #b7978b;
}

/* Optional: Make the sidebars "sticky" so they stay on screen when scrolling */
.sidebar {
  position: sticky;
  top: 20px;
  height: fit-content;
}

/* Mobile Responsiveness: Stacks everything vertically on small screens */
@media (max-width: 768px) {
  .layout-container {
    flex-direction: column;
  }
  .sidebar {
    width: 100%; /* Sidebars stretch to full width on phones */
  }
}