:root {
  --quote-lh: 1.2em;
  --quote-margin: 2em;
  --quote-color: #000000bb;

  --box-max-horizontal: 80rem;
  --box-margin: 3em;
  --box-padding-horizontal: 1em;
  --box-padding-vertical: 4em;

  --motivational-spacing: 2.3em;
}

#content {
  width: 100%;
  height: auto;
}

#splash-img {
  width: 100%;
  display: block;
}

#quote {
  text-align: right;
  line-height: var(--quote-lh);
  font-size: x-large;

  color: var(--quote-color);

  margin-right: var(--quote-margin);
}

#citation {
  font-size: medium;
}

#motivational {
  margin-top: var(--motivational-spacing);

  font-size: xx-large;
  text-align: center;

  color: var(--quote-color);
}

.box {
  width: calc(100% - var(--box-margin) * 2);
  box-sizing: border-box;
  max-width: var(--box-max-horizontal);

  margin: var(--box-margin);
  padding: var(--box-padding-vertical) var(--box-padding-horizontal);
}

@media only screen and (max-width: 1000px) {
  .box {
    padding: calc(var(--box-padding-vertical) / 3) var(--box-padding-horizontal);
    margin: var(--box-margin) calc(var(--box-margin) / 3);
  }
}