@font-face {
 font-family: 'NeonCity';
 src: url('Neoncity.ttf');
}

* {
 padding: 0px;
 margin: 0px;
 box-sizing: border-box;
}

html {
 height: 100%;
}

body {
 font-family: 'Sergoe UI', sans-serif;
 line-height: 1.6;
 color: #030303;
 background-color: #f9f9f9;
 display: flex;
 flex-flow: column;
 height: 100%;
}

header {
 flex: 0 1 auto;
 display: flex;
 justify-content: space-between;
 align-items: center;
 background-color: #0F0C29;
 color: white;
 padding: 10px 20px 5px 20px;
 flex-wrap: wrap;
}

header h1 {
 font-family: 'NeonCity';
 font-style: oblique 90deg;
 font-size: 40px;
 color pink;
 text-shadow:
  0px 0px 3px pink,
  0px 0px 6px pink,
  0px 0px 15px yellow;
 margin: 0px;
 padding: 0px;
 margin-bottom: -20px;
}

nav {
 display: flex;
 justify-content: flex-start;
 align-items: center;
}

.info-container {
 width: 250px;
 overflow: hidden;
}
img {
 height: 80px;
 width: 80px;
 margin-right: 10px;
 border-radius: 80px;
}
#music-title, #music-artist, #music-album {
 display: inline-block;
 white-space: nowrap;
 color: pink;
 animation: floatText 15s linear infinite;
}
#music-title:hover, #music-details:hover {
 animation-play-state: paused;
}
#progress-bar {
 position: fixed;
 top: 0px;
 left: 0px;
 padding: 0px;
 margin: 0px;
 height: 5px;
 width: 25%;
 background: linear-gradient(135deg, #FF0080, #7928CA, #2C3E50);
}

@keyframes floatText {
 from {
  transform: translateX(250px);
 } to {
  transform: translateX(-100%);
 }
}

#cards {
 background: linear-gradient(135deg, #FF0080, #7928CA, #2C3E50);
 flex: 1 1 auto;
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 20px;
 padding: 40px 20px;
}
.card {
 padding: 20px;
 border-radius: 8px;
 box-shadox: 0 4px 10px rgba(0,0,0,0.05);
 /* transition: transform 0.2s; */
 background-color: rgba(0,0,0,0.2);
 color: pink;
 border: solid pink 1px;
 height: 200px;
 text-overflow: ellipsis;
}

footer {
 flex: 0 1 auto;
 text-align: center;
 padding: 20px;
 background-color: #1A1A2E;
 color: white;
}