body { max-width: 800px; margin: 0 auto; overflow: hidden; display: flex; flex-direction: column; height: 100vh; } body > header, body > footer { box-shadow: 0 0 3px #000; } main { flex-grow: 1; overflow: hidden; } 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 { display: flex; flex-direction: row; } #player .art img { vertical-align: top; } #player .info { flex-grow: 1; } #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; } .component { height: 100%; display: flex; flex-direction: column; } #queue { height: 100%; display: flex; flex-direction: column; } #queue ul { flex-grow: 1; overflow: auto; list-style: none; margin: 0; padding: 0; } #queue li { display: flex; flex-direction: row; } #queue li + li { border-top: 1px solid #888; } #queue .info { flex-grow: 1; } #queue .current { font-weight: bold; } #library { height: 100%; display: flex; flex-direction: column; } #library ul { flex-grow: 1; overflow: auto; list-style: none; margin: 0; padding: 0; }