@font-face {
  font-family: "IBM VGA";
  src: url("/assets/fonts/Web437_IBM_VGA_8x16.woff") format('woff');
}

@font-face {
  font-family: "Terminus TTF";
  src: url("/assets/fonts/TerminusTTF-4.49.3.woff") format('woff');
}

@font-face {
  font-family: "Terminus TTF";
  src: url("/assets/fonts/TerminusTTF-Bold-4.49.3.woff") format('woff');
  font-weight: bold;
}

@font-face {
  font-family: "Terminus TTF";
  src: url("/assets/fonts/TerminusTTF-Bold-Italic-4.49.3.woff") format('woff');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "Terminus TTF";
  src: url("/assets/fonts/TerminusTTF-Italic-4.49.3.woff") format('woff');
  font-style: italic;
}

/* layout */
body {
  font-family: "IBM VGA", Terminus TTF, ui-monospace, monospace;
  font-size: 16px;
  line-height: 1.5;
  color: #eee;
  margin: 25px auto;
  max-width: 1000px;
  background-image: url("/assets/spacetile.gif");
}

.slab {
  margin: 10px;
  padding: 10px;
  background-color: #011;

  border: 5px outset #344;
  /* copied from https://nemenepsa.neocities.org */
  box-shadow: 12px 12px 6px rgba(0,0,0,0.25), 12px 12px 12px rgba(0,0,0,0.25), 12px 12px 18px rgba(0,0,0,0.25);
}

main {
  display: flex;
  align-items: center;
  justify-content: center;
}

header {
  padding: 25px;
}

aside {
  padding: 0px 25px;
  width: 200px;
  flex-shrink: 0;
}

article {
  max-width: 700px;
  padding: 0px 25px !important;
}



/* element styling */

a {
  color: #acc;
  text-decoration: wavy underline;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  margin: calc(1.2rem * 2) 0 1.2rem;
  line-height: 1.2rem;
}

h1 {
  font-size: 2rem;
  line-height: calc(2 * 1.2rem);
  margin-bottom: calc(1.2rem * 2);
  text-transform: uppercase;
  text-decoration: underline double;
}

h2 {
  text-decoration: underline;
  font-size: 1rem;
  text-transform: uppercase;
}

ul, ol {
  padding: 0;
  margin: 0 0 --line-height);
}

ul {
  list-style-type: square;
  padding: 0 0 0 2ch;
}
ol {
  list-style-type: none;
  counter-reset: item;
  padding: 0;
}

/* js helpers */

#listening {
  display: flex;
  padding: 5px; 
  border: 5px inset #344;
}

#listening > * {
  margin: 5px;
}