/* ----- */
/* Imports */
/* ----- */
@import url(fonts.css);
@import url(text.css);
@import url(color-modes.css);
@import url(fun.css);

/* ----- */
/* Root parameters that other things point at when they need to*/
/* ----- */
:where(:root) {
  font-size: 6mm;
  hyphens: auto;
  font-family: bord, Georgia, "Times New Roman", Times, serif;
  margin: 0;
  padding: 0;
  /* high contrast color of the sky (fallback) */
  --color-sky-base: white;
  --color-sky-pale: white;
  --color-sky-deep: white;
  /* fallback high-contrast */
  --color-main-fill: white;
  --color-main-border: black;
  --color-main-ink: black;
  --color-main-faded: darkgray;
  --color-main-erased: gray;
  --color-main-accent: #414141;
}

/* Everything Else */
/* Make the entire page a big flexbox */
.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: baseline;
}
.left {
  flex-basis: 15%;
  flex-flow: column;
  text-align: right;
}
.span {
  text-align: center;
  flex-basis: 100%;
}
.right {
  flex-basis: 15%;
  flex-flow: column;
  text-align: left;
}

/* The footer is at the bottom */
footer {
  align-self: center;
  text-align: center;
  order: 99;
  background-color: var(--color-main-erased);
  color: var(--color-main-accent);
  padding: 1rem;
  margin: 0;
}

/* Trying to make the background look nice */
body {
  background: linear-gradient(
    var(--color-sky-deep),
    var(--color-sky-base),
    var(--color-sky-pale)
  );
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
article,
section {
  max-width: 900px;
}