/* root */
:root {
  /* mellow theme colors */
  --bg: #161617;
  --fg: #c9c7cd;
  --bg-dark: #131314;
  --black: #27272a;
  --red: #f5a191;
  --green: #90b99f;
  --yellow: #e6b99d;
  --blue: #aca1cf;
  --magenta: #e29eca;
  --cyan: #ea83a5;
  --white: #c1c0d4;
  --bright_black: #353539;
  --bright_red: #ffae9f;
  --bright_green: #9dc6ac;
  --bright_yellow: #f0c5a9;
  --bright_blue: #b9aeda;
  --bright_magenta: #ecaad6;
  --bright_cyan: #f591b2;
  --bright_white: #cac9dd;
  --gray01: #1b1b1d;
  --gray02: #2a2a2d;
  --gray03: #3e3e43;
  --gray04: #57575f;
  --gray05: #757581;
  --gray06: #9998a8;
  --gray07: #c1c0d4;

  /* site background color */
  --site-bg: var(--bg-dark);
}

html, body {
  max-height: 100%;
  background-color: var(--site-bg);
  max-width: 80ch;
  margin: auto;
}
#font, p, ul, ol, h1, h2, h3, h4, h5, table {
  font-family: sans-serif;
  color: white;
}
h1 {
  font-size: 3em;
}
iframe[src="/blog"] {
  width: 100%;
  border: none;
}
table#bloglist {
  width: 100%;
  td.date {
    text-align: right;
  }
}
a {
  font-family: sans-serif;
  text-decoration: none;
  color: var(--cyan);
}
a:hover, a:active {
  text-decoration: underline;
}