body {
  background-image: url("background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow-x: hidden;
}

.photo-yoongi {
  position: fixed; /* Fotoğrafı görünüm penceresine sabitle */
  bottom: -50px; /* Fotoğrafı altta konum landır */
  right: 0; /* Fotoğrafı sağa hizala */
  left: auto; /* Sol hizalamayı devre dışı bırak */
}

.photo-yoongi img {
  max-width: 35%; /* Maksimum genişlik %50 */
  height: auto;
  margin-left: 60%; /* Kenar boşluklarını kaldır */
  transition: transform 0.3s ease; /* Dönüşüm geçişini ekle */
}

.photo-yoongi img:hover {
  transform: rotate(-5deg); /* Fare fotoğrafın üzerine geldiğinde sağa doğru dönüş yapacak */
}

.d-day {
  position: absolute; /* d-day container'ını mutlak konuma getir */
  top: 20%; /* Üst kenara hizala */
  left: 50px; /* Sol kenara hizala */
  transform: translateY(-50%);
}

.d-day img {
  display: block; /* İmajı blok element olarak ayarla */
  margin: 0 auto; /* İmajı yatayda hizala */
  width: 200px; /* İmaj genişliğini ayarla */
}

.progress-container {
  position: absolute;
  top: 100%;
  bottom: 20px; /* Resmin altından biraz yukarıda olacak şekilde ayarla */
  left: 100%;
  transform: translateX(-50%);
  width: 200%;
}

.progress-container .progress {
  padding: 6px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
  width: 100%;
}

.progress-bar {
  height: 18px;
  background-color: #ee303c;
  border-radius: 4px;
  transition: 0.4s linear;
  transition-property: width, background-color;
}

.progress-striped .progress-bar {
  background-color: #3c3c3c;
  width: 85%;
  background-image: linear-gradient(
      45deg, rgb(0, 0, 0) 25%,
      transparent 25%, transparent 50%,
      rgb(0, 0, 0) 50%, rgb(0, 0, 0) 75%,
      transparent 75%, transparent);
  animation: progressAnimationStrike 6s;
}

@keyframes progressAnimationStrike {
  from {
      width: 0
  }

  to {
      width: 85%
  }
}


@media (max-width: 1200px) {
  .photo-yoongi img {
    max-width: 40%; /* Küçük ekranlarda genişliği artır */
  }
}

@media (max-width: 768px) {
  .photo-yoongi img {
    max-width: 50%; /* Daha küçük ekranlarda genişliği artır */
  }
}

@media (max-width: 480px) {
  .photo-yoongi img {
    max-width: 70%; /* En küçük ekranlarda genişliği artır */
  }
}