@font-face {
  font-family: "Space Mono";
  src: local("Space Mono"),
      url('/ttf/Space_Mono/SpaceMono-Regular.ttf'),
      url('/ttf/Space_Mono/SpaceMono-Bold.ttf'),
      url('/ttf/Space_Mono/SpaceMono-Italic.ttf'),
      url('/ttf/Space_Mono/SpaceMono-BoldItalic.ttf'),
      format("truetype");
}
* {
  --bg1: #a0a0a0;
  --fg1: #0f0f0f;
  --fg0: #494949;
}

/* * { */
/*   --bg1: #e1f5e9; */
/*   --fg1: #0d2626; */
/*   --fg0: #143939; */
/* } */

header { padding-bottom: 40px; }

body {
  margin: auto;
  padding: 2em;
  max-width: 55em;
  background: var(--bg1);
  color: var(--fg1);
  font-family: 'Space Mono', monospace;
  letter-spacing: 0.5px;
}

footer { padding-top: 40px; }

h1, h2, h3, h4, h5, h6 { display: inline-block; }

a {
  color: var(--fg0);
  text-decoration: none;
  font-weight: bold;
}

a:visited { color: var(--fg0); }

a:hover {
  color: var(--bg1);
  background-color: var(--fg1);
  animation: wave 1.5s ease-in-out infinite;
}

a:before { content: "{"; }
a:after { content: "}"; }

ul { list-style: none; }

li::before {
  content: "* ";
  color: var(--fg0);
}

img {
  padding: 20px;
  margin: 5px;
}

::selection {
  background-color: var(--fg0);
  color: var(--bg1);
}

#website_title {
  width: 80px;
  padding: 1rem 3rem 1rem 3rem;
  border: dashed 2px var(--fg0);
  display: inline;
  font-stlye: italic;
  cursor: default;
}

#website_title:hover {
  border: solid 2px var(--fg0);
  text-decoration-style: double;
}

#current {
  float: right;
}

.subtitle {
  color: var(--fg0);
  float: right;
  display: inline-block;
}

@keyframes wave {
  50% {
    color: var(--fg0);
    background-color: var(--bg1);
  }
}

.updated {
  font-style: italic;
  color: $red;
}

code {
  font-family: "Space Mono";
}