.giallo-l {
  display: inline-block;
  min-height: 1lh;
  width: 100%;
}

.giallo-ln {
  display: inline-block;
  user-select: none;
  margin-right: 0.4em;
  padding: 0.4em;
  min-width: 3ch;
  text-align: right;
  opacity: 0.8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg0: #282828;
    --bg1: #3c3836;
    --bg2: #504945;

    --fg0: #ebdbb2;
    --fg1: #d5c4a1;
    --fg2: #bdae93;

    --red: #fb4934;
    --dark-red: #cc241d;

    --orange: #fe8019;
    --dark-orange: #d65d0e;

    --yellow: #fabd2f;
    --dark-yellow: #d79921;

    --green: #b8bb26;
    --dark-green: #98971a;

    --teal: #8ec07c;
    --dark-teal: #689d6a;

    --blue: #83a598;
    --dark-blue: #458588;

    --magenta: #d3869b;
    --dark-magenta: #b16286;

    --bg: var(--bg0);
    --text: var(--fg0);
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --bg0: #fbf1c7;
    --bg1: #ebdbb2;
    --bg2: #d5c4a1;

    --fg0: #3c3836;
    --fg1: #504945;
    --fg2: #665c54;

    --red: #cc241d;
    --dark-red: #9d0006;

    --orange: #d65d0e;
    --dark-orange: #af3a03;

    --yellow: #d79921;
    --dark-yellow: #b57614;

    --green: #98971a;
    --dark-green: #79740e;

    --teal: #689d6a;
    --dark-teal: #427b58;

    --blue: #458588;
    --dark-blue: #076678;

    --magenta: #b16286;
    --dark-magenta: #8f3f71;
  }
}

:root {
  color-scheme: dark light;

  --bg: var(--bg0);
  --text: var(--fg0);
}

html {
  font-family: "Courier Prime", monospace;
  font-weight: 400;
}

* {
  background-color: var(--bg);
  color: var(--text);
}