@import url("../vendor/css/light.min.css");
@import url("../vendor/fontawesome/css/all.css");

@import "columns";
@import "new-media";

header > h1 {
  font-size: 2em;
}

body > h1:first-of-type {
  font-size: 1.75em;
}

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.25em;
}

h3,
h4,
h5,
h6 {
  font-size: 1em;
}

header h1 {
  margin-bottom: 0;
}

header h2 {
  margin-top: 0;
  color: var(--muted);
}

header nav {
  margin-bottom: 0.5rem;
}

header {
  background: var(--background-alt);
  border-bottom: 1px solid var(--border);
  padding: 2rem 1.5rem;

  /* This sets the right and left margins to cancel out the body's margins. It's width is still the same, but the background stretches across the page's width. */

  margin: -2rem calc(0px - (50vw - 50%)) 2rem;

  /* Shorthand for:
	margin-top: -2rem;
	margin-bottom: 2rem;
	margin-left: calc(0px - (50vw - 50%));
	margin-right: calc(0px - (50vw - 50%)); */

  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

header h1,
header h2,
header h3 {
  padding-bottom: 0;
  border-bottom: 0;
}

header > *:first-child {
  margin-top: 0;
  padding-top: 0;
}

header > *:last-child {
  margin-bottom: 0;
}

::-webkit-scrollbar {
  display: none;
}

body {
  -webkit-print-color-adjust: exact;
}