* {
  box-sizing: border-box;
}

.js, .js * {
  transition-duration: 7s;
  transition-timing-function: ease-out;
  transition-property: background, background-color, color, box-shadow, border, border-color, border-bottom-color;
}

html {
  background-color: white;
  background-image: url(stars.png);
  color: #494949;
  font-display: swap;
  font-family: 'Rawson Pro', sans-serif;
  font-size: 14px;
}

pre, code, kbd, samp {
  font-family: monospace;
}

pre, code {
  padding: 0 0.5em;
  background: #eee;
  border-radius: 3px;
}

pre, pre code {
  padding: 0;
}

em, i {
  font-style: italic;
}

strong, b {
  font-weight: 700;
}

.raised {
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 10em -0.5em rgba(0, 0, 0, 0.15);
  margin: 0 auto;
  max-width: 90ch;
  min-width: 30ch;
  padding: 1rem;
  width: 100%;

  /* Keep the shadow from curving at the top */
  margin-top: -10em;
  padding-top: 10em;
}

.raised > main {
  margin: 2em 1.25em;
}

main header h1 {
  font-size: 1.7em;
  font-variant: small-caps;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin-bottom: -1.2rem;
}

h1, h2, h3, h4, h5, h6, th, thead, tfoot {
  color: black;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  padding: 0;
  font-size: 1.2em;
}

h2 {
  color: #494949;
  font-size: 1.5em;
  font-variant: small-caps;
  margin-top: 1em;
  text-indent: calc(-1em / 1.5);
}

h3 {
  margin-top: 0.5em;
}

h3::before {
  content: '» ';
  color: #ccc;
}

h3 + ul, h3 + p, h3 + ol {
  margin-top: 0.2em;
}

article img {
  border-radius: 5px;
  box-shadow: 0 0 10px 1px #AAA;
  margin: 0 auto;
  max-width: 100%;
}

button {
  background: none;
  border: 0px;
  cursor: pointer;
  font-family: inherit;
  outline: 0 none transparent;
}

a, a:active, a:visited, button {
  border-bottom: 1px dotted black;
  color: inherit;
  text-decoration: none;
}

a:focus, a:hover, button:focus, button:hover {
  border-bottom-style: solid;
}

p {
  text-align: justify;
  font-weight: 300;
  font-size: 1.2rem;
  margin-top: 0.5em;
  margin-bottom: 1.5em;
}

article > ul, article > ol {
  font-size: 1.2em;
}

ul {
  list-style-type: '– ';
}

ul, ol {
  padding-left: 0;
}

li {
  margin-bottom: 0.3em;
  font-weight: normal;
  text-indent: -1em;
  padding-left: 1em;
}

li p {
  margin-top: 0;
  margin-bottom: 0.3em;
}

li p:last-child {
  margin-bottom: 1em;
}

article > ul > li > a,
article > ul > li > strong > a,
article > ul > li > p:first-child > a,
article > ul > li > p:first-child > strong > a,
a.title {
  font-variant: small-caps;
}

hr {
  border: none;
  padding: 0.5rem;
  position: relative;
}

hr:before {
  color: black;
  content: '⁂';
  left: 50%;
  position: absolute;
  top: 50%;
}

header.root {
  border-bottom: 1px solid #494949;
  padding-bottom: 1em;
  margin: 1em 0;
}

header.root a {
  border-bottom: 0;
}

header.root h1 {
  font-size: 1.9em;
  font-variant: small-caps;
  font-weight: 500;
}

header p, footer p {
  margin: 0;
}

footer.root {
  margin: 6em auto 0;
}

footer.root p {
  color: #888;
  text-align: center;
}

article > header p, article > footer p {
  text-align: right;
}

article date.dt-published {
  font-variant: small-caps;
  font-weight: 500;
}

.sidelong {
  float: right;
}

.sidelong a {
  color: inherit;
}

.flipped pre, .flipped code {
  background: #222;
}

html.flipped, mark {
  color: #AAA;
  background-color: black;
}

.flipped mark {
  color: #494949;
  background: white;
}

.flipped h1, .flipped h3, .flipped h4, .flipped h5, .flipped h6, .flipped th, .flipped thead, .flipped tfoot, .flipped hr:before {
  color: white;
}

.flipped h2 {
  color: #AAA;
}

.flipped a, .flipped a:active, .flipped a:visited, .flipped button {
  color: white;
  border-bottom-color: white;
}

.flipped header.root, .flipped footer.root {
  border-color: #AAA;
}

.flipped .raised {
  background-color: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 10em -0.5em rgba(255, 255, 255, 0.15);
}

.flipped button.flip {
  background: black;
}

button.flip {
  position: fixed;
  bottom: 0;
  left: 0;

  margin: 0.25em;
  padding: 0 0.2em;

  background: white;
  border: 1px solid;
  opacity: 0.75;

  font-size: 0.8em;
  font-variant: small-caps;
  font-weight: bold;
}