/* General Styling for the Content Box */
main .content-box {
  max-width: 900px; /* Restrict content width for readability */
  margin: 50px auto; /* Center the box */
  padding: 30px;
  background: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
  border-radius: 15px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.247); /* Soft shadow for separation */
  color: #ffffff; /* White text */
  line-height: 1.8;
  text-align: justify;
  border: 1px solid rgba(255, 255, 255, 0.247); /* Subtle border */
}

header h1 {
  text-align: center; /* Centers the title horizontally */
  margin: 0 auto; /* Ensures no unintended side margins */
  font-size: 3rem; /* Adjust the font size if needed */
  font-family: 'Orbitron', sans-serif; /* Keep the same font for consistency */
  color: #000000; /* Ensures contrast with the background */
}

header p {
  text-align: center; /* Centers the subtitle below the title */
  margin-top: 10px; /* Adds space between the title and subtitle */
  font-size: 1.2rem; /* Adjust subtitle size */
  color: rgb(0, 0, 0); /* Slightly lighter for readability */
}


/* Styling for Headings */
main .content-box h1,
main .content-box h2 {
  font-family: 'Orbitron', sans-serif;
  color: #00bcd4; /* Accent color */
  margin-bottom: 20px;
}

main .content-box h1 {
  font-size: 2.5rem;
  text-align: center; /* Center the main heading */
}

main .content-box h2 {
  font-size: 2rem;
  margin-top: 30px; /* Add spacing above subheadings */
}

/* Styling for Paragraphs and Text */
main .content-box p,
main .content-box ul,
main .content-box li {
  font-size: 1.1rem;
  font-family: 'Roboto', sans-serif;
  color: rgba(255, 255, 255, 0.9); /* Slightly lighter white for balance */
  margin-bottom: 15px;
}

/* Lists */
main .content-box ul {
  padding-left: 20px;
  list-style-type: disc; /* Standard bullet points */
}

main .content-box li {
  margin-bottom: 10px;
}

/* Links */
main .content-box a {
  color: #00bcd4; /* Accent color for links */
  text-decoration: underline;
}

main .content-box a:hover {
  color: #ffffff; /* White on hover */
  text-decoration: none;
}

/* Footer Styling */
footer {
  text-align: center;
  padding: 25px;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.384); /* Subtle dark footer */
  margin-top: 50px;
  border-radius: 12px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  main .content-box {
    padding: 20px;
  }

  main .content-box h1 {
    font-size: 2rem;
  }

  main .content-box h2 {
    font-size: 1.8rem;
  }

  main .content-box p {
    font-size: 1rem;
  }
}