:root {
  --rosewater: #dc8a78;
  --flamingo: #dd7878;
  --pink: #ea76cb;
  --mauve: #8839ef;
  --red: #d20f39;
  --maroon: #e64553;
  --peach: #fe640b;
  --yellow: #df8e1d;
  --green: #40a02b;
  --teal: #179299;
  --sky: #04a5e5;
  --sapphire: #209fb5;
  --blue: #1e66f5;
  --lavender: #7287fd;
  --text: #4c4f69;
  --subtext1: #5c5f77;
  --subtext0: #6c6f85;
  --overlay2: #7c7f93;
  --overlay1: #8c8fa1;
  --overlay0: #9ca0b0;
  --surface2: #acb0be;
  --surface1: #bcc0cc;
  --surface0: #ccd0da;
  --base: #eff1f5;
  --mantle: #e6e9ef;
  --crust: #dce0e8;
  --inverted-text: var(--base);
  --selection-color: var(--blue);
  --color-primary: var(--lavender);
  --color-bg: var(--base);
  --color-primary-light: color-mix(
    in srgb,
    var(--color-primary) 20%,
    var(--color-bg)
  );
  --text-primary: var(--text);
  --text-secondary: var(--subtext1);

  --border-radius: 8px;
}

body {
  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
    Bitstream Vera Sans Mono, Courier New, monospace, serif;
  background-color: var(--color-bg);
  color: var(--text-primary);
}

main {
  max-width: 40rem;
  margin: 0 auto;
}

h1 {
  font-size: 1.5rem;
  line-height: 2rem;
}

h2 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  margin-bottom: 1rem;
}

p {
  margin: 1.5rem 0;
  line-height: 1.5;
}

ul {
  line-height: 1.3;
}

button {
  background-color: var(--color-primary);
  color: var(--base);
  border-radius: var(--border-radius);
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s ease;

  input + & {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  &:hover {
    opacity: 0.7;
  }
}

input {
  border-radius: var(--border-radius);
  padding: 0.4rem;

  &:has(+ button) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: #818cf8;
  text-decoration: underline;
}

.message {
  background-color: var(--color-primary-light);
  border-radius: var(--border-radius);
  padding: 1rem;

  &.error {
    background-color: color-mix(in srgb, var(--red) 20%, var(--color-bg));
  }
}

ul:has(input[type="checkbox"]) {
  padding-left: 0;
}

li {
  &:has(> input[type="checkbox"]) {
    margin-top: 1rem;
    list-style: none;

    & input {
      margin-right: 1rem;
      width: 1rem;
      height: 1rem;
    }
  }
}