public.scss

.task-card {
    padding: 1rem 1.5rem;
    margin-bottom: .5rem;
    box-shadow: 2px 2px 5px rgb(192 147 199);
    background-color: hsl(258 67% 91% / 1);

    .progress-bar {
        background-color: #820da8;
    }

    transition: left .75s ease-in, opacity .75s ease-in;
    left: 0px;
    opacity: 1;

    &.disappear {
        left: 19rem;
        opacity: 0;
    }
}
.task-description {
    margin-bottom: .4rem;
}

input[type='range'] {
    accent-color: #820da8;
}

#new-task-btn {
    background-color: hsl(297 100% 31% / 1);
    color: white;
    
    &:focus {
        box-shadow: 0 0 0 .2rem hsla(297, 100%, 40%, 0.25);
    }
    &:hover {
        background-color: hsl(297 100% 26% / 1);
    }
}