:root{
  --bg-dark:#050505;
  --glass: rgba(255,255,255,0.08);
  --neon: #8abaff; 
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0;}

html, body{
  min-height:100%;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto;
  color:#d6e6ff; 
  position:relative;
  overflow-x:hidden;
}


body {
  background:radial-gradient(circle at top, #0a0a12 0%, #000 70%);
  margin:0;
  text-shadow:0 0 8px rgba(120,170,255,0.6);
}


body::after {
  content:"";
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image: url('images/Spooky.jpg'); 
  background-size:cover;
  background-position:center;
  filter:blur(40px) brightness(0.7);
  opacity:0.6;
  z-index:-2;
}


@keyframes discoMove {
  0% { transform: translate(0,0);}
  50% { transform: translate(-20px,15px);}
  100% { transform: translate(0,0);}
}


.site-header{
  text-align:center;
  padding:20px 16px;
  font-size:4rem;
  font-weight:800;
  letter-spacing:2px;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(8px);
  color:#d6e6ff;
  text-shadow:
    0 0 10px rgba(120,170,255,0.7),
    0 0 20px rgba(80,130,255,0.4);
}


.container{
  max-width:1000px;
  margin:20px auto;
  padding:0 16px;
}

.hero{
  background:rgba(0,0,0,0.45);
  padding:20px;
  border-radius:16px;
  box-shadow:0 0 40px rgba(120,170,255,0.15);
  text-align:center;
}

.hero h1{
  font-size:2rem;
  margin-bottom:8px;
  color:#d6e6ff;
  text-shadow:
    0 0 10px rgba(120,170,255,0.7),
    0 0 20px rgba(80,130,255,0.4);
}

.hero p{
  font-size:1.3rem;
  opacity:0.95;
  color:#cfe0ff;
  text-shadow:0 0 6px rgba(120,170,255,0.5);
}


.slider-wrapper{
  padding-bottom:180px;
}

.slider{
  max-width:400px;
  margin:20px auto;
  position:relative;
  margin-top:70px;
}

.slide{
  display:none;
  text-align:center;
}

.slide.active{
  display:block;
}


.slide img{
  width:100%;
  max-height:380px;
  object-fit:cover;
  border-radius:16px;
  box-shadow:
    0 0 25px rgba(120,170,255,0.35),
    0 0 60px rgba(80,130,255,0.25);
}

.caption{
  margin-top:10px;
  font-size:1.5rem;
  color:#d6e6ff;
  text-shadow:
    0 0 8px rgba(120,170,255,0.7),
    0 0 16px rgba(80,130,255,0.4);
}


.slider-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.6);
  border:none;
  color:#d6e6ff;
  font-size:28px;
  padding:8px 14px;
  cursor:pointer;
  border-radius:12px;
  backdrop-filter:blur(6px);
  box-shadow:0 0 15px rgba(120,170,255,0.35);
  z-index:10;
}

.slider-btn.prev{left:12px;}
.slider-btn.next{right:12px;}

.slider-btn:hover{
  box-shadow:0 0 25px rgba(120,170,255,0.6);
}


.site-footer{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  padding:18px;
  text-align:center;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(10px);
  box-shadow:0 -10px 30px rgba(120,170,255,0.25);
  z-index:999;
}

.site-footer a{
  color:#d6e6ff;
  text-decoration:none;
  text-shadow:0 0 6px rgba(120,170,255,0.6);
}

.contact{
  font-size:1.4rem;
}


@media (max-width:768px) {
  .site-header{font-size:2.6rem;}
  .hero h1{font-size:1.3rem;}
  .hero p{font-size:1rem;}
  .slide img{height:auto;}
  .contact{font-size:1.1rem;}
  .slider-btn{font-size:35px;padding:6px 10px;}
  .slider{max-width:300px;}
  .slider{max-height:350px;}
  .dj-audio{max-width:200px;}
  
 body::before {
    position:absolute;
    min-height:100vh;
    content:"";
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:
      radial-gradient(circle at 20% 30%, rgba(120,170,255,0.10), transparent 40%),
      radial-gradient(circle at 80% 60%, rgba(120,170,255,0.07), transparent 45%);
    pointer-events:none;
    z-index:-1;
    background-repeat:no-repeat;
    background-size:cover;
    animation:discoMove 25s linear infinite;
  }
}

.lightbox {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(10px);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:99999;
}

.lightbox img {
  max-width:90%;
  max-height:90%;
  border-radius:12px;
  box-shadow: 0 0 25px rgba(120,170,255,0.7);
}

.audio-container {
  display:flex;
  justify-content:center;
  margin:20px 0;
}

@media (max-width:768px) { 
  .dj-audio{max-width:250px;} 
}

.dj-audio { 
  width:100%; 
  max-width:400px; 
  border-radius:30px; 
  background:rgba(0,0,0,0.4); 
  backdrop-filter:blur(6px); 
  box-shadow: 
    0 0 20px rgba(120,170,255,0.4), 
    0 0 40px rgba(80,130,255,0.25); 
}