.container {
  flex-direction: column;
}
body {
  background-image: url(../images/wallpaper.png);
}
/* Custom styles for full width modal */
.modal-dialog {
  max-width: 100vw;
  margin: 0;
}
.modal-content {
  width: 100vw;
  background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
  border: none;
}

.modal-body img {
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}
/* Centering the button */
.center-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
/* Transparent background */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent backdrop */
}

/* 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);
}

.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 */
  }
}