/* кнопка с градиентом "поддержать проект", "показать больше подкастов" */
.gradient-button {
    width: 164px;
    height: 48px;
    border: double 1px transparent;
    border-radius: 5px;
    background-image: linear-gradient(white, white), radial-gradient(circle at top left, #1b3a79ff,#3c8bc5ff);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.gradient-button-text {
    background-image: linear-gradient(98deg, #1b3a79ff 0%, #3c8bc5ff 100%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 15px;
    line-height: 140%;
    width: min-content;
    height: min-content;
    white-space: nowrap;
    flex-direction: column;
    margin: 12px auto;
}

/* кнопка остановки воспроизведения общий стиль*/
.play-button {
    height: 60px;
    width: 60px;
    border-radius: 30px;
    background-color: white;
    display: block;
    cursor: pointer;
}

.play-button .play {
    position: relative;
    left: 25px;
    top: 20px;
    width: 0;
    height: 0;
    border-left-style: solid;
    border-left-width: 15px;
    border-left-color: black;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.play-button .stop {
    position: relative;
    left: 20px;
    top: 20px;
    width: 20px;
    height: 20px;
    background-color: black;
}

/* конопка пелеера радио */

#player-button {
    background-color: white;
}

#player-button .play {
    border-left-color: black;
}

#player-button .stop {
    background-color: black;
}

/* кнопка плеера подкастов*/
.podcast-button {
    background-image: linear-gradient(98deg, #1b3a79ff 0%, #3c8bc5ff 100%) ;
}

.podcast-button .play {
    border-left-color: white;
}

.podcast-button .stop {
    background-color: white;
}