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

body{
  background:#000;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* PLAYER CONTAINER */

.player{
  position:relative;
}

/* CARD */

.card{
  width:400px;
  height:400px;
  background:#ff1a1a;
  border-radius:28px;

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

  padding:35px 30px 30px;
  transform:scale(0);
  opacity:0;
  transition:.45s cubic-bezier(.2,.8,.2,1);
}

.player.open .card{
  transform:scale(1);
  opacity:1;
}

/* INFO */

.info{
  text-align:center;
  color:white;
}

.info h2{
  font-size:28px;
  font-weight:700;
}

.info p{
  opacity:.8;
  margin-top:5px;
}

/* COVER */

.coverBox{
  width:200px;
  height:200px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.coverBox img{
  width:180px;
  height:180px;
  border-radius:18px;
  border:4px solid white;
  object-fit:cover;
  transition:.35s;
}

/* CONTROLS */

.controls{
  display:flex;
  gap:40px;
  align-items:center;
}

.controls button{
  background:none;
  border:none;
  color:white;
  font-size:42px;
  cursor:pointer;
  transition:.2s;
}

.controls button:hover{
  transform:scale(1.15);
}

#play{
  font-size:58px;
}

/* TOGGLE */

.toggle{
  position:absolute;
  top: 20%;
  left: 50%;

  transform:translateX(-50%);

  width:72px;
  height:72px;
  border-radius:50%;
  border:none;
  background:#ff1a1a;
  color:white;
  font-size:30px;

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

  cursor:pointer;

  transition:.35s cubic-bezier(.2,.8,.2,1);
}

/* CUANDO SE ABRE */
.toggle.active{
  top:110%;
}



.card{
  position:relative;
}

.card::after{
  content:"";
  position:absolute;
  bottom:-15px;
  left:50%;
  transform:translateX(-50%);

  width:0;
  height:0;

  border-left:28px solid transparent;
  border-right:28px solid transparent;
  border-top:18px solid #ff1a1a;

  transition:.4s;
}

.player.theme0 .card{ background:#ff1a1a; }
.player.theme1 .card{ background:#f59e0b; }
.player.theme2 .card{ background:#13582c; }
.player.theme3 .card{ background:#7e34ab; }
.player.theme4 .card{ background:#cb4c8c; }

.player.theme0 .toggle{ background:#ff1a1a; }
.player.theme1 .toggle{ background:#f59e0b; }
.player.theme2 .toggle{ background:#13582c; }
.player.theme3 .toggle{ background:#7e34ab; }
.player.theme4 .toggle{ background:#cb4c8c; }

.player.theme0 .card::after{ border-top-color:#ff1a1a; }
.player.theme1 .card::after{ border-top-color:#f59e0b; }
.player.theme2 .card::after{ border-top-color:#13582c; }
.player.theme3 .card::after{ border-top-color:#7e34ab; }
.player.theme4 .card::after{ border-top-color:#cb4c8c; }