* {
  box-sizing: border-box; /* Tüm öğelerin kenar kutusunu kapsayıcı hale getir */
}

body,
html {
  height: 100%; /* Yüksekliği tam yap */
  margin: 0; /* Varsayılan marginleri kaldır */
  display: flex; /* Flexbox kullan */
  justify-content: center; /* Yatayda ortala */
  align-items: center; /* Dikeyde ortala */
  text-align: center; /* Metinleri ortala */
  background-color: #fbf6eb; /* Arka plan rengi */
}

#index {
  display: flex; /* Flexbox kullan */
  flex-direction: column; /* Dikey yönde hizala */
  align-items: center; /* Yatayda ortala */
}

#aab {
  margin: 20px 0; /* Üst ve alt boşluk */
}

#aac {
  display: flex; /* Flexbox kullan */
  justify-content: center; /* Yatayda ortala */
  margin: 20px 0; /* Üst ve alt boşluk */
}

#aac img {
  margin: 0 10px; /* Yan yana resimler arasında boşluk */
}

#aaf {
  margin: 20px 0; /* Üst ve alt boşluk */
}

#aag {
  margin: 20px 0; /* Üst ve alt boşluk */
  font-weight: bold; /* Kalın yazı */
}

/* Responsive CSS */
@media (max-width: 768px) {
  body,
  html {
    padding: 10px; /* Ekran boyutuna göre iç boşluk */
  }

  #index {
    padding: 0; /* Dış boşlukları kaldır */
  }

  #aac {
    flex-direction: column; /* Resimleri dikey sıraya yerleştir */
    align-items: center; /* Ortala */
  }

  #aac img {
    margin: 10px 0; /* Resimler arasında üst ve alt boşluk */
    max-width: 80%; /* Resim genişliğini sınırlama */
    height: auto; /* Yüksekliği otomatik ayarlama */
  }

  #aab span {
    font-size: 1.2em; /* Yazı boyutunu artır */
  }

  #aag span {
    font-size: 1.1em; /* Yazı boyutunu artır */
  }
}