/* Set base styles for html and body */
html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
  background-color: #000;
  color: #fff;
}

/* Ensure body takes remaining space and allows footer to stay at bottom */
body {
  flex: 1;
}

/* Header styles */
header {
  background-color: #6a0dad;
  padding: 1em;
  text-align: center;
}

/* Main content styles */
main {
  padding: 1em;
}

/* Section title styling */
.section-title {
  text-align: center;
  margin-top: 0;
  margin-bottom: 1em;
}

/* Events list styles */
.events-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 600px;
}

/* Individual event item styling */
.event-item {
  border: 1px solid #fff;
  border-radius: 6px;
  padding: 1em;
  margin-bottom: 1em;
  background-color: #111;
}

/* Event date styling */
.event-date {
  font-weight: bold;
  margin-bottom: 0.5em;
}

/* Event description styling */
.event-description {
  font-size: 0.95em;
}

/* Footer styles */
footer {
  background-color: #6a0dad;
  padding: 1em;
  margin-top: auto; /* Push footer to the bottom if content is short */
}

/* Footer container styles */
.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
}

/* Home button styles */
.home-button {
  padding: 8px 16px;
  background: #fff;
  color: #000;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}

/* Home button hover state */
.home-button:hover {
  background: #777;
}

/* Link styles*/
.link {
  color: #ffed29;
}