* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: CPN, sans-serif;
}

body {
  background-color: #f9fafb;
}

body.arlington header {
  background: linear-gradient(45deg, #ff8200, #fff300);
  background-color: unset;
}

header {
  background-color: #1565c0;
  color: white;
  text-align: center;
  padding: 20px 0;
}

main {
  padding: 20px;
  text-align: center;
}

.election-choice h2 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}
/* เพิ่มตรงนี้สำหรับ section ทั้งกล่อง */
.election-choice {
  animation: fadeIn 1.2s ease forwards;
}

/* เพิ่ม delay ถ้าอยากให้ header แยกมา fade ก่อน */
header {
  background-color: #1565c0;
  color: white;
  text-align: center;
  padding: 20px 0;
  animation: fadeIn 0.8s ease forwards;
}

/* ปรับ button ให้เฟดพร้อมกัน */
button {
  font-size: 18px;
  padding: 15px 20px;
  background-color: #1976d2;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  width: 90%;
  max-width: 600px;
  transition: background-color 0.3s;
  animation: fadeIn 1.5s ease forwards;
}

button:hover {
  background-color: #0d47a1;
}
/* Animation แบบ fade-in */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px); /* เลื่อนลงมานิดนึง */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.election-choice {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  padding: 30px 20px;
  border-radius: 20px;
  animation: fadeIn 1s ease forwards;
}

.election-choice h2 {
  font-size: 28px;
  margin-bottom: 30px;
  color: #1e293b;
}

body.arlington .election-choice button {
  background: #ff8200;
}

body.arlington .election-choice button:hover {
  background: #ff6f00;
  transform: translateY(-3px);
}

.election-choice button {
  width: 100%;
  margin: 10px 0;
  padding: 15px 20px;
  font-size: 18px;
  border: none;
  border-radius: 12px;
  background: #1976d2;
  color: white;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
  animation: fadeUp 0.8s ease both;
}

.election-choice button:hover {
  background: #0d47a1;
  transform: translateY(-3px);
}

footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    padding: 10px;
    background: #00b111;
}