:root {
  --prime-1: hsl(209, 100%, 90%);
  --prime-2: hsl(209, 100%, 80%);
  --prime-3: hsl(209, 100%, 70%);
  --prime-4: hsl(209, 100%, 60%);
  --prime-5: hsl(209, 100%, 50%);

  --main-1: hsl( 0, 0%, 100%);
  --main-2: hsl( 0, 0%, 95%);
  --main-3: hsl( 0, 0%, 50%);
  --main-4: hsl( 0, 0%, 15%);
  --main-5: hsl( 0, 0%, 0%);

  --font-body:     Bitter, serif;
  --font-standard: Bitter, serif;
  --font-headline: Bitter, serif;

  --space-base: .25rem;
  --space-ratio: 2.3;

  --text-hero-l: 3vw;
}

.text-sans, h1, *[class^="hero"] { font-family: Montserrat, sans-serif; }

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat-regular-webfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat-bold-webfont.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Bitter';
  src: url('/fonts/bitter-regular-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Bitter';
  src: url('/fonts/bitter-italic-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Bitter';
  src: url('/fonts/bitter-bold-webfont.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Bitter';
  src: url('/fonts/bitter-bolditalic-webfont.woff2') format('woff2');
  font-weight: bold;
  font-style: italic;
}

.article h2:not(:first-child) { margin-top: var(--space-m) }
.article h3:not(:first-child) { margin-top: var(--space-m) }

/* Real inverted in inverted */
.ig-inverted, .ig-inverted * {
  background-color: var(--color-main-5);
  color: var(--color-main-1)
}

html[data-theme="dark"] {

  --color-main-1: var(--main-5);
  --color-main-2: var(--main-4);
  --color-main-4: var(--main-2);
  --color-main-5: var(--main-1);

  --color-prime-1: var(--prime-5);
  --color-prime-2: var(--prime-4);
  --color-prime-4: var(--prime-2);
  --color-prime-5: var(--prime-1);

  background-color: var(--color-main-1);

}

html[data-theme="dark"] .ig-logo {
  mix-blend-mode: lighten;
  -webkit-filter: invert(1);
  filter: invert(1)
}


.min-height-full {
  min-height: 100vh;
  /* min-height: -moz-available; */
  min-height: -webkit-fill-available;
  min-height: fill-available;
}

.ig-wrapper {
  padding-left:  var(--space-l);
  padding-right: var(--space-l);
  transition: padding .5s;
}

.ig-wrapper- {
  margin-left:  calc(-1 * var(--space-l));
  margin-right: calc(-1 * var(--space-l));
}


@media (max-width: 640px) {
  .ig-wrapper {
    padding-left:  var(--space-s);
    padding-right: var(--space-s);
  }
  .ig-wrapper- {
    margin-left:  calc(-1 * var(--space-s));
    margin-right: calc(-1 * var(--space-s));
  }
}


/* fix embedded videos in articles */
.article figure iframe { width: 100% }
.article img { border: 0 }
.article p { line-height: 1.6; font-size: 1.1rem; }
.article a { text-decoration: none  }