/* --- Global & Body Styles --- */
body {
  /* Light blue to mint green gradient */
  background: linear-gradient(135deg, #a8c0ff, #a8ff78);
  background-attachment: fixed;
  color: #888888; /* Gray text */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 20px;
  line-height: 1.6;
}

/* --- Headings --- */
h1, h2, h3, h4, h5, h6 {
  color: #300032; /* Dark purple headings */
  font-family: 'Arial', sans-serif;
  text-align: center;
  letter-spacing: 2px;
  margin-top: 20px;
  margin-bottom: 10px;
}

h1 { font-size: 32px; }
h2 { font-size: 26px; }
h3 { font-size: 22px; }

/* --- Links --- */
a {
  color: #000000; /* Black links */
  text-decoration: none; /* No underline */
  font-weight: bold;
}

a:hover {
  color: #ffd700; /* Gold on hover */
  text-decoration: underline; /* Underline on hover */
}

/* --- Important Section (#IMPORTANT) --- */
#IMPORTANT, div#IMPORTANT {
  background-color: #d2691e; /* Chocolate colored box */
  border: 2px dotted #00ff00; /* Dotted green border */
  color: #ffffff; /* White text */
  padding: 15px;
  margin: 20px 0;
  border-radius: 8px;
}

/* Ensures text inside #IMPORTANT inherits the white color */
#IMPORTANT p, #IMPORTANT span, #IMPORTANT h1, #IMPORTANT h2, #IMPORTANT h3 {
  color: #ffffff;
}

/* --- Buttons --- */
button, input[type="button"], input[type="submit"] {
  background-color: #87ceeb; /* Light blue button */
  color: #000000;
  border: 2px solid #000000; /* Black border */
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.2s ease;
}

button:hover, input[type="button"]:hover, input[type="submit"]:hover {
  background-color: #ffd700; /* Turns gold on hover */
}

/* --- Horizontal Line --- */
hr {
  border: 0;
  height: 2px;
  background: #000000; /* Black and 2px thick */
  margin: 30px 0;
}