body { margin: 0; display: flex; flex-direction: column; height: 100vh; } main { flex-grow: 1; overflow-x: hidden; overflow-y: auto; } nav ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: row; } nav ul li { text-align: center; flex-grow: 1; line-height: 40px; } nav ul li:hover { background-color: red; } nav ul li.active { background-color: green; } #player:not([data-state=play]) .pause { display: none; } #player[data-state=play] .play { display: none; } #player:not([data-flags~=random]) .random, #player:not([data-flags~=repeat]) .repeat { opacity: 0.5; } #queue .current { font-weight: bold; }