/* Import roboto font */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");

:root{
    --color-1: rgb(0,202,205);
    --color-2: rgb(36,177,222);
    --color-3: rgb(42,92,253);
    --color-4: rgb(31,52,187);
    --color-5: rgb(72,69,252);
}

body {
    background: linear-gradient(
        254deg,
        var(--color-1) 0%,
        var(--color-2) 25%,
        var(--color-3) 50%,
        var(--color-4) 75%,
        var(--color-5) 100%
    );
    font-family: "Roboto", sans-serif;
    color: #fff;
    height: 100vh;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.5s ease;
}

main {
    height: 40%;
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

h1 {
    font-weight: 100;
}

#slider {
    width: 100%;
    height: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    position: relative;
}

#slider .sliderbar {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: white;
}

#slider {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Hides the slider so that custom slider can be made */
    width: 100%;
    /* Specific width is required for Firefox. */
    background: transparent;
    /* Otherwise white in Chrome */
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
}

input[type="range"]:focus {
    outline: none;
    /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type="range"]::-ms-track {
    width: 100%;
    cursor: pointer;
    /* Hides the slider so custom styles can be added */
    background: transparent;
    border-color: transparent;
    color: transparent;
}

/* Special styling for WebKit/Blink */

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 2px solid #fff;
    height: 36px;
    width: 36px;
    border-radius: 50%;
    background: transparent;
    backdrop-filter: blur(10px);
    cursor: pointer;
    margin-top: -14px;
    /* Add cool effects to your sliders! */
}

/* All the same stuff for Firefox */

input[type="range"]::-moz-range-thumb {
    border: 2px solid #fff;
    height: 36px;
    width: 36px;
    border-radius: 50%;
    background: transparent;
    backdrop-filter: blur(10px);
    cursor: pointer;
    margin-top: -14px;
}

/* All the same stuff for IE */

input[type="range"]::-ms-thumb {
    border: 2px solid #fff;
    height: 36px;
    width: 36px;
    border-radius: 50%;
    background: transparent;
    backdrop-filter: blur(10px);
    cursor: pointer;
    margin-top: -14px;
}

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    background: white;
    border-radius: 4.2px;
}

input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    background: white;
    border-radius: 4.2px;
}

input[type="range"]::-ms-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    border-width: 16px 0;
    color: transparent;
}

input[type="range"]:focus::-ms-fill-lower {
    background: white;
}

input[type="range"]::-ms-fill-upper {
    background: white;
    border-radius: 4.2px;
}