/* Font dan scroll */
body {
  font-family: 'Montserrat', sans-serif; /* ganti sesuai font Google Fonts */
  scroll-behavior: smooth;
}

#home {
  background: url('../images/background.jpg') no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  color: rgb(255, 255, 255);
  position: relative;
}

/* Overlay biar teks tetap terbaca */
#home::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5); /* hitam transparan */
}
#home .container {
  position: relative;
  z-index: 1;
}

#about {
  background-color: #c4ffe6; /* abu terang */
}

#games {
  background-color: #303442; /* biru pastel */
}

#message {
  background-color: #d6ffbd; /* krem */
}

#contact {
  background-color: #f1f5f9; /* abu muda */
}

/* Card umum */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: none;
  border-radius: 10px;
}

/* Hover effect */
.card:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.card.genshin a { background-color: #7dd3fc; color: #0c4a6e; }
.card.hsr a { background-color: #c4b5fd; color: #4c356d; }
.card.dota a { background-color: #fca5a5; color: #7f1d1d; }
.card.zzz a { background-color: #fcd34d; color: #78350f; }

.card.genshin a:hover { background-color: #0ea5e9; color: white; }
.card.hsr a:hover { background-color: #8b5cf6; color: white; }
.card.dota a:hover { background-color: #ef4444; color: white; }
.card.zzz a:hover { background-color: #fbbf24; color: white; }
footer {
  font-size: 0.9rem;
}

/* Animasi masuk */
.message-box {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease forwards;
  animation-delay: 0.3s;
}

/* Keyframes animasi */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Transisi tombol */
#secretForm button {
  transition: background-color 0.3s ease, transform 0.3s ease;
}
#secretForm button:hover {
  transform: scale(1.05);
}

footer a {
  color: #ddd;
  text-decoration: none;
}
footer a:hover {
  color: white;
}