#musicplayer {
    font-family: "MS UI Gothic", "MS Gothic", Times, "Times New Roman", sans-serif;
    background-color: #6a666a;
    background: linear-gradient(#6a666a 0%, rgba(0, 0, 0, 0) 180%);
    border: 1px outset black; /* border around player */
    width: auto; /* width of the player - make it 100% if you want it to fill your container */
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 2px;
}

.songtitle,
.track-info,
.now-playing {
    padding: 1px;
    font-size: 13px;
}

.controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.buttons {
    display: flex;
    justify-content: center;
    font-size: 17px !important; /* size of controls */
    width: 100%;
}

.buttons div {
    width: 33.3%;
}

.playpause-track,
.prev-track,
.next-track {
    color: black; /* color of buttons */
    font-size: 30px !important; /* size of buttons */
}

.playpause-track:hover,
.prev-track:hover,
.next-track:hover {
    color: #888; /* color of buttons */
    font-size: 32px !important; /* size of buttons */
}

.volume-icon {
    font-size: 22px !important; /* size of volume icon */
    color: #767676;
}

.seeking,
.volume {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    padding: 0 10px 0 10px;
    text-shadow:
        1px 1px 0px #000000,
        0px 0px 4px #7b7b7b;
}

.now-playing,
.track-info {
    background: radial-gradient(circle,rgb(79, 79, 79) 0%, rgb(31, 31, 31) 100%); /* background color of top two boxes */
    color: #979797;
    border: 3px inset black;
    text-shadow:
        1px 1px 2px black,
        1px 1px 0 black;
}

.track-info:hover {
    color: #cccccc;
}

.now-playing {
    font-weight: bold;
    font-size: 20px;
    padding: 7px;
}

.now-playing:hover {
    color: #cccccc;
}

input[type="range"] {
    -webkit-appearance: none; /* removes default appearance of the tracks */
    width: 100%;
}

input[type="range"]:focus {
    outline: none; /* removes outline around tracks when focusing */
}



input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px; /* thickness of seeking track */
    background: #5a5a5a; /* color of seeking track */
    border: 3px inset black;
}

input[type="range"]::-webkit-slider-thumb {
    height: 11px; /* height of seeking square */
    width: 10px; /* width of seeking square */
    border-radius: 0px; /* change to 5px if you want a circle seeker */
    background: #9b9b9b; /* color of seeker square */
    -webkit-appearance: none;
    margin-top: -3px; /* fixes the weird margin around the seeker square in chrome */
    border: 2px outset black;
}

input[type="range"]::-moz-range-track {
    width: 100%;
    height: 3px; /* thickness of seeking track */
    background: #5a5a5a; /* color of seeking track */
    border: 1px inset black;
}

input[type="range"]::-moz-range-thumb {
    height: 7px; /* height of seeking square */
    width: 6px; /* width of seeking square */
    border-radius: 0px; /* change to 5px if you want a circle seeker */
    background: #9b9b9b; /* color of seeker square */
    margin-top: -3px; /* fixes the weird margin around the seeker square in chrome */
    border: 1px outset black;
}

@media (min-width: 600px) {
    .now-playing {
        font-weight: bold;
        font-size: 14px;
        padding: 0;
    }

    input[type="range"]::-webkit-slider-runnable-track {
        width: 100%;
        height: 3px; /* thickness of seeking track */
        background: #5a5a5a; /* color of seeking track */
        border: 1px inset black;
    }

    input[type="range"]::-webkit-slider-thumb {
        height: 7px; /* height of seeking square */
        width: 6px; /* width of seeking square */
        border-radius: 0px; /* change to 5px if you want a circle seeker */
        background: #9b9b9b; /* color of seeker square */
        -webkit-appearance: none;
        margin-top: -3px; /* fixes the weird margin around the seeker square in chrome */
        border: 1px outset black;
    }

    input[type="range"]::-webkit-slider-thumb:hover {
        height: 9px;
        width: 8px;
    }

    input[type="range"]::-moz-range-track {
        width: 100%;
        height: 3px; /* thickness of seeking track */
        background: #5a5a5a; /* color of seeking track */
        border: 1px inset black;
    }

    input[type="range"]::-moz-range-thumb {
        height: 7px; /* height of seeking square */
        width: 6px; /* width of seeking square */
        border-radius: 0px; /* change to 5px if you want a circle seeker */
        background: #9b9b9b; /* color of seeker square */
        margin-top: -3px; /* fixes the weird margin around the seeker square in chrome */
        border: 1px outset black;
    }
}