:root{
    --spacing : 1rem;
    --blur :2px;
    --base : #8e40e8;
}

body{
   text-align: center;
}
.image-conatiner{
background: var(--base);
padding: var(--spacing);
filter: blur(var(--blur));
max-height: 100vh;
max-width: 100vh;
margin: 0px auto;
margin-top: 1rem;
}

.image-conatiner >img{
    width: 100%;
    height: 100%;
}

.js-color{
    color: var(--base);
}

input[type='range'] {
    -webkit-appearance: none;
    appearance: none;
    width: 25%;
    height: 8px;
    background: #ddd;
    outline: none;
    opacity: 0.7;
    transition: opacity 0.3s;
    border-radius: 5px;
}

input[type='range']:hover {
    opacity: 1;
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--base);
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

input[type='range']::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--base);
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}