:root {
  font-size: 16px;
  --text-2xs: 0.625rem; /*    10 px */
  --text-xs: 0.75rem; /*      12 px */
  --text-sm: 0.875rem; /*     14 px */
  --text-base: 1rem; /*       16 px */
  --text-lg: 1.125rem; /*     18 px */
  --text-xl: 1.25rem; /*      20 px */
  --text-2xl: 1.5rem; /*      24 px */
  --text-3xl: 1.875rem; /*    30 px */
  --text-4xl: 2.25rem; /*     36 px */
  --text-5xl: 3rem; /*        48 px */
  --text-6xl: 3.75rem; /*     60 px */

  --font-sans: 'DM Sans', sans-serif;
  --font-serif: 'Tropiline', serif;

  --font-weight-thinner: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --primary-hue: 188;
  --secondary-hue: 160;
  --tertiary-hue: 43;
  --accent-hue: 13;
  --error-hue: 329;
  --site-bg-hue: 158;
  --error-bg-hue: 338;

  --color-primary-light: hsl(var(--primary-hue), 12%, 58%);
  --color-primary: hsl(var(--primary-hue), 100%, 18%);
  --color-primary-dark: hsl(var(--primary-hue), 100%, 10%);
  --color-secondary-light: hsl(161, 100%, 95%);
  --color-secondary-bright: hsl(var(--secondary-hue), 100%, 61%);
  --color-secondary: hsl(var(--secondary-hue), 100%, 84%);
  --color-secondary-dark: hsl(166, 36%, 62%);
  --color-tertiary-light: hsl(var(--tertiary-hue), 100%, 93%);
  --color-tertiary: hsl(var(--tertiary-hue), 100%, 57%);
  --color-helper: hsl(var(--primary-hue), 12%, 48%);

  --color-accent: hsl(var(--accent-hue), 100%, 58%);
  /* TODO: this colour might need to be changed */
  --color-light-border: hsl(185, 52%, 30%);

  --color-error-light: hsl(var(--error-hue), 82%, 95%);
  --color-error-bg: hsl(var(--error-bg-hue), 100%, 57%);

  /* TODO These could be part of a named scale? */
  --color-hairline: hsl(160, 20%, 87%);
  --color-input: hsl(var(--site-bg-hue), 27%, 94%);

  --color-site-bg: hsl(var(--site-bg-hue), 16%, 98%);

  --color-gray-10: hsl(220, 30%, 96%);
  --color-gray-20: hsl(213, 15%, 88%);
  --color-gray-30: hsl(210, 11%, 78%);
  --color-gray-40: hsl(210, 8%, 66%);
  --color-gray-50: hsl(216, 7%, 56%);
  --color-gray-60: hsl(210, 6%, 44%);
  --color-gray-70: hsl(207, 7%, 32%);
  --color-gray-80: hsl(207, 10%, 23%);
  --color-gray-90: hsl(200, 12%, 15%);
  --color-gray-100: hsl(206, 16%, 8%);

  --color-white: hsl(0, 0%, 100%);

  --color-bg-light: hsl(60, 11%, 98%);
  --color-bg-gray: hsl(0, 0%, 93%);
  --color-bg-off-white: hsl(0, 23%, 94%);

  --color-text: var(--color-gray-70);

  /* Spacing */
  --padding-medium: 1em;

  /* Border radius */
  --rounded-none: 0px;
  --rounded-xs: 2px;
  --rounded-sm: 4px;
  --rounded-md: 8px;
  --rounded-lg: 16px;
  --rounded-xl: 100px;

  /* Shadow */
  --shadow-none: none;
  --shadow-xs: 0px 1px 1px hsla(0, 0%, 0%, 0.17);
  --shadow-sm: 0px 2px 4px hsla(0, 0%, 0%, 0.16);
  --shadow-md: 0px 2px 8px hsla(0, 0%, 0%, 0.16);
  --shadow-lg: 0px 4px 16px hsla(0, 0%, 0%, 0.16);

  --section-padding: 1rem;
  --section-max-width: calc(1400px - var(--section-padding) * 2);

  /* These are used if you want to break out out of the main section's padding */
  --grid-override-x: calc(-50vw + 50%);
  --grid-override-y: calc(var(--section-padding) * -1);
  --grid-override: var(--grid-override-y) var(--grid-override-x);
}

@font-face {
  font-family: 'Tropiline';
  font-weight: 700;
  font-display: swap;

  src: local('Tropiline Bold'), local('Tropiline-Bold'),
    url('./fonts/Tropiline-Bold.woff2') format('woff2'),
    url('./fonts/Tropiline-Bold.woff') format('woff'),
    url('./fonts/Tropiline-Bold.otf') format('opentype');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('DM Sans Regular'), local('DM Sans-Regular'),
    url('./fonts/dm-sans-v11-latin-regular.woff2') format('woff2'),
    url('./fonts/dm-sans-v11-latin-regular.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('DM Sans Bold'), local('DM Sans-Bold'),
    url('./fonts/dm-sans-v11-latin-700.woff2') format('woff2'),
    url('./fonts/dm-sans-v11-latin-700.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
  flex-grow: 0;
  flex-shrink: 0;
  margin: 0;
  box-sizing: border-box;
}

button {
  display: block;
  padding: 0;
  font-size: inherit;
  background-color: inherit;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

body {
  color: var(--color-primary);
  background-color: var(--color-site-bg);
  font-family: var(--font-sans);
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

a {
  color: inherit;
  text-decoration: inherit;
}

ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.4;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

h1 {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
}

h2 {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
}

h3 {
  font-size: var(--text-xl);
}

h4 {
  font-size: var(--text-lg);
}

h5 {
  font-size: var(--text-base);
}

h6 {
  font-size: var(--text-sm);
}

main p {
  font-size: var(--body-text, var(--text-sm));
  font-weight: var(--font-weight-regular);
  color: var(--color-primary);
  line-height: 1.4;
}

small {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-regular);
}

input {
  font-family: inherit;
  font-size: var(--text-base);
}

input[type='search'] {
  background-color: var(--color-bg-light);
  border: 0;
}

.scrollbar-hide {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}
.scrollbar-hide::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.html a {
  text-decoration: underline;
}

.html p {
  margin-bottom: 1rem;
}

.html h2 {
  font-size: var(--text-lg);
}

.html ul {
  list-style-type: none;
}

.html li {
  margin-top: 0.5rem;
  list-style: none;
}
/* Needed for Safari */
.html li::before {
  content: '-';
  margin-right: 1rem;
  display: inline-block;
}

@media (min-width: 600px) {
  main p {
    --body-text: var(--text-base);
  }
}

/*
  Start of specific customily integration CSS
*/
body > div.loadingoverlay {
  display: none !important;
}
/*
  End of specific customily integration CSS
*/