*{

  margin:0;
  padding:0;

  box-sizing:border-box;

}

body{

  background:#000;

  font-family:

    Arial,
    Helvetica,
    sans-serif;

  overflow:hidden;

  padding:12px;

}

/* TÍTULO */

.title{

  width:100%;

  text-align:center;

  font-size:20px;

  font-weight:900;

  letter-spacing:4px;

  color:#ff4fd8;

  margin-bottom:14px;

  text-shadow:

    0 0 10px rgba(255,79,216,.35),

    0 0 20px rgba(255,79,216,.18);

}

/* ÁREA SCROLL */

.history-scroll{

  width:100%;

  overflow:hidden;

  position:relative;

}

/* LISTA */

.history-wrapper{

  display:flex;

  gap:16px;

  width:max-content;

  animation:

    autoScroll 35s linear infinite;

}

/* PAUSA AO PASSAR O MOUSE */

.history-wrapper:hover{

  animation-play-state:paused;

}

/* CARD */

.music-card{

  min-width:270px;

  display:flex;

  align-items:center;

  gap:14px;

  padding:12px;

  background:

    rgba(15,15,15,.95);

  border:

    1px solid rgba(255,255,255,.05);

  border-radius:18px;

  box-shadow:

    0 0 12px rgba(255,0,170,.10),

    0 0 24px rgba(0,200,255,.08);

  transition:

    transform .25s ease,

    box-shadow .25s ease;

}

/* HOVER */

.music-card:hover{

  transform:

    translateY(-3px);

  box-shadow:

    0 0 18px rgba(255,0,170,.18),

    0 0 30px rgba(0,200,255,.12);

}

/* FOTO */

.music-card img{

  width:58px;
  height:58px;

  border-radius:50%;

  object-fit:cover;

  border:

    2px solid #ff4fd8;

  box-shadow:

    0 0 10px rgba(255,79,216,.45),

    0 0 18px rgba(0,217,255,.18);

  flex-shrink:0;

}

/* TEXTO */

.music-info{

  min-width:0;

}

/* ARTISTA */

.music-info h2{

  font-size:13px;

  color:#00d9ff;

  margin-bottom:5px;

  text-transform:uppercase;

  letter-spacing:1px;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;

}

/* MÚSICA */

.music-info p{

  font-size:15px;

  color:#fff;

  font-weight:700;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;

}

/* ANIMAÇÃO */

@keyframes autoScroll{

  from{

    transform:

      translateX(0);

  }

  to{

    transform:

      translateX(-50%);

  }

}