body {
  font-family: "Poppins", Open Sans, sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
  background-image: url('https://img.freepik.com/free-vector/blank-blue-halftone-background_53876-114466.jpg'); /* Path ke gambar latar belakang */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; /* Tidak diulang */
  background-attachment: fixed; /* Memastikan latar belakang tetap di posisi tetap */
}

.countdown-container {
  position: fixed; /* Menggunakan posisi tetap untuk memungkinkan penempatan di tengah */
  top: 50%; /* Meletakkan kontainer di tengah vertikal */
  left: 50%; /* Meletakkan kontainer di tengah horizontal */
  transform: translate(-50%, -50%); /* Menggeser kontainer setengah dari lebar dan tinggi kontainer */
  background-color: rgba(255, 255, 255, 0.7);
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.logo {
  max-width: 300px; /* Sesuaikan dengan lebar logo */
  margin-bottom: 0px;
}

#countdown {
  font-size: 36px;
  font-weight: bold;
}

/* Penyesuaian untuk perangkat seluler */
@media only screen and (max-width: 600px) {
  .countdown-container {
    width: 80%; /* Lebar kontainer diatur agar 80% dari lebar layar */
    max-width: 300px; /* Tetapkan lebar maksimum untuk menghindari kontainer menjadi terlalu lebar */
    margin: auto; /* Mengatur margin menjadi otomatis untuk memposisikan kontainer di tengah horizontal */
    padding: 10px; /* Mengurangi padding agar lebih sesuai dengan tampilan pada layar smartphone */
  }

  .logo {
    max-width: 80%; /* Sesuaikan dengan lebar logo di perangkat seluler */
    margin-bottom: 0px;
  }

  #countdown {
    font-size: 18px;
  }
}