@layer global {
  /* #region Fonts */

  /* inter-200 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Inter";
    font-style: normal;
    font-weight: 200;
    src: url("../fonts/inter-v20-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-300 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Inter";
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/inter-v20-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/inter-v20-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/inter-v20-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-600 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    src: url("../fonts/inter-v20-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/inter-v20-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  /* inter-800 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Inter";
    font-style: normal;
    font-weight: 800;
    src: url("../fonts/inter-v20-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-900 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Inter";
    font-style: normal;
    font-weight: 900;
    src: url("../fonts/inter-v20-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  /* @font-face kit by Fonts2u (https://fonts2u.com) */
  @font-face {
    font-family: "Crashbow";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/Crashbow.woff");
  }

  /* anton-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Anton";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/anton-v27-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  /* #endregion */

  /* #region Font Sizes*/
  :root {
    --fs-10: calc(10 / 16 * 1rem);
    --fs-20: calc(20 / 16 * 1rem);
    --fs-80: calc(80 / 16 * 1rem);
    --fs-170: calc(170 / 16 * 1rem);
    --fs-36: calc(36 / 16 * 1rem);
    --fs-64: calc(64 / 16 * 1rem);
    --fs-24: calc(24 / 16 * 1rem);
    --fs-48: calc(48 / 16 * 1rem);
    --fs-16: calc(16 / 16 * 1rem);

    --font-size-topnav: var(--fs-10);
    --font-size-h1: var(--fs-80);
    --font-size-h2: var(--fs-36);
    --font-size-h3: var(--fs-24);
    --font-size-footer: var(--fs-10);
    --Font-size-tag: var(--fs-24);

    @media (width >= calc(600 / 16 * 1rem)) {
      --font-size-topnav: var(--fs-20);
      --font-size-h1: var(--fs-170);
      --font-size-h2: var(--fs-64);
      --font-size-h3: var(--fs-48);
      --font-size-footer: var(--fs-16);
      --Font-size-tag: var(--fs-48);
    }
  }

  /* #endregion */

  /*#region Colours*/
  :root {
    --c-white: hwb(0 100% 0%);
    --c-dark: hsl(0, 0%, 0%);
    --c-navy: hsl(180, 24%, 6%);

    --colour-main-bg-dark: var(--c-dark);
    --colour-main-bg-white: var(--c-white);
    --colour-text-dark: var(--c-dark);
    --colour-text-light: var(--c-white);
    --colour-header-bg: var(--c-dark);
    --colour-fill-bg: var(--c-dark);
    --colour-navy-bg: var(--c-navy);
    --colour-footer-bg: var(--c-dark);
  }

  /* #endregion */

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

  * {
    margin: 0;
  }

  /* #region Font Stylings */
  body {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    line-height: 1.6;
    font-weight: 300;
    color: var(--colour-text-light);
  }

  h1,
  h2,
  h3,
  h4 {
    line-height: 1.6;
  }

  h1 {
    font-size: var(--font-size-h1);
  }

  h2 {
    font-size: var(--font-size-h2);
    text-transform: uppercase;
  }

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

  h4 {
    font-size: large;
    font-weight: 600;
  }

  a {
    text-decoration: none;
  }

  /* #endregion */

  img,
  picture,
  svg {
    max-width: 100%;
    height: auto;
    display: block;
  }

  .wrapper {
    width: min(calc(100% - 48px), calc(1200 / 16 * 1rem));
    margin-inline: auto;
  }
}