body {
    margin: 0;
    background-color: black;
}

ul {
    list-style: none;
    margin: 0;
    padding-inline: 0;
}

h1 {
    font-size: 1.4rem;
    margin-block-start: 0.6rem;
    margin-block-end: 0.2rem;
}

label {
    display: block;
    margin-bottom: 0.3rem;
    margin-top: 0.4rem;
}

.vol-slider {
    height: 18px;
    appearance: none;
    width: 100%;
    display: block;
    background-color: transparent;
}

.vol-slider:focus {
    outline: none;
}

.vol-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 17.5px;
    padding: 0.5px;
    cursor: pointer;
    background: #464331;
    border-radius: 2px;
}

.vol-slider::-webkit-slider-thumb {
    height: 16px;
    width: 16px;
    /* margin-top: 0.5px; */
    background: #FFFFFF;
    cursor: pointer;
    -webkit-appearance: none;
    background-image: url(img/slider-thumb.png);
}

.vol-slider::-moz-range-track {
    height: 16px;
    cursor: pointer;
    background: #464331;
    border-radius: 2px;
}

.vol-slider::-moz-range-thumb {
    height: 16px;
    width: 16px;
    background: #FFFFFF;
    cursor: pointer;
    appearance: none;
    background-image: url(img/slider-thumb.png);
}

.vol-slider::-ms-track {
    height: 16px;
    cursor: pointer;
    background: #464331;
    border-radius: 2px;
}

.vol-slider::-ms-thumb {
    height: 16px;
    width: 16px;
    background: #FFFFFF;
    cursor: pointer;
    appearance: none;
    background-image: url(img/slider-thumb.png);
}