html {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #e0ddfe;
  image-rendering: pixelated;
}

body{
  margin:0;
  overflow:clip;
  display:flex;
  align-items: center;
  gap: 8px;
  justify-content:center;
  padding:10px;
  height:calc(100% - 10px * 2);
  background: #c1bfe4;
  font-family: 'Pixelify Sans';
  cursor: url("./assets/cursor.png"), default;
  } 

#wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 400px;
  height: auto;
  margin-top: 40px;
}

#cassette-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
}

#cassette-img {
  image-rendering: pixelated;
  width: 400px;
  height: auto;
  max-width: 100%;
  display: block;
}

#cassette-label {
  width: 320px;
  position: absolute;
  text-align:center;
  top: 45px; 
  font-size: 14px;
  font-family: 'Pixelify Sans';
  color: #1c1c1c;
  white-space: nowrap;
  overflow: hidden;
}

#label-song-title {
  white-space: nowrap;
  display: inline-block;
  animation: scroll-label 6s linear infinite;
  font-size: 14px;
  color:#233c7e;
  font-family: 'Pixelify Sans';
}

@keyframes scroll-label {
  0%   { transform: translateX(120%); }
  100% { transform: translateX(-120%); }
}

#playlist-section {
  display: flex;
  width: 600px;
  flex-direction: row;
  background: #8797e0; 
  padding: 12px;
  border-radius:12px;
  }

#player{
  display:none;
  }

#music-left {
  display: flex;
  align-items: center;
  padding: 10px;
}

#music-logo{
  width: 85px;
  height: 85px;
  object-fit: cover;
}

#music-right {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#song-title {
  font-size: 20px;
  min-width:0;
  color: #233c7e;
  display: flex;
  justify-content: space-between;
  font-family: 'Pixelify Sans';
  
}

#song-title > div{
  white-space: nowrap;
  overflow: hidden;
}

#song-uploader {
  font-size: 14px;
  color: #e0ddfe;
  overflow: hidden;
  font-family: 'Pixelify Sans';

}

#playback-bar {
  width: 100%;
  height: 4px;
  background: #e0ddfe;
  margin: 4px 0;
  display: flex;
}

#playback-fill {
  height: 4px;
  background: #5464bc;
}
#details{
   display:flex;
    justify-content: space-between;
    gap: 20px;
}

.knob{
    width: 8px;
    height: 8px;
    background: #5464bc;
    position: relative;
    top: -2px;
}

#controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

#controls img{
  width:24px;
  height:24px;
  cursor: pointer;
}

#volume-area{
  display: flex;
  align-items: center;
  gap: 4px;
}

#volume-icon{
  width:24px;
  height: 24px;
  cursor: pointer;
}

#volume-bar{
  display:flex;
  margin: 4px 0;
  width: 100%;
  height:4px;
  background: #e0ddfe;
}

#volume-fill{
  height:4px;
  background: #5464bc;
  width: 50%;
}

#playtime{
  font-size: 16px;
  color: #e0ddfe;
  white-space: nowrap;
}

#custom-playlist{
  padding:8px;
  position: absolute;
  width:100vw;
  height:100vh;
  left:0;
  top:0;
  display:flex;
  gap:8px;
  align-items:center;
  box-sizing:border-box;
}

#playlist-input{
  padding:10px;
  border: 2px solid;
  border-color: whitesmoke;
  outline:0;
  font-size:20px;
  flex-grow:1;
  font-family: 'Pixelify Sans';
}

#custom-create{
  padding: 10px 20px;
  border-color: whitesmoke;
  font-size:20px;
  cursor:pointer;
  height:46px;
  color:#5464bc;
  font-family:'Pixelify Sans';
}

#music-prev:hover, #music-toggle:hover, #music-next:hover, #music-logo, #select-playlist, #playback-bar, #volume-bar, #volume-icon {
    cursor: url('./assets/click.png'), pointer;