body {
  background-image: url("../progressive_hacker.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

main article {
  opacity: 0.8;
  background-color: color-mix(in srgb, white, black 10%);
}

.pageframe {
  position: absolute;
  width: 100%;
  display: block;
  top: 0;
  left: 0;
  min-height: 100vh;
}

main {
  display: flex;
  /* The following are for accessibility, following:
 https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-visual-presentation  */
  line-height: 1.7;
}

main article {
  width: calc(80ch + 20vw);
  max-width: 95vw;
  box-sizing: border-box;
  padding: 2em;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: justify;
}

article h1 {
  font-size: 200%;
}


/* Landing page layout modifications for common Desktop size. Here we afford a bit of manual styling */
@media (min-width: calc(150ch + 2em + 40ch)) and (min-height: 40em) {
  article .spacer-0 {
    display: block;
    min-height: 15em;
  }
}

.fullcenter {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.fullpage {
  min-height: 100vh;
}