#music-player {
  height: 2.125em;
  width: 2.125em;
  border-radius: 50%;
  border: 3px double var(--softblack);
  transition: all 0.35s ease;
  background: var(--softwhite);
  display: inline-flex;
  overflow: hidden;
  align-items: center;
  justify-content: left;
  flex-direction: row; /* Ensure intended layout */
}

.insidebody#dark #music-player {
    background: var(--softblack);
    border-color: var(--softwhite);
    
}

#music-player > div {
  margin: 0.25em;
}

.pixel {
  display: flex; /* Required for justify-content to work */
  flex: 66%;
  justify-content: left;
}

.note {
  display: flex; /* Required for justify-content to work */
  color: var(--softblack);
  font-size: 1.5em;
  justify-content: center;
  flex: 33%;
}

.insidebody#dark .note {
    color: var(--softwhite);

}

.note p {
  transform: rotate(20deg);
}

#music-player:hover {
  border-color: var(--showprimary); /* Change only color instead of full border */
  width: 6.125em;
  border-radius: 0.625em;
  background: var(--softerwhite);
  
}

.insidebody#dark #music-player:hover {
    background: var(--softerblack);
}