:root {
  --bg: #16161a;
  --fg: #dcdae6;
  --sf: #292933;
  --accent: #946db3;

  --red: #CC7766;
  --orange: #D89F65;
  --yellow: #D3BC75;
  --green: #99BF73;
  --blue: #6080BF;
  --magenta: #6F63A6;

  --tblue: #7bb9e3;
  --tpink: #de8a99;
  --twhite: var(--fg);
  --brown: #8a6446;

  --font: monospace, sans-serif;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);

  margin: 1rem;
}

button, input, select {
  font-family: var(--font);
}

h1, h2, h3 {
  margin: .15rem .3rem;
  font-family: 'Hectic Micro', var(--font);
}

h2 {
  font-size: 2.25rem;
  margin-bottom: .3rem;
}
h3 { font-size: 1.3rem; }

nav { font-size: 3rem; }
nav > a { text-decoration: none; }
p { max-width: 80ch; }
footer { padding: 1rem; }

.row, footer {
  display: flex;
  flex-direction: row;
  align-items: center;
}

section {
  max-width: 80vw;
  margin: 1rem;
}

a {
  text-decoration: underline;
  color: inherit;
  cursor: pointer;
  padding: .5rem .5rem;
}
a:hover, a:focus-visible, a:active {
  text-decoration-style: dashed;
}

.badge {
  background: var(--sf);

  margin: 0 .5rem;
  padding: .25rem .5rem;
  user-select: none;
}

.get-btns img {
  min-height: .3in;
  max-height: 3rem;
  margin: .75rem;
}
.get-btns a {
  text-decoration: none;
}

button, .btn {
  color: var(--bg);
  background: var(--fg);

  padding: .5rem 1rem;
  border: none;
  font-size: 1.5rem;
  font-family: 'Hectic Micro', var(--font);

  cursor: pointer;
  transition: all 150ms;
}
button:hover, button:focus-visible, button:active,
.btn:hover, .btn:focus-visible, .btn:active {
  transform: scale(0.97);
  background: var(--accent);
}
button:disabled:hover, button:disabled:focus-visible, button:disabled:active {
  cursor: not-allowed;
  background: var(--sf);
}

.banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

  height: 2rem;
  padding: 1rem;
  padding-bottom: .333rem;

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

  transform: translateY(4rem);
  transition: all 150ms;
}
.banner.show {
  transform: translateY(0rem);
}

@media screen and (max-width: 495px) {
  nav {
    font-size: 1.75rem;
  }

  footer {
    flex-direction: column;
  }

  .banner {
    transform: translateY(6rem);
    padding-bottom: 3rem;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --fg: #16161a;
    --bg: #dcdae6;
    --sf: #c2c9cc;

    --twhite: #888;
  }

  .light-ic {
    filter: invert(1.0);
  }
}