html, body { background-color: #09101d; color: #bbb; height: 99%; } div { border: 1px dashed white; } button { background-color: #28374a; color: #bbb; } input { background-color: #28374a; color: white; } #flexbox-container { display: flex; flex-direction: column; height: 100%; } #controls-top { display: flex; flex-direction: row; justify-content: space-b; } #top-left-controls { display: flex; flex-direction: column; width: 100px; } #top-left-controls button { text-align: left; } #playback-controls { display: flex; flex-direction: column; width: 160px; } #queue-volume-controls { width: 150px; } #queue-controls { display: flex; flex-direction: row; } #queue-xfade-control { display: flex; flex-direction: column; text-align: center; } #queue-xfade-buttons { display: flex; flex-direction: row; } #top-logo { display: flex; flex-direction: column; text-align: center; color: white; width: 50px; } #top-logo-container { display: flex; flex-grow: 1; justify-content: flex-end; } #sanic-logo { width: 50px; } #xfade { width: 20px; } #queue { flex-grow: 1; } #controls_bottom { display: flex; flex-direction: row; flex-grow: 2; } #playlist_controls { flex-grow: 1; } #playlist_tracklist { flex-grow: 4; } #footer { text-align: right; }