/* Import font size variables */
@import url('variables.css');



/* Headline Styling */
.headline-container {
  margin: 20px 0; /* Add spacing above and below the headline */
  text-align: center; /* Center align the headline */
}

.headline {
  font-size: var(--font-size-large); /* Use large font size for the headline */
  font-weight: bold;
  color: #333; /* Dark gray for readability */
  margin-bottom: 20px; /* Space below the headline */
}

/* Scrollable Box Styling */
.scrollable-box {
  max-width: 90%; /* Larger width for better readability */
  height: 70vh; /* Fixed height for scrolling */
  overflow-y: auto; /* Enable vertical scrolling */
  overflow-x: hidden; /* Disable horizontal scrolling */
  padding: 1rem; /* Padding for content spacing */
  background-color: #DBDDEDFF; /* Light background matching site theme */
  border-radius: 8px; /* Rounded corners for smooth appearance */
  margin: 0 auto; /* Center align horizontally */
  font-size: var(--font-size-medium); /* Use medium font size for content */
  color: #333; /* Dark gray for readability */ /* Black text for readability */
  text-align: left; /* Align text to the left */
}


/* Remove Border for the Last Element */
.scrollable-box p:last-child {
  border-bottom: none; /* No line below the last element */
}

/* Scrollbar Styling (Webkit Browsers) */
.scrollable-box::-webkit-scrollbar {
  width: 8px; /* Scrollbar width */
}

.scrollable-box::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent scrollbar thumb */
  border-radius: 4px; /* Rounded scrollbar edges */
}

.scrollable-box::-webkit-scrollbar-track {
  background-color: transparent; /* Transparent scrollbar track */
}

/* Scrollbar Styling (Firefox) */
.scrollable-box {
  scrollbar-width: thin; /* Slim scrollbar */
  scrollbar-color: rgba(0, 0, 0, 0.5) transparent; /* Custom thumb and track colors */
}

/* Link Styling */
.scrollable-box a {
  color: #007BFF; /* Blue for links */
  text-decoration: underline; /* Underlined links for clarity */
}

.scrollable-box a:hover {
  color: #0056b3; /* Darker blue on hover */
}