/*
 * Main stylesheet used globally around the website
 */

:root {
  /* Color scheme specification */
  color-scheme: light dark;

  --light-bg:         aliceblue;
  --light-fg:         black;
  --light-bd:         gainsboro;
  --light-ln:         mediumpurple;
  --light-ln-visited: black;
  --light-ln-active:  black;

  --dark-bg:          black;
  --dark-fg:          aliceblue;
  --dark-bd:          dimgrey;
  --dark-ln:          mediumpurple;
  --dark-ln-visited:  mediumspringgreen;
  --dark-ln-active:   black;
}

body {
  font: 1.2rem/1.4 monospace;

  color:            light-dark(var(--light-fg), var(--dark-fg));
  background-color: light-dark(var(--light-bg), var(--dark-bg));

  /* Limit page width and center it horizontally */
  margin:    0 auto;
  max-width: 80ch;
}

/* Given the fact we use a monospace font already, codeblocks look a little...
 * awkward. Lets fix that! */
code {
  border:        1px solid light-dark(var(--light-bd), var(--dark-bd));
  border-radius: 5px;

  padding: .1em .2em;
}

a:link {
  color: light-dark(var(--light-ln), var(--dark-ln));
  text-decoration: none;
}

a:visited {
  color: light-dark(var(--light-ln-visited), var(--dark-ln-visited));
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  color: light-dark(var(--light-ln-active), var(--dark-ln-active));
  text-decoration: none;
}

.main-nav {
  list-style-type: none;
  padding-left:    0;
}

.main-nav li {
  display: inline-block;
  padding: 0 0.5em;
}