:root {
  --headers-color: #536A02;
  --link-color: #BBCC04;
  --link-text-color: #536A02;
  --block-bg: #f2f2f2;
  --block-fg: #536A02;
  --border: #889F02;
  --header-bg: #BBCC04;
  --header-fg: #f6f4e8;
}

html {
  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
  font-family: serif;
  margin: 0;
  padding: 0;
}

body {
  margin: 0 auto;
  font-size: 1.7rem;
  padding: 0rem;
  line-height: 1.7;
}

main, footer {
  margin: 0 auto;
  max-width: 68rem;
  padding: 0 2rem;	
}

footer, #post-info {
  font-style: italic;
  margin: 2rem 0;
  color: var(--headers-color);
}

footer {
  margin: 2rem auto;
  padding: 2rem;
  border-top-width: .1rem;
  border-top-style: solid;
  border-top-color: var(--border);
}

hr {
  border-width: .1rem  0 0 0;
  border-style: solid;
  border-color: var(--border);
}


img {
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  color: var(--headers-color);
  line-height: 1.2;
}

a {
  text-decoration-color: var(--link-color);
  text-decoration-thickness: .15rem;
  text-underline-offset: .3rem;
  color: var(--link-text-color);
}

a[hreflang]::after {
  content: ' ['attr(hreflang)']';
}

header a {
  text-decoration: none;
}

nav {
  padding: 0 0 4rem 0;
  text-align: center;
}

nav ul {
  list-style-type: none;
}

nav ul li {
  display: inline-block;
}

nav ul li::after {
  content: " • ";
  color: var(--border);
}

nav ul li:last-of-type::after {
  content: none;
}


header#banner {
  background-color: var(--header-bg);
  background-image: url("../images/header-bg.webp");
  background-size: cover;
  background-position: center;
  min-height: 25rem;
}

header#banner h1 {
  min-height: 25rem;
  background-image: url("../images/logo.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right 2rem bottom -4rem;
  /* Hide the text.*/
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

blockquote, pre {
  background-color: var(--block-bg);
  color:  var(--block-fg);
  padding: 1rem 2rem;
  margin: 0;
  border-width: .2rem 0;
  border-style: solid;
  border-color: var(--border);
  font-weight: normal;
}

pre {
  font-size: 1.5rem;
  overflow: auto;
}