/*
  Note from Carlos

  Yes, I know that including the entire stylesheet in the HTML file
  is overkill. It's just a demo.

*/

/*
  Load the font using the @font-face syntax.
*/
@font-face {
  font-family: 'Recursive';
  src: url('../fonts/Recursive_VF_1.078.woff2') format('woff2');
  font-weight: 300 1000;
  font-display: swap;
}


/**
 * CSS for Recursive Sans Linear Light
 * Generated by Wakamai Fondue - https://wakamaifondue.com
 * by Roel Nieskens/PixelAmbacht - https://pixelambacht.nl
 */

/* Set custom properties for each layout feature */
:root {
  --recursive-aalt: "aalt" off;
  --recursive-afrc: "afrc" off;
  --recursive-case: "case" off;
  --recursive-dlig: "dlig" off;
  --recursive-dnom: "dnom" off;
  --recursive-frac: "frac" off;
  --recursive-numr: "numr" off;
  --recursive-ordn: "ordn" off;
  --recursive-pnum: "pnum" off;
  --recursive-sinf: "sinf" off;
  --recursive-ss01: "ss01" off;
  --recursive-ss02: "ss02" off;
  --recursive-ss03: "ss03" off;
  --recursive-ss04: "ss04" off;
  --recursive-ss05: "ss05" off;
  --recursive-ss06: "ss06" off;
  --recursive-ss07: "ss07" off;
  --recursive-ss08: "ss08" off;
  --recursive-ss09: "ss09" off;
  --recursive-ss10: "ss10" off;
  --recursive-ss11: "ss11" off;
  --recursive-ss12: "ss12" off;
  --recursive-ss20: "ss20" off;
  --recursive-sups: "sups" off;
  --recursive-titl: "titl" off;
  --recursive-zero: "zero" off;
}

/* If class is applied, update custom property and
 apply modern font-variant-* when supported */
.recursive-aalt {
  --recursive-aalt: "aalt" on;
}

.recursive-afrc {
  --recursive-afrc: "afrc" on;
}

@supports (font-variant-numeric: stacked-fractions) {
  .recursive-afrc {
      --recursive-afrc: "____";
      font-variant-numeric: stacked-fractions;
  }
}

.recursive-case {
  --recursive-case: "case" on;
}

.recursive-dlig {
  --recursive-dlig: "dlig" on;
}

@supports (font-variant-ligatures: discretionary-ligatures) {
  .recursive-dlig {
      --recursive-dlig: "____";
      font-variant-ligatures: discretionary-ligatures;
  }
}

.recursive-dnom {
  --recursive-dnom: "dnom" on;
}

.recursive-frac {
  --recursive-frac: "frac" on;
}

@supports (font-variant-numeric: diagonal-fractions) {
  .recursive-frac {
      --recursive-frac: "____";
      font-variant-numeric: diagonal-fractions;
  }
}

.recursive-numr {
  --recursive-numr: "numr" on;
}

.recursive-ordn {
  --recursive-ordn: "ordn" on;
}

@supports (font-variant-numeric: ordinal) {
  .recursive-ordn {
      --recursive-ordn: "____";
      font-variant-numeric: ordinal;
  }
}

.recursive-pnum {
  --recursive-pnum: "pnum" on;
}

@supports (font-variant-numeric: proportional-nums) {
  .recursive-pnum {
      --recursive-pnum: "____";
      font-variant-numeric: proportional-nums;
  }
}

.recursive-sinf {
  --recursive-sinf: "sinf" on;
}

.recursive-ss01 {
  --recursive-ss01: "ss01" on;
}

.recursive-ss02 {
  --recursive-ss02: "ss02" on;
}

.recursive-ss03 {
  --recursive-ss03: "ss03" on;
}

.recursive-ss04 {
  --recursive-ss04: "ss04" on;
}

.recursive-ss05 {
  --recursive-ss05: "ss05" on;
}

.recursive-ss06 {
  --recursive-ss06: "ss06" on;
}

.recursive-ss07 {
  --recursive-ss07: "ss07" on;
}

.recursive-ss08 {
  --recursive-ss08: "ss08" on;
}

.recursive-ss09 {
  --recursive-ss09: "ss09" on;
}

.recursive-ss10 {
  --recursive-ss10: "ss10" on;
}

.recursive-ss11 {
  --recursive-ss11: "ss11" on;
}

.recursive-ss12 {
  --recursive-ss12: "ss12" on;
}

.recursive-ss20 {
  --recursive-ss20: "ss20" on;
}

.recursive-sups {
  --recursive-sups: "sups" on;
}

@supports (font-variant-position: super) {
  .recursive-sups {
      --recursive-sups: "____";
      font-variant-position: super;
  }
}

.recursive-titl {
  --recursive-titl: "titl" on;
}

@supports (font-variant-caps: titling-caps) {
  .recursive-titl {
      --recursive-titl: "____";
      font-variant-caps: titling-caps;
  }
}

.recursive-zero {
  --recursive-zero: "zero" on;
}

@supports (font-variant-numeric: slashed-zero) {
  .recursive-zero {
      --recursive-zero: "____";
      font-variant-numeric: slashed-zero;
  }
}

/* Apply current state of all custom properties
 whenever a class is being applied */
.recursive-aalt,
.recursive-afrc,
.recursive-case,
.recursive-dlig,
.recursive-dnom,
.recursive-frac,
.recursive-numr,
.recursive-ordn,
.recursive-pnum,
.recursive-sinf,
.recursive-ss01,
.recursive-ss02,
.recursive-ss03,
.recursive-ss04,
.recursive-ss05,
.recursive-ss06,
.recursive-ss07,
.recursive-ss08,
.recursive-ss09,
.recursive-ss10,
.recursive-ss11,
.recursive-ss12,
.recursive-ss20,
.recursive-sups,
.recursive-titl,
.recursive-zero {
  font-feature-settings: var(--recursive-aalt), var(--recursive-afrc), var(--recursive-case), var(--recursive-dlig), var(--recursive-dnom), var(--recursive-frac), var(--recursive-numr), var(--recursive-ordn), var(--recursive-pnum), var(--recursive-sinf), var(--recursive-ss01), var(--recursive-ss02), var(--recursive-ss03), var(--recursive-ss04), var(--recursive-ss05), var(--recursive-ss06), var(--recursive-ss07), var(--recursive-ss08), var(--recursive-ss09), var(--recursive-ss10), var(--recursive-ss11), var(--recursive-ss12), var(--recursive-ss20), var(--recursive-sups), var(--recursive-titl), var(--recursive-zero);
}

/* Variable instances */
.recursive-mono-linear-light {
  font-variation-settings: "MONO" 1, "CASL" 0, "wght" 300, "slnt" 0, "CRSV" 0.5;
}

.recursive-mono-linear-light-italic {
  font-variation-settings: "MONO" 1, "CASL" 0, "wght" 300, "slnt" -15, "CRSV" 1;
}

.recursive-mono-casual-light {
  font-variation-settings: "MONO" 1, "CASL" 1, "wght" 300, "slnt" 0, "CRSV" 0.5;
}

.recursive-mono-casual-light-italic {
  font-variation-settings: "MONO" 1, "CASL" 1, "wght" 300, "slnt" -15, "CRSV" 1;
}

.recursive-mono-linear {
  font-variation-settings: "MONO" 1, "CASL" 0, "wght" 400, "slnt" 0, "CRSV" 0.5;
}

.recursive-mono-linear-italic {
  font-variation-settings: "MONO" 1, "CASL" 0, "wght" 400, "slnt" -15, "CRSV" 1;
}

.recursive-mono-casual {
  font-variation-settings: "MONO" 1, "CASL" 1, "wght" 400, "slnt" 0, "CRSV" 0.5;
}

.recursive-mono-casual-italic {
  font-variation-settings: "MONO" 1, "CASL" 1, "wght" 400, "slnt" -15, "CRSV" 1;
}

.recursive-mono-linear-medium {
  font-variation-settings: "MONO" 1, "CASL" 0, "wght" 500, "slnt" 0, "CRSV" 0.5;
}

.recursive-mono-linear-medium-italic {
  font-variation-settings: "MONO" 1, "CASL" 0, "wght" 500, "slnt" -15, "CRSV" 1;
}

.recursive-mono-casual-medium {
  font-variation-settings: "MONO" 1, "CASL" 1, "wght" 500, "slnt" 0, "CRSV" 0.5;
}

.recursive-mono-casual-medium-italic {
  font-variation-settings: "MONO" 1, "CASL" 1, "wght" 500, "slnt" -15, "CRSV" 1;
}

.recursive-mono-linear-semibold {
  font-variation-settings: "MONO" 1, "CASL" 0, "wght" 600, "slnt" 0, "CRSV" 0.5;
}

.recursive-mono-linear-semibold-italic {
  font-variation-settings: "MONO" 1, "CASL" 0, "wght" 600, "slnt" -15, "CRSV" 1;
}

.recursive-mono-casual-semibold {
  font-variation-settings: "MONO" 1, "CASL" 1, "wght" 600, "slnt" 0, "CRSV" 0.5;
}

.recursive-mono-casual-semibold-italic {
  font-variation-settings: "MONO" 1, "CASL" 1, "wght" 600, "slnt" -15, "CRSV" 1;
}

.recursive-mono-linear-bold {
  font-variation-settings: "MONO" 1, "CASL" 0, "wght" 700, "slnt" 0, "CRSV" 0.5;
}

.recursive-mono-linear-bold-italic {
  font-variation-settings: "MONO" 1, "CASL" 0, "wght" 700, "slnt" -15, "CRSV" 1;
}

.recursive-mono-casual-bold {
  font-variation-settings: "MONO" 1, "CASL" 1, "wght" 700, "slnt" 0, "CRSV" 0.5;
}

.recursive-mono-casual-bold-italic {
  font-variation-settings: "MONO" 1, "CASL" 1, "wght" 700, "slnt" -15, "CRSV" 1;
}

.recursive-mono-linear-extrabold {
  font-variation-settings: "MONO" 1, "CASL" 0, "wght" 800, "slnt" 0, "CRSV" 0.5;
}

.recursive-mono-linear-extrabold-italic {
  font-variation-settings: "MONO" 1, "CASL" 0, "wght" 800, "slnt" -15, "CRSV" 1;
}

.recursive-mono-casual-extrabold {
  font-variation-settings: "MONO" 1, "CASL" 1, "wght" 800, "slnt" 0, "CRSV" 0.5;
}

.recursive-mono-casual-extrabold-italic {
  font-variation-settings: "MONO" 1, "CASL" 1, "wght" 800, "slnt" -15, "CRSV" 1;
}

.recursive-mono-linear-black {
  font-variation-settings: "MONO" 1, "CASL" 0, "wght" 900, "slnt" 0, "CRSV" 0.5;
}

.recursive-mono-linear-black-italic {
  font-variation-settings: "MONO" 1, "CASL" 0, "wght" 900, "slnt" -15, "CRSV" 1;
}

.recursive-mono-casual-black {
  font-variation-settings: "MONO" 1, "CASL" 1, "wght" 900, "slnt" 0, "CRSV" 0.5;
}

.recursive-mono-casual-black-italic {
  font-variation-settings: "MONO" 1, "CASL" 1, "wght" 900, "slnt" -15, "CRSV" 1;
}

.recursive-mono-linear-extrablack {
  font-variation-settings: "MONO" 1, "CASL" 0, "wght" 1000, "slnt" 0, "CRSV" 0.5;
}

.recursive-mono-linear-extrablack-italic {
  font-variation-settings: "MONO" 1, "CASL" 0, "wght" 1000, "slnt" -15, "CRSV" 1;
}

.recursive-mono-casual-extrablack {
  font-variation-settings: "MONO" 1, "CASL" 1, "wght" 1000, "slnt" 0, "CRSV" 0.5;
}

.recursive-mono-casual-extrablack-italic {
  font-variation-settings: "MONO" 1, "CASL" 1, "wght" 1000, "slnt" -15, "CRSV" 1;
}

.recursive {
  font-variation-settings: "MONO" 0, "CASL" 0, "wght" 300, "slnt" 0, "CRSV" 0.5;
}

.recursive-italic {
  font-variation-settings: "MONO" 0, "CASL" 0, "wght" 300, "slnt" -15, "CRSV" 1;
}

.recursive-sans-casual-light {
  font-variation-settings: "MONO" 0, "CASL" 1, "wght" 300, "slnt" 0, "CRSV" 0.5;
}

.recursive-sans-casual-light-italic {
  font-variation-settings: "MONO" 0, "CASL" 1, "wght" 300, "slnt" -15, "CRSV" 1;
}

.recursive-sans-linear {
  font-variation-settings: "MONO" 0, "CASL" 0, "wght" 400, "slnt" 0, "CRSV" 0.5;
}

.recursive-sans-linear-italic {
  font-variation-settings: "MONO" 0, "CASL" 0, "wght" 400, "slnt" -15, "CRSV" 1;
}

.recursive-sans-casual {
  font-variation-settings: "MONO" 0, "CASL" 1, "wght" 400, "slnt" 0, "CRSV" 0.5;
}

.recursive-sans-casual-italic {
  font-variation-settings: "MONO" 0, "CASL" 1, "wght" 400, "slnt" -15, "CRSV" 1;
}

.recursive-sans-linear-medium {
  font-variation-settings: "MONO" 0, "CASL" 0, "wght" 500, "slnt" 0, "CRSV" 0.5;
}

.recursive-sans-linear-medium-italic {
  font-variation-settings: "MONO" 0, "CASL" 0, "wght" 500, "slnt" -15, "CRSV" 1;
}

.recursive-sans-casual-medium {
  font-variation-settings: "MONO" 0, "CASL" 1, "wght" 500, "slnt" 0, "CRSV" 0.5;
}

.recursive-sans-casual-medium-italic {
  font-variation-settings: "MONO" 0, "CASL" 1, "wght" 500, "slnt" -15, "CRSV" 1;
}

.recursive-sans-linear-semibold {
  font-variation-settings: "MONO" 0, "CASL" 0, "wght" 600, "slnt" 0, "CRSV" 0.5;
}

.recursive-sans-linear-semibold-italic {
  font-variation-settings: "MONO" 0, "CASL" 0, "wght" 600, "slnt" -15, "CRSV" 1;
}

.recursive-sans-casual-semibold {
  font-variation-settings: "MONO" 0, "CASL" 1, "wght" 600, "slnt" 0, "CRSV" 0.5;
}

.recursive-sans-casual-semibold-italic {
  font-variation-settings: "MONO" 0, "CASL" 1, "wght" 600, "slnt" -15, "CRSV" 1;
}

.recursive-sans-linear-bold {
  font-variation-settings: "MONO" 0, "CASL" 0, "wght" 700, "slnt" 0, "CRSV" 0.5;
}

.recursive-sans-linear-bold-italic {
  font-variation-settings: "MONO" 0, "CASL" 0, "wght" 700, "slnt" -15, "CRSV" 1;
}

.recursive-sans-casual-bold {
  font-variation-settings: "MONO" 0, "CASL" 1, "wght" 700, "slnt" 0, "CRSV" 0.5;
}

.recursive-sans-casual-bold-italic {
  font-variation-settings: "MONO" 0, "CASL" 1, "wght" 700, "slnt" -15, "CRSV" 1;
}

.recursive-sans-linear-extrabold {
  font-variation-settings: "MONO" 0, "CASL" 0, "wght" 800, "slnt" 0, "CRSV" 0.5;
}

.recursive-sans-linear-extrabold-italic {
  font-variation-settings: "MONO" 0, "CASL" 0, "wght" 800, "slnt" -15, "CRSV" 1;
}

.recursive-sans-casual-extrabold {
  font-variation-settings: "MONO" 0, "CASL" 1, "wght" 800, "slnt" 0, "CRSV" 0.5;
}

.recursive-sans-casual-extrabold-italic {
  font-variation-settings: "MONO" 0, "CASL" 1, "wght" 800, "slnt" -15, "CRSV" 1;
}

.recursive-sans-linear-black {
  font-variation-settings: "MONO" 0, "CASL" 0, "wght" 900, "slnt" 0, "CRSV" 0.5;
}

.recursive-sans-linear-black-italic {
  font-variation-settings: "MONO" 0, "CASL" 0, "wght" 900, "slnt" -15, "CRSV" 1;
}

.recursive-sans-casual-black {
  font-variation-settings: "MONO" 0, "CASL" 1, "wght" 900, "slnt" 0, "CRSV" 0.5;
}

.recursive-sans-casual-black-italic {
  font-variation-settings: "MONO" 0, "CASL" 1, "wght" 900, "slnt" -15, "CRSV" 1;
}

.recursive-sans-linear-extrablack {
  font-variation-settings: "MONO" 0, "CASL" 0, "wght" 1000, "slnt" 0, "CRSV" 0.5;
}

.recursive-sans-linear-extrablack-italic {
  font-variation-settings: "MONO" 0, "CASL" 0, "wght" 1000, "slnt" -15, "CRSV" 1;
}

.recursive-sans-casual-extrablack {
  font-variation-settings: "MONO" 0, "CASL" 1, "wght" 1000, "slnt" 0, "CRSV" 0.5;
}

.recursive-sans-casual-extrablack-italic {
  font-variation-settings: "MONO" 0, "CASL" 1, "wght" 1000, "slnt" -15, "CRSV" 1;
}

/*
  Non-layout styles
*/

body {
  font-family: "Recursive", sans-serif;
  line-height: 1.35;
}

.Glossary {
  margin: 0 auto;
  width: 60vw;
}

h2 {
  color: rebeccapurple;
  font-weight: 700;
}

section {
  margin-bottom: 4em;
}

div {
  padding: 2rem;
  height: auto;
}

img {
  max-width: 50%;
  margin: 0 auto;
}