@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Lato:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --font-lato: 'Lato', system-ui, sans-serif;
  --font-dm-sans: 'DM Sans', system-ui, sans-serif;

  --color-light-bg: #FFFFFE;
  --color-accent-light: #FFFBF3;
  --color-accent: #88191E;
  --color-font: #2A2A2A;
  --color-subtitle: #555555;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
} */

body {
  margin: 0;
  font-family: var(--font-dm-sans);
  line-height: 1.5;
  color: var(--color-font);
  background-color: var(--color-light-bg);
}

main {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1rem;
}

h1 { font-size: 3.4375em; line-height: 1.2; font-family: var(--font-lato); font-weight: 600;}
h2 { font-size: 2.8125em; line-height: 1.2; font-family: var(--font-lato); font-weight: 500;}
h3 { font-size: 2.125em; line-height: 1.2; font-family: var(--font-lato); font-weight: 500;}
h4 { font-size: 1.75em; line-height: 1.2; font-family: var(--font-lato); font-weight: 500;}
h5 { font-size: 1.4375em; line-height: 1.2; font-family: var(--font-lato); font-weight: 500;}
h6 { font-size: 1.125em; line-height: 1.2; font-family: var(--font-lato); font-weight: 500;}

p {
  margin: 1em 0;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
}

ul {
  margin: 1rem 0;
  padding-left: 2em;
}

li {
  margin: 0.5em 0;
}

.h1 { font-size: 3.4375em; line-height: 1.2; font-family: var(--font-lato); font-weight: 600;}
.h2 { font-size: 2.8125em; line-height: 1.2; font-family: var(--font-lato); font-weight: 500;}
.h3 { font-size: 2.125em; line-height: 1.2; font-family: var(--font-lato); font-weight: 500;}
.h4 { font-size: 1.75em; line-height: 1.2; font-family: var(--font-lato); font-weight: 500;}
.h5 { font-size: 1.4375em; line-height: 1.2; font-family: var(--font-lato); font-weight: 500;}
.h6 { font-size: 1.125em; line-height: 1.2; font-family: var(--font-lato); font-weight: 500;}

section {
  margin: 1em 0;
}

.c {
    padding: 2em 0;
}


/* Wizardry */

body {
    font-size: 1.1111111111111112vw;
   }
   /* Max Font Size */
   @media screen and (min-width:1720px) {
    body {font-size: 19.11111111111111px;}
   }
   /* Container Max Width */
   .c {
     max-width: 1720px;
   }
   /* Min Font Size */
   @media screen and (max-width:991px) {
    body {font-size: 11.011111111111111px;}
   }