:root {
  font-family: "sans-serif";
  font-size: 18pt;

  --level: 65%;
  --saturation-offset: 20%;
  --rainbow: linear-gradient(
    90deg,
    hsl(0, calc(100% - var(--saturation-offset)), var(--level)) 0%,
    hsl(36, calc(100% - var(--saturation-offset)), var(--level)) 10%,
    hsl(64, calc(74% - var(--saturation-offset)), var(--level)) 20%,
    hsl(118, calc(68% - var(--saturation-offset)), var(--level)) 30%,
    hsl(179, calc(68% - var(--saturation-offset)), var(--level)) 40%,
    hsl(188, calc(76% - var(--saturation-offset)), var(--level)) 50%,
    hsl(212, calc(86% - var(--saturation-offset)), var(--level)) 60%,
    hsl(260, calc(89% - var(--saturation-offset)), var(--level)) 70%,
    hsl(284, calc(94% - var(--saturation-offset)), var(--level)) 80%,
    hsl(308, calc(97% - var(--saturation-offset)), var(--level)) 90%,
    hsl(0, calc(100% - var(--saturation-offset)), var(--level)) 100%
  );
}

@keyframes scroll {
  from {
    background-position: 0% 0;
  }

  to {
    background-position: var(--bg-size) 0;
  }
}

@keyframes rainbow {
  0% {
    filter: hue-rotate(0deg);
  }

  50% {
    filter: hue-rotate(180deg);
  }

  100% {
    filter: hue-rotate(360deg);
  }
}

body {
  margin: auto;
  padding: 1vw;
  max-width: 40em;
  min-width: 40%;
  display: flex;
  flex-direction: column;
  gap: 0.4em;

  h1 {
    margin-top: 0;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;

    img {
      width: 2em;
      height: 2em;
      animation: rainbow 2s linear infinite;
    }
  }

  label {
    margin-bottom: 0.1em;
  }

  input {
    font-size: 18pt;
  }

  & > button {
    transition: background-color 100ms linear;
    background-color: #6c7;
    font-size: 18pt;
    border: none;

    &:disabled {
      background-color: #999;
    }
  }

  div.list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;

    & > label {
      display: grid;
      grid: row / 1fr 3fr 0.6fr 0.2fr;
      align-items: center;
      gap: 0.5em;
      margin: 0;
      transition: scale 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
      border: solid 2px black;
      padding: 1em;

      @starting-style {
        scale: 0.2;
      }

      &.done {
        span {
          text-decoration: line-through;
          --bg-size: 200%;
          background-image: var(--rainbow);
          background-size: var(--bg-size);
          animation: scroll 5s linear infinite forwards;
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        small {
          font-weight: bold;
        }
      }

      button {
        font-weight: bold;
        text-align: center;
        width: 2em;
        height: 2em;
        padding: 2px;
        border: none;
        background-color: #c67;
        border-radius: 50%;

        &:hover {
          background-color: #b56;
        }
      }

      span {
        overflow-x: hidden;
        text-overflow: ellipsis;
        transition: -webkit-text-fill-color 100ms linear;
      }

      small {
        text-align: right;
        transition: font-weight 200ms linear;
      }
    }
  }
}