:root{
  --accent:#ffffff;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:'Poppins',sans-serif;
  background:#000;
  color:#fff;
  overflow-x:hidden;
}

/* LINKS */
a{
  text-decoration:none;
  color:#fff;
}

/* PLAYER */
.player{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}

/* FONDO */
.bg{
  position:absolute;
  inset:0;

  background-size:cover;
  background-position:center;

  filter:blur(18px);

  transform:scale(1);

  opacity:.45;

  transition:.5s;
}

/* TOPBAR */
.topbar{
  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:70px;

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

  z-index:99999;

  background:transparent;
}

/* TITULO */
.title{
  font-size:26px;
  font-weight:600;

  color:var(--accent);

  transition:.3s;
}

/* BOTON MENU */
.mobile-nav-toggle{
  position:fixed;

  left:15px;
  top:35px;

  transform:translateY(-50%);

  border:none;
  background:none;

  color:var(--accent);

  font-size:24px;

  cursor:pointer;

  z-index:9999;

  transition:.3s;
}

/* MENU */
#header{
  position:fixed;

  top:0;
  left:-260px;

  width:240px;
  height:auto;

  padding:90px 15px 20px;

  z-index:1000;

  transition:left .35s ease;

  background:transparent;

  pointer-events:none;
}

/* MENU ACTIVO */
.mobile-nav-active #header{
  left:0;
  pointer-events:auto;
}

/* LISTA */
.nav-menu ul{
  list-style:none;
  padding:0;
  margin:0;
}

.nav-menu li{
  margin-bottom:12px;
}

/* BOTONES MENU */
.nav-menu a{
  display:flex;
  align-items:center;
  gap:12px;

  padding:14px;

  border-radius:14px;

  background:rgba(255,255,255,.08);

  color:var(--accent);

  transition:.25s;
}

/* HOVER */
.nav-menu a:hover,
.nav-menu a:active{

  background:var(--accent);

  color:#000;

}

.nav-menu a:hover i,
.nav-menu a:active i,

.nav-menu a:hover span,
.nav-menu a:active span{

  color:#000;

}

/* ICONOS */
.nav-menu i{
  font-size:18px;
  color:var(--accent);
  transition:.25s;
}

/* TEXTO MENU */
.nav-menu span{
  color:var(--accent);
  transition:.25s;
}

/* CONTENIDO */
.content{
  position:relative;

  z-index:10;

  width:100%;
  height:100dvh;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;

  padding:80px 32px;
}

/* COVER */
.cover{
  width:260px;
  height:260px;

  min-width:260px;
  min-height:260px;

  max-width:260px;
  max-height:260px;

  border-radius:24px;

  margin-top:10px;
  margin-bottom:10px;

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  overflow:hidden;

  flex-shrink:0;

  box-shadow:
    0 20px 40px rgba(0,0,0,.55);

  transition:.4s;
}
/* METADATA */
.meta-box{
  width:100%;
  max-width:1000px;
  height:90px;
}

.meta-title,
.meta-artist{
  white-space:nowrap;
}

.meta-title{
  font-size:24px;
  font-weight:600;
  min-height:42px;

  display:flex;
  align-items:center;
  justify-content:center;
}

.meta-artist{
  font-size:22px;
  opacity:.7;

  min-height:36px;

  display:flex;
  align-items:center;
  justify-content:center;
}

/* CONTROLES */
.controls{
  width:100%;
  max-width:420px;

  display:flex;
  flex-direction:column;
  align-items:center;

  margin-top:12px;
}

/* PLAY */
.play{
  width:80px;
  height:80px;

  border-radius:50%;

  border:5px solid var(--accent);

  background:transparent;

  color:var(--accent);

  font-size:24px;

  cursor:pointer;

  transition:.25s;

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

.play:hover{
  transform:scale(1.2);
}

/* SLIDER */
.slider{
  margin-top:28px;

  width:100%;
  height:5px;

  background:transparent;

  border-radius:50px;

  position:relative;

  cursor:pointer;
}

/* FILL */
.fill{
  width:100%;
  height:100%;

  background:var(--accent);

  border-radius:50px;
}

/* THUMB */
.thumb{
  position:absolute;

  top:50%;
  left:100%;

  transform:translate(-50%,-50%);

  width:18px;
  height:18px;

  border-radius:50%;

  background:var(--accent);

  box-shadow:0 0 10px rgba(0,0,0,.5);
}

/* FOOTER */
footer{
  position:fixed;
  left:0;
  bottom:0;

  width:100%;

  padding:8px;

  text-align:center;

  font-size:12px;

  z-index:30;

  background:rgba(0,0,0,.35);
}

/* MOBILE */
@media(max-width:991px){

  .cover{
    width:260px;
    height:260px;

    min-width:260px;
    min-height:260px;

    max-width:260px;
    max-height:260px;

    margin-top:12px;
    margin-bottom:20px;
  }

.content{
  padding:20px 12px 24px;
}

.controls{
  width:90%;
  margin-top:10px;
}

.slider{
  margin-top:20px;
}

.play{
  width:74px;
  height:74px;
  margin-bottom:10px;
}

.bg{
  filter:blur(12px);
}

.meta-box{
  width:100%;
  overflow:hidden;
}

.meta-title,
.meta-artist{
  overflow:hidden;
  white-space:nowrap;
  position:relative;
}

}