@font-face {
  font-family: "Quantico";
  src: url(/fonts/Quantico-subset.woff2) format('woff2');
  font-display: swap;
} 

@font-face {
  font-family: "Yrsa";
  src: url(/fonts/Yrsa-subset.woff2) format('woff2');
  font-display: swap;
} 

html {
  --color-primary: hsl(0, 0%, 100%);
  --color-secondary: hsl(0, 0%, 0%);

  --color-tertiary-hue: 240;
  --color-tertiary-saturation: 75%;
  --color-tertiary-lightness: 15%;
  --color-tertiary: hsl(var(--color-tertiary-hue), var(--color-tertiary-saturation), var(--color-tertiary-lightness));
  --color-tertiary-80: hsl(var(--color-tertiary-hue), calc(var(--color-tertiary-saturation) - 20%), calc(var(--color-tertiary-lightness) + 20%));
  --color-tertiary-60: hsl(var(--color-tertiary-hue), calc(var(--color-tertiary-saturation) - 40%), calc(var(--color-tertiary-lightness) + 40%));
  --color-tertiary-40: hsl(var(--color-tertiary-hue), calc(var(--color-tertiary-saturation) - 60%), calc(var(--color-tertiary-lightness) + 60%));
  --color-tertiary-20: hsl(var(--color-tertiary-hue), calc(var(--color-tertiary-saturation) - 80%), calc(var(--color-tertiary-lightness) + 80%));

  --color-quaternary-hue: 185;
  --color-quaternary-saturation: 55%;
  --color-quaternary-lightness: 60%;
  --color-quaternary: hsl(var(--color-quaternary-hue), var(--color-quaternary-saturation), var(--color-quaternary-lightness));
  --color-quaternary-80: hsl(var(--color-quaternary-hue), calc(var(--color-quaternary-saturation) - 20%), calc(var(--color-quaternary-lightness) + 20%));
  --color-quaternary-60: hsl(var(--color-quaternary-hue), calc(var(--color-quaternary-saturation) - 40%), calc(var(--color-quaternary-lightness) + 40%));
  --color-quaternary-40: hsl(var(--color-quaternary-hue), calc(var(--color-quaternary-saturation) - 60%), calc(var(--color-quaternary-lightness) + 60%));
  --color-quaternary-20: hsl(var(--color-quaternary-hue), calc(var(--color-quaternary-saturation) - 80%), calc(var(--color-quaternary-lightness) + 80%));

  --color-quinary-hue: 40;
  --color-quinary-saturation: 100%;
  --color-quinary-lightness: 55%;
  --color-quinary: hsl(var(--color-quinary-hue), var(--color-quinary-saturation), var(--color-quinary-lightness));
  --color-quinary-80: hsl(var(--color-quinary-hue), calc(var(--color-quinary-saturation) - 20%), calc(var(--color-quinary-lightness) + 20%));
  --color-quinary-60: hsl(var(--color-quinary-hue), calc(var(--color-quinary-saturation) - 40%), calc(var(--color-quinary-lightness) + 40%));
  --color-quinary-40: hsl(var(--color-quinary-hue), calc(var(--color-quinary-saturation) - 60%), calc(var(--color-quinary-lightness) + 60%));
  --color-quinary-20: hsl(var(--color-quinary-hue), calc(var(--color-quinary-saturation) - 80%), calc(var(--color-quinary-lightness) + 80%));

  --color-senary-hue: 10;
  --color-senary-saturation: 95%;
  --color-senary-lightness: 70%;
  --color-senary: hsl(var(--color-senary-hue), var(--color-senary-saturation), var(--color-senary-lightness));
  --color-senary-80: hsl(var(--color-senary-hue), calc(var(--color-senary-saturation) - 20%), calc(var(--color-senary-lightness) + 20%));
  --color-senary-60: hsl(var(--color-senary-hue), calc(var(--color-senary-saturation) - 40%), calc(var(--color-senary-lightness) + 40%));
  --color-senary-40: hsl(var(--color-senary-hue), calc(var(--color-senary-saturation) - 60%), calc(var(--color-senary-lightness) + 60%));
  --color-senary-20: hsl(var(--color-senary-hue), calc(var(--color-senary-saturation) - 80%), calc(var(--color-senary-lightness) + 80%));

  --color-septenary-hue: 39;
  --color-septenary-saturation: 9%; 
  --color-septenary-lightness: 35%;
  --color-septenary: hsl(var(--color-septenary-hue), var(--color-septenary-saturation), var(--color-septenary-lightness)); /* #625c51 */
  --color-septenary-80: hsl(var(--color-septenary-hue), var(--color-septenary-saturation), calc(var(--color-septenary-lightness) + 20%)); /* #c0beb9 */
  --color-septenary-60: hsl(var(--color-septenary-hue), var(--color-septenary-saturation), calc(var(--color-septenary-lightness) + 40%)); /* #e0dedc */
  --color-septenary-40: hsl(var(--color-septenary-hue), var(--color-septenary-saturation), calc(var(--color-septenary-lightness) + 55%)); /* #f9f8f8 */

  /* font colors */
  --color-blockquotes:hsl(39, 9%, 35%);
  --font-color: hsl(0, 0%, 0%);


  /* Visual Thinking: Fonts,*/
  --font-family-primary: "Quantico", sans-serif;
  --font-family-secondary: "Yrsa", serif;

  /* fonts */
  font-size: 1.25rem;
  --font-size-secondary: 1.7rem;

  /* screen sizes */
  --screen-dimension-xs: 320px;
  --screen-dimension-s: 768px;
  --screen-dimension-m: 1024px;
  --screen-dimension-l: 1440px;
  --screen-dimension-xl: 2560px;

  /* grid-size */

  --text-max-width: 60ch;
  --grid-max-width: 60rem;

  /* focus styles */
  --focus-outline: 4px solid var(--color-quaternary);
  --focus-offset: 0.3rem;}


* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: var(--font-family-secondary);
  container-type: inline-size;
}

h1,
h2,
h3,
legend {
  font-family: var(--font-family-primary);
  font-weight: bold;
}

h1 {
  font-size: 3.157rem;
  color: var(--color-tertiary);
  text-wrap:balance;
}

h2 {
  font-size: 2.369rem;
}

h3 {
  font-size: 1.0777rem;
}

legend {
  font-size: 1.2rem
}

p {
  font-family: var(--font-family-secondary);
  line-height: 1.5;
}

a {
  color: var(--color-tertiary-80);
  text-decoration: none;
  margin-bottom: 0.25rem;
}

a:hover, a:focus-visible {
  text-decoration: underline;
}

img {
  max-width: 100%;
}

ul {
  align-self: flex-start;
  scrollbar-width: none;
}

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

blockquote {
  font-weight: 800;
  font-family: var(--font-family-primary);
  font-size: 1.2rem;
  line-height: 1.5;
  position: relative;
  color: var(--color-septenary);
}

blockquote::before,
blockquote::after {
  position: absolute;
  color: var(--color-quinary);
  font-size: 6rem;
  width: 4rem;
  height: 4rem;
}

blockquote::before {
  content: "“";
  left: -5rem;
  top: -3rem;
}

blockquote::after {
  content: "”";
  right: -5rem;
  bottom: -0.4rem;
}

main {
  position: relative;
  padding: 0 1rem;
}

.intro p {
  /max-width:52ch;
}

.minicursus-quotes {
  font-weight: 800;
  font-family: var(--font-family-primary);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--color-septenary);
}

.link {
  text-decoration: underline;
  text-decoration-color: var(--color-tertiary);
}

/* Sticky footer */
body > div {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

/* PDF button methods header */
.vt-standard-button {
  color: var(--color-primary);
  font-family: var(--font-family-primary);
  background-color: var(--color-tertiary);
  padding: 0.5rem 0.5rem;
  border-radius: 2rem;
  font-size: 1rem;
  margin: 0;
}

:hover.vt-standard-button {
  color: var(--color-tertiary);
  background-color: rgb(188, 188, 188);
}

/* a11y */
.screenreader-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

/* rich text data styling*/
.rich-text img {
  height: auto;
}

/* svg icons */
svg.icon {
  margin-right: 0.25rem;
}
svg.icon path {
  fill: var(--color-tertiary);
}
svg.icon path.background {
  fill: var(--color-septenary-60);
}

/* MARK: Hexagon stuff (work in progress) */
.hexagons section {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hexagons h1 {
  max-width: 24rem;
}
.hexagons p {
  text-align: center;
}

@media (width > 70rem) {
  .hexagons section {
    margin-top:-26rem;
  }

  .hexagons p {
    max-width: 26ch;
  }
}

@media (width < 44rem) {
  /* Fix for horizontal scrolling on mobile */
  html,
  body {
    overflow-x: hidden;
  }

  body {
    width: 100%;
  }

  /* Utility class for hiding elements on mobile */
  .hide-on-mobile {
    display: none !important;
  }
}