/* This styles the scrollbar track (part the thumb slides within) */
::-webkit-scrollbar-track {
  background-color: rgb(34, 34, 34);
}

/* This styles the scrollbar thumb (the part that is draggable) */
::-webkit-scrollbar-thumb {
  background-color: #454545; /* Dark grey thumb */
  border-radius: 8px; /* Optional: rounds the corners of the scrollbar thumb */
  border: 4px solid rgb(34, 34, 34); /* Optional: adds a border around the thumb */
}

/* This styles the scrollbar itself (overall part, including track and thumb) */
::-webkit-scrollbar {
  width: 16px; /* Width of the vertical scrollbar */
  height: 8px; /* Height of the horizontal scrollbar */
}

/* Styling for hover over the scrollbar thumb */
::-webkit-scrollbar-thumb:hover {
  background-color: #a3a3a3; /* Darker grey on hover */
}

/* Upper container that should not scroll */
.upper-container {
  height: 60vh; /* Half of the screen */
  top: 4.5vh;
  overflow: hidden; /* No scrolling */
  background:
    radial-gradient(1200px 600px at 20% 85%, rgba(0, 0, 0, 0.08), rgba(0,0,0,0) 65%),
    radial-gradient(900px 450px at 80% 15%, rgba(255, 255, 255, 0.06), rgba(0,0,0,0) 60%),
    linear-gradient(to bottom, rgb(28, 28, 30), rgb(18, 18, 20));
  position: relative;
}

.upper-container::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(160% 60% at 50% -20%, rgba(0,0,0,0.75), rgba(0,0,0,0) 55%),
    radial-gradient(60% 40% at -10% 10%, rgba(0,0,0,0.55), rgba(0,0,0,0) 60%),
    radial-gradient(60% 40% at 110% 90%, rgba(0,0,0,0.55), rgba(0,0,0,0) 60%);
}

/* Lower container that should scroll */
.lower-container {
  height: 40vh; /* Half of the screen */
  overflow-x: hidden; /* Enable vertical scrolling */
  background:
    radial-gradient(1000px 500px at 15% 25%, rgba(80, 120, 200, 0.05), rgba(0,0,0,0) 65%),
    radial-gradient(800px 400px at 85% 75%, rgba(150, 100, 200, 0.04), rgba(0,0,0,0) 60%),
    linear-gradient(to bottom, rgb(15, 15, 17), rgb(8, 8, 10));
  position: relative;
}

.lower-container::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: 
    inset 0 40px 80px rgba(0,0,0,0.6),
    inset 0 8px 16px rgba(0,0,0,0.3);
}

.lower-container::after {
  content: '';
  position: fixed;
  left: 0px;
  height: 4px;
  top: 60%;
  width: 100%;
  background: linear-gradient(to bottom, 
    rgba(120, 120, 120, 0.15), 
    rgba(80, 80, 80, 0.08), 
    rgba(40, 40, 40, 0.03),
    rgba(0, 0, 0, 0)
  );
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 -1px 2px rgba(255, 255, 255, 0.05);
}

/* Example of setting z-index */
.upper-container, .lower-container {
  position: relative; /* z-index only works on positioned elements */
  z-index: 1; /* Ensure it's above the base level but adjust according to your needs */
  transition: all 0.3s ease-in-out;
}

/* Add a subtle border to help distinguish sections */
.upper-container {
  border-bottom: 1px solid rgba(60, 60, 60, 0.3);
}

.lower-container {
  border-top: 1px solid rgba(40, 40, 40, 0.5);
}