html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,
strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,
label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,
details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,
section,summary,time,mark,audio,
video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,
section{display:block}body{line-height:1}ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,
q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
#firework{position:absolute;left:0;top:0;width:100%;height:100%}
.task-item{
    --text-color:#fff;
    --text-line-scale:0;
    --text-x:0;
    --border-default:#7F7F85;
    --border-hover:#E4E4E7;
    --checkbox-active:#6E7BF2;
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    width:340px;
    border-radius:7px;
    overflow:hidden;
    -webkit-mask-image:-webkit-radial-gradient(white,black);
    transition:background 0.15s linear
}
.task-item:not(.done):hover{--blur-x:372px;--blur-o:1;background:#2C2C31}
.task-item:before{
        content:"";
        position:absolute;
        width:32px;
        height:6px;
        right:100%;
        top:-11px;
        border-radius:50%;
        box-shadow:0 4px 4px var(--checkbox-active);
        transform:translateX(var(--blur-x,0));
        opacity:var(--blur-o,0);
        transition:opacity 0.15s,
        transform 1.2s}
.task-item.done{--checkbox-active:#444449;--flag-border:#444449;--text-color:#626268}
.task-item .text{
    display:block;
    letter-spacing:-.05px;
    text-decoration:none;
    color:var(--text-color);
    position:relative;
    transform:translateX(var(--text-x)) translateZ(0);
    transition:color 0.25s
}
.task-item .text:before{
    content:"";
    position:absolute;
    height:1px;
    left:-2px;
    right:-2px;
    top:50%;
    transform-origin:0 50%;
    transform:translateY(-50%) scaleX(var(--text-line-scale)) translateZ(0);
    background:currentColor
}
.task-item .checkbox{ 
    --active-tick:#fff;
    --checkbox-lines-offset:13.5px;
    display:block;
    padding:15px 12px;
    cursor:pointer;
    position:relative;
    -webkit-tap-highlight-color:transparent
}
    
.task-item .checkbox svg{display:block;position:absolute}
.task-item .checkbox input{
    display:block;
    outline:none;
    border:none;
    background:none;
    padding:0;
    margin:0;
    -webkit-appearance:none;
    width:18px;height:18px
}
.task-item .checkbox input+svg{
    width:21px;
    height:18px;
    left:12px;
    top:15px;
    color:var(--checkbox-active);
    transition:color 0.25s linear
}
.task-item .checkbox input+svg .shape{
    stroke-width:1.5px;
    stroke:var(--border,var(--border-default));
    fill:var(--background,none);
    transition:fill 0.25s linear,stroke 0.25s linear
}
.task-item .checkbox input+svg .tick{
    stroke-dasharray:20;
    stroke-dashoffset:var(--checkbox-tick-offset,20px);
    transition:stroke-dashoffset var(--checkbox-tick-duration,0.15s) var(--checkbox-tick-easing,ease)
}
.task-item .checkbox input+svg .tick.mask{stroke:var(--active-tick)} 
.task-item .checkbox input+svg+svg{
    width:11px;
    height:11px;
    fill:none;
    stroke:var(--checkbox-active);
    stroke-width:1.25;
    stroke-linecap:round;
    top:9px;
    right:2px;
    stroke-dasharray:4.5px;
    troke-dashoffset:var(--checkbox-lines-offset);
    pointer-events:none
}
.task-item .checkbox input:checked+svg{
    --background:var(--checkbox-active);
    --border:var(--checkbox-active);
    --checkbox-tick-duration:.2s;
    --checkbox-tick-easing:cubic-bezier(0,.45,1,.5);
    --checkbox-tick-offset:0
}
.task-item .checkbox:hover input:not(:checked)+svg{--border:var(--border-hover)}
.task-item .flag{
    --flag-color:#BABAC1;
    --flag-fill:var(--checkbox-active);
    --flag-fill-percent:0%;
    --flag-scale-x:1.5;
    --flag-scale-y:1.5;
    --flag-rotate:0deg;
    --flag-circle-opacity:0;
    --flag-circle-scale:0;
    -webkit-appearance:none;
    -webkit-tap-highlight-color:transparent;
    cursor:pointer;
    outline:none;
    border:none;
    background:none;
    padding:15px 12px;
    margin:0 0 0 auto;
    position:relative
}
.task-item .flag.active{--flag-fill-percent:150%}
.task-item .flag svg{
    display:block;
    width:18px;
    height:18px;
    position:relative;
    z-index:1;
    pointer-events:none;
    fill:none;
    stroke:var(--flag-border,var(--border,var(--border-default)));
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
    transform-origin:7.66px 16.75px;
    transform:scale(var(--flag-scale-x),var(--flag-scale-y)) rotate(var(--flag-rotate));
    transition:stroke 0.25s linear
}
.task-item .flag svg .fill{
    stroke:var(--flag-fill);
    fill:var(--flag-fill);
    -webkit-clip-path:circle(var(--flag-fill-percent) at var(--flag-fill-x,7.66px) var(--flag-fill-y,16.75px));
    clip-path:circle(var(--flag-fill-percent) at var(--flag-fill-x,7.66px) var(--flag-fill-y,16.75px));
    transition:fill 0.25s linear,stroke 0.25s linear
}
.task-item .flag:hover{--border:var(--border-hover)}
.task-item .flag:before{
    content:"";
    display:block;
    width:24px;
    height:12px;
    border-radius:50%;
    position:absolute;
    bottom:6px;
    left:8px;
    opacity:var(--flag-circle-opacity);
    background:var(--flag-fill);
    transform:scale(var(--flag-circle-scale)) 
    translateZ(0)
}
html{
    box-sizing:border-box;
    -webkit-font-smoothing:antialiased}*{box-sizing:inherit}*:before,*:after{box-sizing:inherit
}
body{ 
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:#242428;
    padding:20px;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif
}