playbackcontrols.css

#playbackcontrols {
  position: fixed;
  display: flex;
  left: 35vw;
  bottom: 0;
  max-width: 55vw;
  padding: 1ch 2ch;
  border-radius: 0.25em 0.25em 0 0;
  background-color: var(--light-teal);
  border: medium solid var(--dark-teal);
  border-bottom: 0;
  box-shadow: inset 0 -1ch 2ch var(--light-teal),
    inset 0 -2ch var(--dark-teal),
    inset -0.4ch -2.3ch 1.2ch var(--light-grey),
    0.5ch 2ch 2ch var(--shadow),
    -0.5ch 2ch 2ch var(--shadow);
}
#playbackcontrols > button {
  width: 6.5ch;
  height: 8ch;
  margin: 1px;
  background-color: var(--button-colour);
  border: medium groove var(--button-colour);
  box-shadow: inset 0 -1ch var(--light-grey),
    inset 0 -1.1ch var(--mid-grey),
    0 0 1ch var(--shadow-teal),
    0 0 0.5ch var(--dark-grey);
}
#playbackcontrols > button:hover {
  box-shadow: inset -0.2ch 0.2ch 1ch var(--highlight),
    inset 0.2ch 0 1ch var(--highlight),
    inset 0 -1ch var(--light-grey),
    inset 0 -1.1ch var(--mid-grey),
    0 0 1ch var(--shadow-teal),
    0 0 0.5ch var(--dark-grey);
}
#playbackcontrols > button:active {
  background-color: var(--button-colour);
  border: medium inset var(--button-colour);
  box-shadow: inset -0.4ch 0.4ch 1ch var(--mid-grey),
    inset 0 -0.2ch var(--light-grey),
    inset 0 -0.3ch var(--mid-grey),
    0 0 1ch var(--shadow-teal),
    0 0 0.5ch var(--dark-grey);
}
#playbackcontrols > button > svg {
  border-radius: 0;
  margin: auto;
}