:root {
  --accent-color: #887BFF;
  --accent-color-opacity: #8545FF66;
  --main-bg: #090A0C;
  --main-fg: #D3F3EE;
  --song-card-bg: #111317;
  --progress-bg: #23272F;

  --card-border-radius: .4em;

  --progress-bar-height: 4px;
  --progress-bar-height-hovered: 6px;

  --progress-thumb-size: 8px;
  --progress-thumb-size-hovered: 12px;
  --progress-thumb-bottom: -2px;
  --progress-thumb-bottom-hovered: -3px;
}

body {
  background-color: var(--main-bg);
  color: var(--main-fg);
  font-family: monospace !important;
}

#logo {
  width: 16em;
  margin: 0 auto;
  padding: 3em 0;
  filter: drop-shadow(0px 0px 15px var(--accent-color-opacity)); 
}

#main-container {
  margin: 0 25%;
  display: flex;
  flex-direction: column;
  gap: 2em;
}

#page-title {
  color: var(--accent-color);
}

.song {
  background-color: var(--song-card-bg);
  border-radius: var(--card-border-radius);
  position: relative;
}

.song-data-container {
  padding: 1em;
  display: grid;
  grid-template-areas:
    "title duration"
    "playbackbutton playbackbutton"
    "progress progress";
  gap: 1em;
  position: relative;
  z-index: 1;
}

.song-title {
  grid-area: title;
}

.song-duration {
  grid-area: duration;
  text-align: right;
}

.playback-button-container {
  grid-area: playbackbutton;
  row-span: 2;
  display: inline;
}

.song-playback-button {
  white-space: pre-wrap;
  font-weight: bold;
  font-family: monospace;
  line-height: .8;
  letter-spacing: -.8px;
  font-size: .4em;
  color: var(--main-fg);
  display: inline-block;
  margin: 0;
}

.song-playback-button:hover {
  color: var(--accent-color);
  cursor: pointer;
  text-shadow: var(--accent-color-opacity) 0px 0px 8px; 
}

.song-visualizer {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  border-radius: var(--card-border-radius);
}

.progress-container {
  position: absolute;
  height: 100%;
  width: 100%;
  /* display: flex; */
  /* flex-direction: row; */
  /* align-items: flex-end; */
}

.progress-bar {
  position: absolute;
  z-index: 3;
  bottom: 0;
  background-color: var(--accent-color);
  height: var(--progress-bar-height);
  border-radius: 0 0 .4em .4em;
}

.progress-bar-bg {
  position: absolute;
  z-index: 2;
  bottom: 0;
  background-color: var(--progress-bg);
  height: var(--progress-bar-height);
  width: 100%;
  border-radius: 0 0 .4em .4em;
}

.progress-thumb {
  position: absolute;
  z-index: 3;
  width: var(--progress-thumb-size);
  height: var(--progress-thumb-size);
  bottom: var(--progress-thumb-bottom);
  border-radius: 50%;
  background-color: var(--accent-color);
}

.progress-clickable {
  position: absolute;
  z-index: 4;
  bottom: 0;
  width: 100%;
  height: var(--progress-bar-height);
  border-radius: 0 0 .4em .4em;
}

.progress-clickable:hover,
.progress-clickable:hover + .progress-bar,
.progress-clickable:hover + .progress-bar + .progress-bar-bg,
.progress-bar-active {
  height: var(--progress-bar-height-hovered);
}
/* .progress-clickable:hover, */
/* .progress-clickable:hover + .progress-bar, */
/* .progress-clickable:hover + .progress-bar-bg { */
  /* height: var(--progress-bar-height-hovered); */
/* } */

.progress-clickable:hover + .progress-bar + .progress-bar-bg + .progress-thumb,
.progress-thumb-active {
  height: var(--progress-thumb-size-hovered);
  width: var(--progress-thumb-size-hovered);
  bottom: var(--progress-thumb-bottom-hovered);
}