*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

body{
  background:linear-gradient(120deg,#0f2027,#203a43,#2c5364);
  color:#fff;
  min-height:100vh;
  overflow-x:hidden;
}

.overlay{
  position:fixed;
  inset:0;
  background:radial-gradient(circle at top,#ffffff10,transparent);
  pointer-events:none;
}

header{
  text-align:center;
  padding:40px 20px;
}

header h1{
  font-size:42px;
  text-shadow:0 0 20px #00f2ff;
}

header p{
  opacity:0.8;
}

.player{
  background:#00000060;
  width:320px;
  margin:20px auto;
  padding:20px;
  border-radius:20px;
  text-align:center;
  box-shadow:0 0 30px #00f2ff60;
  animation:float 4s ease-in-out infinite;
}

@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

.player img{
  width:100%;
  border-radius:15px;
  margin-bottom:15px;
}

.controls button{
  font-size:22px;
  background:#00f2ff;
  border:none;
  margin:10px;
  padding:10px 15px;
  border-radius:50%;
  cursor:pointer;
  transition:0.3s;
}

.controls button:hover{
  transform:scale(1.2);
  box-shadow:0 0 15px #00f2ff;
}

.gallery{
  padding:40px 20px;
  text-align:center;
}

.gallery h2{
  margin-bottom:20px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
}

.grid img{
  width:100%;
  border-radius:15px;
  transition:0.4s;
  box-shadow:0 10px 30px #000;
}

.grid img:hover{
  transform:scale(1.1);
  box-shadow:0 0 30px #00f2ff;
}

footer{
  text-align:center;
  padding:20px;
  opacity:0.6;
}