:root {
  --html-bg: rgb(0, 40, 140);
  --accent-color: rgb(130, 220, 255);
  --text-color: rgb(240, 250, 255);
  --link-color: rgb(0, 240, 255);
}
html {
  background: var(--html-bg);
}
body {
  max-width: 600px;
  margin: auto;
  padding: 1rem;
  color: var(--text-color);
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
::selection {color: var(--html-bg);background-color: var(--accent-color);}
h1, h2, h3, h4, h5, h6 {
  text-align: initial;
  font-family: var(--font-ambulance);
  font-weight: normal;
  letter-spacing: 5px;
  border-block-end: 2px dashed var(--accent-color);
  &::first-letter {color: var(--accent-color);}
  &::after {
    content: "\271A";
    float: inline-end;
    margin-bottom: 5px;
    color: var(--accent-color);
  }
}
header {
  user-select: none;
  font-size: 5rem;
  font-family: var(--font-acidic);
  text-wrap: nowrap;
  span {
    display: block;
    &:last-of-type {
      margin-block-start: -1.5rem;
      margin-inline-start: 1em;
      font-size: .5em;
      font-family: var(--font-metal);
    }
  }
  i {
    font-style: normal;
    color: var(--accent-color);
  }
  .ascii {
    margin: 0;
    text-align: right;
  }
}
hr {border-top: 2px dotted var(--accent-color);}
a {color: var(--link-color);}
section:has(#jrock) {text-align: center;}
footer {
  margin-block-start: 1.5rem;
  text-align: center;
  font-size: .9rem;
}