:root {
  /* Campbell Theme Colors */
  --term-foreground: #cccccc;
  --term-background: #222222;
  --term-selection: #5da5d533;
  --term-black: #0c0c0c;
  --term-brightblack: #767676;
  --term-red: #c50f1f;
  --term-brightred: #e74856;
  --term-green: #13a10e;
  --term-brightgreen: #16c60c;
  --term-yellow: #c19c00;
  --term-brightyellow: #f9f1a5;
  --term-blue: #0037da;
  --term-brightblue: #3b78ff;
  --term-magenta: #881798;
  --term-brightmagenta: #b4009e;
  --term-cyan: #3a96dd;
  --term-brightcyan: #61d6d6;
  --term-white: #cccccc;
  --term-brightwhite: #f2f2f2;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background-color: var(--term-background);
  color: var(--term-foreground);
  height: 100%;

  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
}

body {
  margin: 0;
  padding: 1rem;
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}

main:has(.hero) {
  align-self: center;

  header {
    text-align: center;

    h1 {
      margin-bottom: 1rem;
      font-size: 1rem;
      font-weight: bold;
      color: var(--term-brightwhite);
    }
  }
}

a {
  color: var(--term-brightyellow);
  text-decoration: underline;

  &:visited {
    color: var(--term-yellow);
  }

  &:focus {
    color: var(--term-red);
  }
}

pre {
  margin: 0;
}


.inverted {
  color: var(--term-background);
  background-color: var(--term-foreground);

  a {
    color: var(--term-blue);
  }
}


.term-fg-red {
  color: var(--term-red);
}

.term-fg-black-bright {
  color: var(--term-brightblack);
}


a:has(.ascii) {
  text-decoration: none;
  color: inherit;
}


.frame {
  border: 6px double var(--term-foreground);
  padding: 1rem;

  &.centered {
    margin: auto;
  }

  &.hero {
    max-width: 25em;
    display: flex;
    flex-direction: column;
    align-items: center;

    .ascii {
      font-size: 1.5rem;
    }
  }

  header {
    text-align: center;
  }
}

a:hover>.frame {
  color: var(--term-background);
  background-color: var(--term-foreground);
  border-color: var(--term-background);
}


body>footer {
  text-align: center;
  padding: 0 1rem;
}