:root {
  --main-font: monospace;

  /* Light theme variables */
  --bg-color: #ffffff;
  --text-color: #000000;
  --main-color: #1818ae;
  --odd-color: #c41eaa;

  --gap-size: 1em;
}

[data-theme='dark'] {
  /* Dark theme variables */
  --bg-color: #000000;
  --text-color: #ffffff;
  --main-color: #aaa;
  --odd-color: #dda;
}

body {
  font-family: var(--main-font);

  background-color: var(--bg-color);
  color: var(--text-color);

  max-width: 80ch;
  margin: 0 auto;
  padding: 1em;
}

h1,
h2 {
  font-variant: small-caps;
}

#header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#sequence {
  font-family: var(--main-font);

  & > li {
    color: var(--main-color);
    overflow-wrap: anywhere;

    &:nth-child(odd) {
      color: var(--odd-color);
    }

    &::marker {
      font-style: italic;
    }
  }
}

#web-worker-section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-size);
}

#numbers-lengths {
  padding: 0 var(--gap-size);
  color: var(--main-color);

  & > code {
    &:nth-child(odd) {
      color: var(--odd-color);
    }
  }
}

#sequence-length {
  color: var(--main-color);
}