body {
  margin-bottom: 8rem;
  font-family: Gill Sans, Gill Sans MT, Calibri, Trebuchet MS, sans-serif;
}

h1 {
  border-bottom: 2px solid;
}

h1, form {
  max-width: 50vw;
  margin: 0 auto;
}

textarea {
  width: 100%;
  min-height: 4rem;
  padding: 1rem;
}
character-counter:not(:defined) {
  display: none;
}

character-counter {
  --counter-diameter: 2rem;
  --counter-stroke-width: 4;
  align-items: center;
  gap: .5rem;
  display: inline-flex;
}

character-counter .counter-wrapper {
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  display: flex;
}

character-counter .counter-wrapper > * {
  min-width: 2rem;
}

character-counter .remaining {
  text-align: right;
  font-weight: 400;
}

character-counter[data-hide-count] .remaining {
  visibility: hidden;
}

character-counter .circle-container {
  width: var(--counter-diameter);
  height: var(--counter-diameter);
  transform: rotate(-90deg);
}

character-counter .track {
  fill: none;
  stroke: var(--counter-track-color, #e0e0e0);
  stroke-width: var(--counter-stroke-width);
}

character-counter .progress {
  fill: none;
  stroke: var(--counter-normal-color, #1d9bf0);
  stroke-width: var(--counter-stroke-width);
  stroke-linecap: round;
  stroke-dasharray: var(--circumference);
  stroke-dashoffset: var(--offset);
  transition: stroke-dashoffset .15s ease-out, stroke .15s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  character-counter .progress {
    transition: none;
  }
}

character-counter[data-over-limit] .remaining {
  color: var(--counter-warning-color, #f4212e);
}

character-counter[data-over-limit] .progress {
  stroke: var(--counter-warning-color, #f4212e);
}