div.content{
    width: clamp(60vw, 120vh, 90vw);
    min-height: clamp(29vw, 58vh, 58vh);
    padding-bottom: clamp(1vw, 2vh, 2vh);
}



a.volumeButton{
    display: flex;
    justify-content: center;
    align-items: center;
    height: clamp(2vw, 4vh, 4vh);
}
a.volumeButton img{
    object-fit: contain;
    height: 100%;
    transition-property: filter;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

@media (min-width: 1200px){
    a.volumeButton:hover img{
        filter: drop-shadow(0 0 clamp(0.2vw, 0.4vh, 0.4vh) var(--Text));
    }
    
}
a.volumeButton:active img{
    filter: drop-shadow(0 0 clamp(0.2vw, 0.4vh, 0.4vh) var(--Text));
}

input[type="range"]#volumeSlider {
    width: clamp(15vw, 30vh, 40vw);
    height: clamp(0.5vw, 1vh, 1vh);
    border-radius: clamp(1vw, 2vh, 2vh);
    outline: none;
    margin-right: clamp(1vw, 2vh, 2vh);
    padding: 0;
    -webkit-appearance: none;
    background: var(--Text); /* fallback background */
    background-image: linear-gradient(to right, var(--Secondary) 0%, var(--Secondary) 0%, var(--Text) 0%, var(--Text) 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Webkit thumb (Chrome, Safari) */
input[type="range"]#volumeSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: clamp(1vw, 2vh, 2vh);
    height: clamp(1vw, 2vh, 2vh);
    border-radius: 50%;
    background-color: var(--Secondary);
    cursor: pointer;
    transition: background-color 0.3s ease-out;
}

/* Firefox thumb */
input[type="range"]#volumeSlider::-moz-range-thumb {
    width: clamp(1vw, 2vh, 2vh);
    height: clamp(1vw, 2vh, 2vh);
    border-radius: 50%;
    background-color: var(--Secondary);
    cursor: pointer;
}
@media (min-width: 1200px){
    input[type="range"]#volumeSlider::-webkit-slider-thumb:hover {
        background-color: var(--Accent);
    }
    input[type="range"]#volumeSlider::-moz-range-thumb:hover {
        background-color: var(--Accent);
    }
}
input[type="range"]#volumeSlider::-webkit-slider-thumb:hover {
    background-color: var(--Accent);
}
input[type="range"]#volumeSlider::-moz-range-thumb:hover {
    background-color: var(--Accent);
}


div#audioPlayerContainer{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: clamp(40vw, 80vh, 85vw);
    background-color: var(--Pozadi2);
    padding-top: clamp(1vw, 2vh, 2vh);
    padding-bottom: clamp(1vw, 2vh, 2vh);
    border-radius: clamp(2vw, 4vh, 4vh);
    margin-top: clamp(1vw, 1.5vh, 2vh);
    margin-bottom: clamp(1.25vw, 2vh, 3.5vh);
}
div#audioPlayerContainer a{
    display: flex;
    justify-content: center;
    align-items: center;
    height: clamp(1.5vw, 3vh, 3vh);
    margin: clamp(1vw, 2vh, 2vh);
    margin-left: clamp(0.2vw, 0.4vh, 0.4vh);
    margin-top: clamp(0.5vw, 1vh, 1vh);
    margin-bottom: clamp(0.5vw, 1vh, 1vh);
}
div#audioPlayerContainer a.replayButton{
    height: clamp(1.5vw, 3vh, 3vh);
    margin: clamp(0.2vw, 0.4vh, 0.4vh);
    margin-top: 0;
    margin-bottom: 0;
}
div#audioPlayerContainer a img{
    height: 100%;
    transition-property: filter;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
div#audioPlayerContainer p{
    font-size: clamp(1.1vw, 1.8vh, 1.8vh);
    color: var(--Text);
    text-align: left;
    margin-left: clamp(1vw, 2vh, 2vh);
    min-width: clamp(7vw, 12vh, 12vh);
    margin-top: clamp(0.25vw, 0.5vh, 0.5vh);
    margin-bottom: clamp(0.25vw, 0.5vh, 0.5vh);
}

div#audioPlayerContainer input[type="range"] {
    width: clamp(15vw, 30vh, 40vw);
    height: clamp(0.5vw, 1vh, 1vh);
    border-radius: clamp(1vw, 2vh, 2vh);
    outline: none;
    margin-right: clamp(1vw, 2vh, 2vh);
    padding: 0;
    -webkit-appearance: none;
    background: var(--Text); /* fallback background */
    background-image: linear-gradient(to right, var(--Primary) 0%, var(--Primary) 0%, var(--Text) 0%, var(--Text) 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Webkit thumb (Chrome, Safari) */
div#audioPlayerContainer input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: clamp(1vw, 2vh, 2vh);
    height: clamp(1vw, 2vh, 2vh);
    border-radius: 50%;
    background-color: var(--Primary);
    cursor: pointer;
    transition: background-color 0.3s ease-out;
}

/* Firefox thumb */
div#audioPlayerContainer input[type="range"]::-moz-range-thumb {
    width: clamp(1vw, 2vh, 2vh);
    height: clamp(1vw, 2vh, 2vh);
    border-radius: 50%;
    background-color: var(--Primary);
    cursor: pointer;
}
@media (min-width: 1200px){
    div#audioPlayerContainer input[type="range"]::-webkit-slider-thumb:hover {
        background-color: var(--Accent);
    }
    div#audioPlayerContainer input[type="range"]::-moz-range-thumb:hover {
        background-color: var(--Accent);
    }
}
div#audioPlayerContainer input[type="range"]::-webkit-slider-thumb:hover {
    background-color: var(--Accent);
}
div#audioPlayerContainer input[type="range"]::-moz-range-thumb:hover {
    background-color: var(--Accent);
}

div.speedSlider{
    width: clamp(15vw, 30vh, 30vh);
}

div.options{
    max-width: 95%;
}
div.options div.optionBorder{
    margin-right: clamp(1.5vw, 1.3vh, 1.3vh);
    padding: clamp(0.5vw, 0.75vh, 0.75vh);
}
div.options div.option h5{
    font-size: clamp(1.5vw, 2.5vh, 4.25vw);
}


@media (min-width: 1200px){
    a.volumeButton:hover img, div#audioPlayerContainer a:hover img{
        filter: drop-shadow(0 0 clamp(0.1vw, 0.2vh, 0.2vh) var(--Text));
    }
    
}
a.volumeButton:active img, div#audioPlayerContainer a:active img{
    filter: drop-shadow(0 0 clamp(0.1vw, 0.2vh, 0.2vh) var(--Text));
}