#stream { display: none }
* { font-family: monospace; color: white }
body { background-color: #262626; margin: 0; padding: 0 }
img { height: 5em }
header { background-color: #131313; display: flex; align-items: center }
header h2 { padding-left: 1em }
header img { cursor: pointer; transition: transform 0.1s ease-in-out }
header img:hover { transform: rotate(-10deg) }

input, button { border: solid 1px #363636 }
button { background-color: #bbb; color: #000 }
input, button:disabled { background-color: #000; color: #eee }

audio { aspect-ratio: 16/9; width: 75vw; max-height: 80vh }
.buttons { display: inline-block }

.container { display: flex }
.audio { display: flex; flex-direction: column }
.audio .player { margin: 0 auto }

.controls { display: flex; padding-top: 1em; align-items: center; justify-content: space-between }
.controls .right { text-align: right }
.controls, .controls *, .controls * * { font-size: 1.1em }


.links  { margin: 1em }

h1 { margin-top: 0 }
h3 { padding-left: 1em }
.audio { margin: 1em }
.links { flex: 1 }
.listing { overflow-y: scroll }
.featured { margin-bottom: 2em; max-height: 10rem }
.random { max-height: 15rem }
.defaults h2 { margin-top: 0 }
@media only screen and (max-width: 768px) {
    .controls .left { display: none }
    .controls .right { text-align: center; }
    .container { flex-direction: column; }
}

.pb {
    position: absolute;
    top: 31.5vh;
    left: 38.5vw;
    font-size: 72px;
    text-shadow: 0px 0px 10px #FFFFFF;
}