@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Sora:wght@100..800&display=swap');

.sora-400 {
        font-family: "Sora", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
}

.sora-300 {
        font-family: "Sora", sans-serif;
        font-optical-sizing: auto;
        font-weight: 300;
        font-style: normal;
}

.sora-100 {
        font-family: "Sora", sans-serif;
        font-optical-sizing: auto;
        font-weight: 100;
        font-style: normal;
}

.sora {
        font-family: "Sora", sans-serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
}

* {
        font-family: "Sora", sans-serif;

}

#spotify-card-progression p {
        font-family: "JetBrains Mono", monospace !important;

}

/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
        input[type='range'] {
                overflow: hidden;
                background-color: #3d3d3d;
        }

        input[type='range']::-webkit-slider-thumb {
                box-shadow: -80px 0 0 80px #FFF;
        }

}

/** FF*/
input[type="range"]::-moz-range-progress {
        background-color: #FFF;
}

/* IE*/
input[type="range"]::-ms-fill-lower {
        background-color: #FFF;
}

.progress-bar {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        height: 2px;
        background-color: #3d3d3d;
        border-radius: 5px;
        outline: none;
        cursor: pointer;
}

.progress-bar::-webkit-slider-runnable-track {
        background: #cccccc;
}

.progress-bar::-webkit-slider-progress {
        background: white;
}

.progress-bar::-moz-range-progress {
        background: white;
}

.progress-bar::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 0;
        height: 0;
        background-color: transparent;
        border: none;
}

.progress-bar::-moz-range-thumb {
        width: 0;
        height: 0;
        background-color: transparent;
        border: none;
}

.progress-bar::-ms-thumb {
        width: 0;
        height: 0;
        background-color: transparent;
        border: none;
}

.image-container {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
}

.image-container img {
        width: 100%;
        height: 100%;
        border-radius: 3px;
        object-fit: cover;
}