body {
    max-width: 100%;
    margin: 0;
    padding: 1em;
    color: hsl(0, 0%, 100%);
    text-shadow: 0px 0px 2px black;
    background-color: hsl(52, 7%, 80%);
}

.player_box {
    background: linear-gradient(135deg, hsl(123, 42%, 54%), hsl(180, 42%, 54%));
    border-radius: 15px;
    padding: 1.6em 2em 1.4em 2em;
    box-sizing: border-box;
    width: auto;
}

h2.header {
    padding: 0;
    margin: 0.48em 0;
    margin-bottom: 0.5em;
}
h4.status {
    padding: 0;
    margin: 0 0 0.5em 0;
}
.footer {
    padding: 0;
    margin: 0;
    height: 20px;
    width: 100%;
}
.footer > h4 {
    text-align: right;
    padding: 0;
    margin: 0;
    transform: translate(15px, 10px);
}

.lf-volume-bar {
    width: 16em;
    height: 1.3em;
    background-color: rgb(116, 0, 0);
    margin: 0;
    padding: 0;
    box-shadow: 0 0 1px 0.3px rgb(0, 0, 0);
    border-radius: 8px;
    margin: 0.5em 0.1em;
    box-sizing: border-box;
    border: 1px solid black;
    position: relative;
}
.lf-volume-bar > span {
    pointer-events: none;
    user-select: none;
    text-align: center;
    width: 100%;
    display: inline-block;
    transform: translate(0, -0.05em);
    font-size: 1.1em;
    text-shadow: 1px 1px 2px black;
}
.lf-volume-bar-text-emoji {
    line-height: 17px;
    text-align: center;
    padding: 0.44em 0.1em;
}
button {
    margin: 0 0.5em;
    padding: 0.2em 1.5em;
}
a {
    color: inherit !important;
}

a:hover {
    text-decoration: underline;
}