#firework {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.task-item {
  --text-color: #fff;
  --text-line-scale: 0;
  --text-x: 0px;
  --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: 0px 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: -0.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: #ffffff;
  --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;
  stroke-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;
  --flag-scale-y: 1;
  --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;
}