html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
   background-color: #252525;
    color: white;
    font-family: 'Poppins', sans-serif;
}

.app-body {
  font-family: 'Roboto', sans-serif;
  background-color: #252525;
  color: #fff;
}


h1, .text-accent {
  color: #FFCC00;
  font-family: 'Playfair Display', serif;
}

.description-text {
  color: #ddd;
}

.participation-banner {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

#chartdiv {
  width: 100%;
  height: 600px;
  border-radius: 12px;
  margin-top: 30px;
}

.input-group input {
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
}

.input-group input::placeholder {
  color: #ccc;
}

.btn-primary {
  background-color: #FFCC00;
  border: none;
  font-weight: bold;
  color: #252525;
}

.btn-primary:hover {
  background-color: #e6b800;
}

.modal-content {
  background-color: #1e1e1e;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-close {
  filter: invert(1);
}
#chartdiv {
  width: 100%;
  height: 600px;
}



.footer {
  margin-top: auto;
}

#emailError {
  font-size: 0.9rem;
}