body { all: unset; min-height: 100vh; display: flex; justify-content: center; align-items: center; user-select: none; } main { flex-grow: 1; display: flex; } #controls { margin: 20px; display: flex; flex-flow: column; justify-content: center; align-items: center; } #container { flex-grow: 1; margin: 20px; } ::-moz-focus-inner { border: none; } button#playpause { border: none; background: none; cursor: pointer; font-size: 64px; margin: 8px; vertical-align: middle; transition: all 50ms; } button#playpause:hover, button#playpause:focus { filter: brightness(120%); outline: none; } button#playpause:active { transform: translate(1px, 1px); } label#volume-label { font-size: 30px; vertical-align: middle; } input#volume { vertical-align: middle; width: 80px; height: 30px; border-radius: 3px; background: #eee; cursor: pointer; -webkit-appearance: none; } input#volume::-moz-range-thumb { height: 30px; width: 20px; background-color: #999; border-radius: 3px; border: none; } input#volume::-webkit-slider-thumb { height: 30px; width: 20px; background-color: #999; border-radius: 3px; -webkit-appearance: none; } input#volume:hover, input#volume:focus { filter: brightness(102%); outline: none; }