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"].volSlider {
    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"].volSlider::-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"].volSlider::-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"].volSlider::-webkit-slider-thumb:hover {
        background-color: var(--Accent);
    }
    input[type="range"].volSlider::-moz-range-thumb:hover {
        background-color: var(--Accent);
    }
}
input[type="range"].volSlider::-webkit-slider-thumb:hover {
    background-color: var(--Accent);
}
input[type="range"].volSlider::-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);
}




@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));
}

div.audioItem{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
div.audioItem h3{
    color: var(--Primary);
    font-size: clamp(1.1vw, 2.2vh, 2.2vh);
    font-weight: 400;
    max-width: 80vw;
}


a.move-up, a.move-down{
    margin-top: 0;
    margin-left: clamp(0.5vw, 1vh, 1vh);
    margin-right: clamp(0.5vw, 1vh, 1vh);
}
a.move-up img, a.move-down img{
    height: clamp(1.6vw, 3.2vh, 3.2vh);
    transition-property: filter;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

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

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