:root {
  --bg: #1e1f26;
  --text: #ffffff;
  --text-muted: #a1a1a1;
  --accent: #ff595e;
  --highlight: #8ac926;
}

/* =============================
   Reset & Base Styles
============================= */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 20px;
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Courier New', monospace;
  line-height: 1.6;
}

a {
  color: var(--highlight);
  text-decoration: none;
}

a:hover {
  color: var(--accent);
}

/* =============================
   Layout Helpers
============================= */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* =============================
   Carousel Styles
============================= */
.carousel {
  float: right;                 /* Align carousel to the right */
  min-width: 300px;
  max-width: 750px;
  height: 700px;               /* Fixed height */
  overflow: hidden;
  position: relative;
  margin-left: 20px;           /* Optional space from left content */
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

.carousel-track {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  /* Hide scrollbars */
  scrollbar-width: none; /* Firefox */
}

.carousel-track::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.carousel-track pre {
  min-width: 100%;           /* Show one code block at a time */
  flex-shrink: 0;
  scroll-snap-align: start;
  margin: 0;
  padding: 10px;
  background: #2a2b38;
  color: white;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  max-height: 400px;
  overflow: auto;
}

/* =============================
   Carousel Buttons (Optional)
============================= */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #46D64B;
  color: #ffffff;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 1.2rem;
  border-radius: 4px;
  z-index: 1;
}

.carousel-btn:hover,
.carousel-btn:focus {
  background-color: var(--highlight);
  outline: none;
}

.carousel-btn.prev {
  left: 10px;
}

.carousel-btn.next {
  right: 10px;
}

/* =============================
   Responsive (Optional)
============================= */
@media (max-width: 600px) {
  .carousel {
    float: none;
    width: 100%;
    height: auto;
    margin: 0 auto 20px auto;
  }

  .carousel-track pre {
    font-size: 0.9rem;
  }
}