@layer reset {
  *, *::before, *::after { position: relative; box-sizing: border-box; margin: 0; padding: 0; }
  :root { font: 16px system-ui, sans-serif; }
}

@layer theme {
  :root {
    --accent-color: #a5f;
    --bg-color-1: #222;
    --bg-color-2: #444;
    --bg-color-3: #666;
    --text-color: #eee;
    --text-color-valid: #0f0;
    --text-color-invalid: #f00;

    color-scheme: dark;
  }

  body {
    background: var(--bg-color-1);
    color: var(--text-color);
  }
  a { color: var(--accent-color); }
}

main {
  width: min(70ch, calc(100% - 20px));
  margin-inline: auto;
  padding-block: 100px;
}

article {
  background: var(--bg-color-2);
  margin-block-start: 10px;
  padding: 20px;
  border-radius: 10px;

  > :not(h1,h2,h3,h4,h5,h6):has(+ *) { margin-block-end: 10px; }
  > :has(+ :is(h1,h2,h3,h4,h5,h6)) { margin-block-end: 20px; }
  > .flow-layout { margin-block-start: 20px; }
}

form {
  display: flex;
  flex-direction: column;
  gap: 5px;

  & input {
    appearance: none;
    padding: 5px 10px;
    border: none;
    border-radius: 10px;
    background: var(--bg-color-3);
    color: var(--text-color);
  }
  & :has(+ label) { margin-block-end: 10px; }
  & .flow-layout { margin-block-start: 20px; }
  
  & .clarify {
    font-size: 0.8em;
    opacity: 0.8;

    &.valid, &.invalid { display: none; }
    :not([data-valid]):has(+ &.valid) { margin-block-end: 10px; }
    [data-valid="true"] + &.valid { display: block; color: var(--text-color-valid); }
    [data-valid="false"] +*+ &.invalid { display: block; color: var(--text-color-invalid); }
    &.error { color: var(--text-color-invalid); }
  }
}

footer {
  margin-block-start: 10px;
  font-size: 0.8em;
  text-align: center;
}

.flow-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  &.center { justify-content: center; }
  &.right { justify-content: flex-end; }
}

.button {
  appearance: none;
  padding: 10px 15px;
  border: none;
  border-radius: 10px;

  color: inherit;
  font: inherit;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  
  &.primary { background: var(--accent-color); }
  &.secondary { background: var(--bg-color-3); }
}

ul, ol {
  list-style-position: inside;
  margin-inline-start: 10px;
}

/* Fix Twemoji sizing */
img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
}