body{
margin:0;
font-family:Arial,sans-serif;
background:#0b1f3a;
color:white;
}

.hero{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:linear-gradient(
135deg,
#08152d,
#133b70
);
}

.hero-content{
text-align:center;
}

.hero-content h1{
font-size:5rem;
}

.menu{
margin-top:30px;
}

.menu a{

display:inline-block;

padding:15px 25px;

margin:10px;

background:white;

color:#0b1f3a;

text-decoration:none;

border-radius:40px;

transition:.4s;
}

.menu a:hover{

transform:translateY(-5px);

}

header{

padding:20px;

background:#08152d;

display:flex;

justify-content:space-between;

align-items:center;

}

header a{

color:white;

text-decoration:none;

}

.back-to-top{

position:fixed;

right:20px;

bottom:20px;

z-index:10000;

background:white;

color:#0b1f3a;

border:none;

padding:10px 14px;

border-radius:30px;

cursor:pointer;

font-size:14px;

transition:opacity .25s ease, transform .3s ease;

box-shadow:0 10px 30px rgba(0,0,0,.25);

}

.back-to-top:hover{

transform:translateY(-2px);

}


#gallery{

display:grid;

grid-template-columns:
repeat(auto-fill,minmax(280px,1fr));

gap:20px;

padding:30px;

}

.photo{

overflow:hidden;

border-radius:15px;

}

.photo img{

width:100%;

height:350px;

object-fit:cover;

transition:.5s;

}

.photo:hover img{

transform:scale(1.08);

}


.lightbox{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.95);

display:none;

justify-content:center;
align-items:center;

z-index:9999;

}

.lightbox img{

max-width:90%;
max-height:90%;

border-radius:15px;

}

.close{

position:absolute;

top:20px;
right:40px;

font-size:60px;

cursor:pointer;

}

.nav-btn{

position:absolute;

top:50%;

transform:translateY(-50%);

background:white;

border:none;

padding:20px;

font-size:30px;

cursor:pointer;

border-radius:50%;

}

.left{
left:20px;
}

.right{
right:20px;
}

/* Music UI */
#music-ui{
  position:fixed;
  right:20px;
  top:20px;
  z-index:10001;
  display:flex;
  gap:10px;
  align-items:center;
}

#music-btn{
  background:white;
  color:#0b1f3a;
  border:none;
  padding:10px 14px;
  border-radius:30px;
  cursor:pointer;
  font-size:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* Hide the native audio element */
#audio{display:none;}
#music{display:none;}

/* Photo Animation */
.photo{

animation:
fadeUp .8s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:
translateY(50px);

}

to{

opacity:1;

transform:
translateY(0);

}

}