/* -- Core ------------------------------------------------------------------ */
:root {
  --color-bg-default: #222;
  --color-bg-light: #323232;
  --color-border-light: #424242;
  --color-accent: #0066dd;
  --color-text-light: #fff;
  --color-text-default: #ddd;
  --color-text-dark: #aaa;
  --grid-half: calc(var(--grid-1) / 2);
  --grid-1: 8px;
  --grid-2: calc(var(--grid-1) * 2);
  --grid-3: calc(var(--grid-1) * 3);
  --grid-4: calc(var(--grid-1) * 4);
  --transition-duration: 0.2s;
}

html {
  background: var(--color-bg-default);
  color: var(--color-text-default);
  font: 18px/1.6 system-ui, Helvetica, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

body {
  padding: var(--grid-2);
  margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

h1 {
  font-size: 26px;
}

header h1,
.home h1 {
  font-size: 30px;
}

h2 {
  font-size: 18px;
}

.logo {
  display: block;
  margin: 0 auto var(--grid-4);
  max-width: 150px;
}

.logo img {
  border: 3px solid var(--color-border-light);
  border-radius: 100%;
  height: 160px;
  padding: 2px;
  width: 160px;
  transition: border-color var(--transition-duration);
}

.logo:hover img {
  border-color: var(--color-accent);
}

/* -- Content --------------------------------------------------------------- */
.content {
  margin: 0 auto;
  max-width: calc(var(--grid-1) * 96);
}

.content a {
  color: var(--color-text-light);
  border-bottom: 1px solid var(--color-accent);
  text-decoration: none;
  transition: border-color var(--transition-duration);
}

.content a:hover {
  border-bottom-color: var(--color-text-light);
}

/* -- Homepage -------------------------------------------------------------- */
.home {
  margin: 0 auto;
}

.home h1 {
  text-align: center;
}

/* -- Blog Archives --------------------------------------------------------- */
.blog-post-list-item {
  margin-bottom: 0.5em;
}

.blog-post-time {
  color: #999;
  display: block;
  font-size: 12px;
}