body {
  font-family: "Preahvihear", sans-serif;
}

.landing-section {
  background: url('../img/bgpaper.jpg') center/cover no-repeat;
  min-height: 100vh;
  padding: 5rem 1rem;
  position: relative;
  z-index: 0;
}

.landing-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.527);
  z-index: -1;
}

.landing-content {
  z-index: 1;
}

.landing-text {
  font-size: clamp(1.5rem, 2.5rem, 4.2rem);
}

.highlight {
  background-color: #f1c40f;
  color: #000;
  padding: 0 0.4rem;
  border-radius: 0.25rem;
}

.text-shadow-pop {
  color: #e84393;
  text-shadow: 2px 2px 0 #1d1b1b, -2px -2px 0 #1d1b1b;
  font-weight: 700;
}


.btn-selector {
  background: transparent;
  color: white;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.btn-selector:hover {
  border-color: #fff;
}

.bento-heading {
  font-size: clamp(1.2rem, 1.7rem, 2.2rem);
}

.about-us-wrapper {
  position: relative;
  top: 35px; 
}

.btn-about-us {
  font-weight: bold;
  font-size: 1.2rem;
  padding: 12px 28px;
  border: 2px solid #8e44ad;
  color: #8e44ad;
  background-color: white;
  transition: all 0.3s ease;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  top: 40px; 
}

.btn-about-us:hover {
  background-color: #8e44ad;
  color: white;
}

.scrollable-selector {
  height: 100vh;
  overflow-y: auto;
  padding: 1rem;
}

.selector-heading {
  font-size: clamp(1.5rem, 2.5rem, 4.2rem);
}

.iframe-container {
  display: flex;
  justify-content: center; 
  align-items: center;     
}

iframe {
  border: none;            
  width: 80vh;             
  height: 70vh;            
}

.about-heading {
  font-size: clamp(1.5rem, 2.5rem, 4.2rem);
}

.snoopy {
  width: 170px;
  transform: translateX(130px);
  top: 80px;
  left: 0;
  position: absolute;
}

.guitar {
  width: 120px;
  transform: translateX(290px);
  bottom: 80px;
  left: -50px;
  position: absolute;
}

.happy {
  width: 140px;
  transform: translateX(-160px);
  top: 100px;
  right: 0;
  position: absolute;
}

.headphones {
  width: 200px;
  transform: translateX(-90px);
  bottom: 80px;
  right: 0;
  position: absolute;
}

.loading {
  width: 180px;
  transform: translateY(100px);
  top: 30px;
  left: 0;
  position: absolute;
}

.lpplayer {
  width: 220px;
  transform: translateX(20px);
  bottom: 30px;
  left: -30px;
  position: absolute;
}

.mouse {
  width: 140px;
  transform: translateY(100px);
  top: 10px;
  right: 0;
  position: absolute;
}

.musicnotes {
  width: 240px;
  transform: translateY(-260px);
  bottom: 30px;
  right: 0;
  position: absolute;
}

.recorder {
  width: 240px;
  transform: translateY(200px);
  top: 0;
  left: 0;
  position: absolute;
}

/* For mobile screens (up to 576px) */
@media (max-width: 576px) {
  .snoopy {
    width: 110px !important;
    opacity: 0.5;
    transform: translate(10px, 20px) !important;
  }

  .happy {
    width: 80px !important;
    opacity: 0.5;
    transform: translate(-15px, 125px) !important;
  }

  .loading {
    width: 60px !important;
    opacity: 0.5;
    transform: translate(150px, 40px) !important;
  }

  .mouse {
    width: 50px !important;
    opacity: 0.5;
    transform: translate(-10px, 85px) !important;
  }

  .recorder {
    width: 60px !important;
    opacity: 0.5;
    transform: translate(20px, 120px) !important;
  }

  .guitar,
  .lpplayer {
    width: 50px !important;
    top: 0 !important;
    bottom: auto !important;
    opacity: 0.5;
  }

  .headphones {
    width: 60px !important;
    opacity: 0.5;
    top: 40px !important;
    bottom: auto !important;
  }

  .musicnotes {
    width: 180px !important;
    opacity: 0.5;
    top: -140px !important;
    bottom: auto !important;
  }

  iframe {
  border: none;            
  width: 80vh;             
  height: 90vh;            
  }
}

/* For tablets (577px to 1024px) */
@media (min-width: 577px) and (max-width: 1024px) {
  .snoopy {
    width: 120px !important;
    opacity: 0.7;
    transform: translate(10px, 50px) !important;
  }

  .happy {
    width: 180px !important;
    opacity: 0.7;
    transform: translate(-15px, 625px) !important;
  }

  .loading {
    width: 60px !important;
    opacity: 0.7;
    transform: translate(150px, 20px) !important;
  }

  .lpplayer {
    width: 90px !important;
    opacity: 0.7;
    transform: translate(300px, -80px) !important;
  }

  .mouse {
    width: 80px !important;
    opacity: 0.7;
    transform: translate(-10px, 385px) !important;
  }

  .recorder {
    width: 160px !important;
    opacity: 0.7;
    transform: translate(20px, 500px) !important;
  }

  .guitar {
    width: 90px !important;
    opacity: 0.7;
    transform: translate(140px, -30px) !important;
  }

  .headphones {
    width: 80px !important;
    opacity: 0.7;
    top: 20px !important;
    bottom: auto !important;
  }

  .musicnotes {
    width: 180px !important;
    opacity: 0.7;
    top: -140px !important;
    bottom: auto !important;
  }

  .scrollable-selector {
    height: 80vh;
    overflow-y: auto;
    padding: 1rem;
  }

  .iframe {
    border: none;            
    width: 60vh;      
    height: 60vh;
  }
}