:root {
  --dark: rgba(0, 0, 0, 0.93);
  --iron59: #ff00ff;
  --slogan: #8400ff;
  --light: #f2f2f2;
  --grey: #808080;
}

@supports (color: color(display-p3 1 1 1 / 1)) {
  :root {
    --dark: color(display-p3 0.03 0.03 0.03 / 0.95);
    --iron59: color(display-p3 1 0 1 / 1);
    --slogan: color(display-p3 0.47 0 1 / 1);
    --light: color(display-p3 0.95 0.95 0.95);
    --grey: color(display-p3 0.7 0.7 0.7);
  }
}

header {
  background: var(--dark);
  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.5);
  padding: 3em 0;
  display: flex;
  align-items: center;
  /* flex-direction: column; */
  /* text-align: center; */
  justify-content: center;
}

header span {
  display: none;
}

header #logo {
  position: relative;
  width: 15.5em;
  padding: 1em 0 0;
}

header #header-text {
  padding: 0 2em;
  margin: 1em 0.5em 0em 0.5em;
}

header h1 {
  color: var(--light);
  padding: 0.5em 0 0;
  margin: 0 0 -0.5em;
}

header h1 a {
  color: var(--light);
  text-decoration: none;
}

header p {
  color: var(--grey);
}

@media screen and (max-width: 700px) {
  header #logo {
    width: 7.75em;
    padding: 0 0 0 1em;
  }

  header #header-text {
    padding: 0 1em;
    margin: 0.5em 0.25em 0em 0.25em;
  }

  header h1 {
    padding: 0;
    margin: 0 0 -0.25em;
    font-size: 1.5rem;
  }

  header p {
    margin: 0;
    padding: 0;
    font-size: 1rem;
  }
}