@font-face {
    font-family: spotify ; 
    src: url(Gotham-Black.otf) ;
}  

body {
    font-family: Arial, sans-serif ;
    text-align: center ;
    background-color: #1DB954 ;
    margin: 25px ;
}

.progress_container {
    width: 100% ;
    max-width: 700px ;
    margin: 20px auto ;
    height: 10px ;
    background-color: #ddd ;
    border-radius: 5px ;
    overflow: hidden ;
}

h1 {
   text-decoration: none ;
   color: #000000 ;
   font-family: spotify ;
   font-size: clamp(25px, 2vw, 40px) ;
   white-space: pre;
   margin: 0;
   line-height: 1;
}

h2 {
   text-decoration: none ;
   color: #000000 ;
   font-family: spotify ;
   font-size: clamp(15px, 2vw, 25px) ;
}

img {
    max-width: 100% ;
    height: auto ;
}

hr {
    border: none ;
    border-top: 3px solid black ;
    width: 80% ;
    margin: 20px auto ;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) ;
}

.progress_bar {
    width: 0% ;
    height: 100% ;
    background-color: #000000 ;
    transition: width 0.1s linear ;
    display: block ;
}

a {
  text-decoration: none ;
  color: #007BFF ;
  font-family: spotify ;
  font-size: 18px ;
}

a:hover {
        text-decoration: underline ;
}

.previous {
    background-image: url("backward-solid.svg") ;
    background-size: contain ;
    height: 50px ;
    width: 50px ;
    background-color: #1DB954 ;
    border: none ;
    padding: 0px 50px ;
    background-repeat: no-repeat ;
    cursor: pointer ;
    transition: all 0.3s ease ;
}

.previous:hover {
    background-color: #1DB954 ;
    transform: translateY(-2px) ;
}

.play {
    background-image: url("play-solid.svg") ;
    background-size: contain ;
    height: 50px ;
    width: 50px ;
    background-color: #1DB954 ;
    border: none ;
    padding: 0px 40px ;
    background-repeat: no-repeat ;
    cursor: pointer ;
    transition: all 0.3s ease ;
}

.play:hover {
    background-color: #1DB954 ;
    transform: translateY(-2px) ;
}

.pause {
    background-image: url("pause-solid.svg") ;
    background-size: contain ;
    height: 50px ;
    width: 50px ;
    background-color: #1DB954 ;
    border: none ;
    padding: 0px 40px ;
    background-repeat: no-repeat ;
    cursor: pointer ;
    transition: all 0.3s ease ;
}

.pause:hover {
    background-color: #1DB954 ;
    transform: translateY(-2px) ;
}

.skip {
    background-image: url("forward-solid.svg") ;
    background-size: contain ;
    height: 50px ;
    width: 50px ;
    background-color: #1DB954 ;
    border: none ;
    padding: 0px 0px ;
    background-repeat: no-repeat ;
    cursor: pointer ;
    transition: all 0.3s ease ; 
}

.skip:hover {
    background-color: #1DB954 ;
    transform: translateY(-2px) ;
}