.container {
  background-image: url(../images/wallpaper.png);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.container h1 {
  font-family: "Pixelify Sans", sans-serif;
  font-size: 45px;
  font-weight: bold;
  color: #fbff00;
}

.cloud {
  background-image: url("../images/awan.png");
  width: 250px; /* Sesuaikan dengan lebar gambar awan Anda */
  height: 250px;
  background-size: cover; /* Sesuaikan dengan tinggi gambar awan Anda */
  position: absolute;
  top: 50px; /* Sesuaikan dengan posisi vertikal awan */
  animation-duration: 20s; /* Durasi animasi */
  animation-timing-function: linear; /* Pergerakan linier */
  animation-iteration-count: infinite; /* Animasi berulang */
  transition: 1s ease-in-out;
}

.cloud1 {
  top: 70px;
  left: -100px; /* Atur posisi awan pertama di luar layar kiri */
  animation-name: moveCloud1; /* Nama animasi untuk awan pertama */
}

.cloud2 {
  top: -100px;
  left: -290px; /* Atur posisi awan kedua di luar layar kiri */
  animation-name: moveCloud2; /* Nama animasi untuk awan kedua */
}

.cloud3 {
  top: 40px;
  left: -300px; /* Atur posisi awan kedua di luar layar kiri */
  animation-name: moveCloud2; /* Nama animasi untuk awan kedua */
}

.cloud4 {
  top: -50px;
  left: -600px; /* Atur posisi awan kedua di luar layar kiri */
  animation-name: moveCloud2; /* Nama animasi untuk awan kedua */
}

/* Buat animasi untuk setiap awan */
@keyframes moveCloud1 {
  to {
    transform: translateX(
      calc(100vw + 100px)
    ); /* Geser awan pertama ke kanan sejauh 100vw (lebar viewport) + 100px */
  }
}

@keyframes moveCloud2 {
  to {
    transform: translateX(
      calc(100vw + 200px)
    ); /* Geser awan kedua ke kanan sejauh 100vw (lebar viewport) + 200px */
  }
}

/* Tambahkan animasi untuk awan-awan berikutnya dengan prinsip yang sama */

.container .menu {
  margin-top: 250px;
  display: flex;
  justify-content: space-between;
  gap: 70px;
}
.container .menu .cardMenu h3 {
  font-family: "Pixelify Sans", sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: white;
  margin-top: -5px;
}

.container .menu .cardMenu {
  transition: 0.2s ease-in-out;
}

.container .menu .cardMenu:hover {
  transform: scale(1.2);
}

.container .menu a {
  text-decoration: none;
}

#back {
  transition: 0.2s ease-in-out;
}

#back:hover {
  transform: scale(1.2);
}