body {
    position: relative;
    margin: 0;
    padding: 0;
    color:black;
    font-family: Consolas, sans-serif;
    font-weight: bold;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-image: url(images/old-radio.jpg);

    transition: 1s;

    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
        background: rgba(120, 120, 120, .5);
        border-radius: 5px;
    }

    ::-webkit-scrollbar-thumb {
        height: 20%;
        background: rgba(200, 230, 255, .7);
        border-radius: 5px;
    }
}
body.waiting {
    cursor: wait;
}
body>div {
    padding-bottom: 10vh;
}
body>div>div#container {
    position: relative;
    margin: 0;
    padding: 20px 10px;
    width: 300px;
    min-width: 220px;
    background-color: rgba(250, 250, 250, .8);
    border-radius: 10px;
}
audio {
    width: calc(100% - 20px);
    height: 30px;
    margin: 10px;
}
div#title {
    cursor: pointer;
    font-size: larger;
    text-align: right;
    padding-top: 5px;
    padding-right: 10px;
}
div#title>span.text {
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
div#title>span.smile {
    display: inline-block;
    animation: rotating 2s linear infinite;
}
ul#broadcastStation {
    padding:0 10px 0 25px;
    max-height: 300px;
    overflow-y: scroll;
    overflow-x: hidden;
    list-style-type: none;
}
ul#broadcastStation>li {
    cursor: pointer;
    position: relative;
    margin-bottom: 5px;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    padding: 3px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;

}
ul#broadcastStation>li>img {
    height: 12px;
    width: auto;
    margin-right: 5px;
}
ul#broadcastStation>li.current {
    background-color: rgba(0,0,128, .2);
    border-radius: 5px;
    font-weight: bold;
    color: darkblue;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    text-decoration: underline;
}
ul#broadcastStation>li.current:before {
    position: absolute;
    left: -27px;
    top: -1px;
    font-size: 18px;
    content: '💿';
}
ul#broadcastStation>li.current.playing:before {
    content: '📀';
    animation: rotating 2s infinite linear;
}
div.audio-control-wrapper {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 10px 10%;
}
div.audio-control-wrapper>i {
    font-size: 20px;
}
div.audio-control-wrapper>i.audio-control {
    cursor : pointer;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
div#volume {
    position: absolute;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -3px;
    color: dimgray;
    top: 150px;
    right: 30px;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    -webkit-transition: all 1s;
    transition: all 1s;
}
div#volume>i {
    font-weight: 900;
    letter-spacing: -3px;
}
div.top-checks {
    font-size: 12px;
    padding: 5px 20px 0 20px;
    display: flex;
    gap: 3px;
    justify-content: space-between;
    align-items: center;
    > div > button {
        font-family: Consolas, sans-serif;
        font-size: 10px;
        cursor: pointer;
        border: 1px solid gray;
        border-radius: 3px;
        background-color: rgba(200,200,200);
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
div.top-checks>div>input {
    cursor: pointer;
}
div.top-checks>div>label {
    cursor: pointer;
    margin-left: -5px;
    padding-left: 5px;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
li.loading {
    text-decoration: line-through;
}
@keyframes rotating {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

div#logging {
    padding:0px 20px 0px 20px;
}

div#logging > pre {
    max-height: 100px;
    overflow: scroll;
    color: white;
    background-color: rgba(0, 0, 0, .6);
    font-weight: normal;
}

input#show-log {
    margin-left: 10px;
}