* {
  box-sizing: border-box;
}

:root {
  /* Colors (base) */
  --color-dark: #111;
  --color-white: #f0f0f0;

  /* Colors (accents) */
  --color-gray: #12121a;
  --color-pure-gray: #a0a0a0;
  --color-gray-accent: #222232;

  /* Paddings */
  --container-padding: 5vh 10vw;
  --container-padding-1000px: 5vh 20vw;

  /* Margins */
  --right-margin: 1em;

  /* Font Sizes */
  --normal-font-size: 14pt;
  --subtitle-font-size: calc(var(--normal-font-size) + 8pt);
  --article-font-size: calc(var(--normal-font-size) * 2);
  --title-font-size: calc(var(--normal-font-size) * 3);
}

html,
body {
  position: relative;
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: var(--color-gray); /* fixes the white-flash gap (doc 03) */
  color: var(--color-white);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.panel {
  /* Space */
  padding: var(--container-padding);

  background-color: var(--color-gray);
  color: var(--color-white);

  border-top: 0.2em solid var(--color-gray-accent);
  border-bottom: 0.2em solid var(--color-gray-accent);

  @media screen and (min-width: 1000px) {
    padding: var(--container-padding-1000px);
  }

  /* Classes */
  .title {
    margin-top: 0;
    margin-bottom: 8pt;
    font-size: var(--article-font-size);
  }

  .text {
    font-size: var(--normal-font-size);
    margin: 0 var(--right-margin);
  }
}

@media (min-width: 1000px) {
  .panel {
    padding: 5vh 20vw;
  }
}