@font-face {
  font-family: 'Courier Prime';
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  src: url("fonts/Courier-Prime-Code-subset.woff2") format("woff2"),
    url("fonts/Courier-Prime-Code-subset.zopfli.woff") format("woff"),
    url("fonts/Courier-Prime-Code-subset.ttf") format("truetype");
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-size: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: calc(1em + 4.5 * ((100vw - 500px) / 500));
  height: 100%;
  line-height: 1.3;
}
body {
  display: flex;
  align-items: center;
  margin: 0 auto;
  max-width: 60em;
  height: 100%;
  font-family: 'Courier Prime', monospace;
  color: white;
  background-color: black;
  overflow: hidden;
}
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: normal;
}
dl, p, ul, ol {
  margin-top: 0;
  margin-bottom: 1.25rem;
}


/* -----------------------------
 * more dashboard-specific stuff
 */

.title-container {
  flex: 0 1 37%;
  padding: 3em 2.5em;
  text-align: center;
  background-image: url('images/arachnid-crawling-cropped.gif');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30em;
  box-shadow: inset 1em 0 1em black, inset -1em 0 1em black;
}
.title-container p {
  font-size: 2.2em;
  margin-top: 40vh;
  line-height: 1.1;
}
.title-container img {
  width: 70%;
  min-width: 11em;
}
.stats-container {
  flex: 1 1 auto;
  padding: 2em 3em 2em 2em;
}

h1 {
  font-size: 1.4em;
  line-height: 1.1;
}
h2 {
  font-size: 1.6em;
  color: #00ff00;
  text-transform: uppercase;
}
h2 small {
  display: block;
  font-size: 0.6em;
}

dl {
  font-size: 1.1em;
  display: table;
  border-collapse: collapse;
  width: 100%;
}
dt {
  display: table-cell;
  color: hsl(0,0%,70%);
}
dd {
  display: table-cell;
  margin: 0;
  text-align: right;
  letter-spacing: 0.03em;
}

.dl-row {
  display: table-row;
}
.dl-row--total {
  position: relative;
  border-top: 1px solid hsl(0,0%,60%);
}
.dl-row--total dt,
.dl-row--total dd {
  padding-top: 0.5em;
}
.dl-row--pb dt,
.dl-row--pb dd {
  padding-bottom: 0.5em;
}
.total {
  text-transform: uppercase;
}