.audio-player {
    --player-button-width: 3em;
    --sound-button-width: 2em;
    --space: .5em;
    margin: 5px auto;
    list-style: none;
    border: 3px solid var(--secondry-color);
    border-radius: 20px;
    background-color: orange;
}

.audio-titel{
    text-align: center;
    width: 5em;
    font: var(--roboto-medium);
    font-size: 17px;
}

.controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.player-button-style {
    background-color: transparent;
    border: 0;
    width: var(--player-button-width);
    height: var(--player-button-width);
    cursor: pointer;
    padding: 0;
}

.timeline-style {
    -webkit-appearance: none;
    width: calc(100% - (var(--player-button-width) + var(--sound-button-width) + var(--space)));
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 20px;
    background-size: 0% 100%;
    background-image: linear-gradient(var(--secondry-color), var(--secondry-color));
    background-repeat: no-repeat;
    margin-right: var(--space);
}

.timeline-style::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: all .1s;
    background-color: var(--secondry-color-hover);
}

.timeline-style::-moz-range-thumb {
    -webkit-appearance: none;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: all .1s;
    background-color: var(--secondry-color-hover);
}

.timeline-style::-ms-thumb {
    -webkit-appearance: none;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: all .1s;
    background-color: var(--secondry-color-hover);
}

.timeline-style::-webkit-slider-thumb:hover {
    background-color: var(--secondry-color-hover);
}
.timeline-style:hover::-webkit-slider-thumb {
    opacity: 1;
}

.timeline-style::-moz-range-thumb:hover {
    background-color: var(--secondry-color-hover);
}

.timeline-style:hover::-moz-range-thumb {
    opacity: 1;
}

.timeline-style::-ms-thumb:hover {
    background-color: var(--secondry-color-hover);
}

.timeline-style:hover::-ms-thumb {
    opacity: 1;
}

.timeline-style::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
}

.timeline-style::-moz-range-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
}

.timeline-style::-ms-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
}

.sound-button-style {
    background-color: transparent;
    border: 0;
    width: var(--sound-button-width);
    height: var(--sound-button-width);
    cursor: pointer;
    padding: 0;
}

.timeline-style:hover{
    background-color: red;
}

.sound-button-style svg:hover,
.player-button-style svg:hover{
    fill: rgb(141, 38, 0);
}