:root {
  --black: #111111;
  --black-light: #252525;
  --white: #ffffff;
  --white-dark: #f0f0f0;
  --bg-color: #110025;
  --grey: #bfbfbf;
  --blue: #1a1d77;
  --blue-rgb: 26, 29, 119;
  --blue-dark: #babdcd;
}

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

body {
  background-image: url("./img/cluster-of-stars-1341279_small.jpg");
  background-position: center;
  background-color: var(--bg-color);

  font-size: 16px;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

a {
  color: var(--blue);
}

strong {
  font-weight: bold;
}

/******************************************************************************/
/* IDS */
/******************************************************************************/

#header-main {
  padding-top: 1em;
  margin-bottom: 2em;

  color: var(--white);

  text-align: center;
  font-size: 8px;
}
@media screen and (min-width: 500px) {
  #header-main {
    font-size: 12px;
  }
}
@media screen and (min-width: 600px) {
  #header-main {
    font-size: 16px;
  }
}
@media screen and (min-width: 800px) {
  #header-main {
    font-size: 18px;
  }
}
@media screen and (min-width: 1024px) {
  #header-main {
    font-size: 24px;
  }
}

#wrapper {
  margin: 0 auto;

  height: auto !important;
  height: 100%;
  min-height: 100%;
}

#content {
  margin: auto;
  padding: 0.5em 1em;

  max-width: 768px;

  background-color: var(--white-dark);
  color: var(--black);
}

#heading-introduction {
  text-align: center;
  font-size: 2em;

  text-shadow: 1px 1px 2px rgba(var(--blue-rgb), 0.75);
}

#introduction {
  padding: 0.5em;
}

#content p {
  margin-bottom: 1em;
  line-height: 1.25em;
}

#footer-main {
  margin-top: 2em;

  color: var(--white);

  text-align: center;
  line-height: 1.5em;
}

#footer-main {
  padding-bottom: 0.5em;
}

#footer-main a {
  color: var(--blue-dark);
}

/******************************************************************************/
/* CLASSES */
/******************************************************************************/

.font-serif {
  font-family: Georgia, serif;
}

.font-mono {
  font-family: "Lucida Console", Monaco, monospace, fixed;
}

.pop {
  font-size: 1.25em;
  font-weight: bold;
}

.logo-wrapper {
  margin: auto;
  height: 128px;
  width: 128px;
}
.logo-wrapper img {
  height: 100%;
  width: 100%;
}

.heading-copy {
  padding-top: 0.5em;
  padding-left: 0.5em;

  font-size: 1.25em;
  font-weight: bold;
}

.copy {
  padding: 0.5em;
}

.heading-list {
  padding-top: 0.5em;

  border-top: 1px solid var(--black);

  font-size: 1.25em;
  font-weight: bold;
  text-align: center;
}

.list {
  padding: 0.5em;

  list-style: disc;
  line-height: 1.25em;
}

.heading-list,
.list {
  margin: auto;
}
@media screen and (min-width: 500px) {
  .heading-list,
  .list {
    width: 50%;
  }
}

.note {
  padding: 1em;
  border: 1px solid var(--grey);
  font-style: italic;
}