/* Global */
:root {
  /* colo(u)rs */
  --white: #ffffff;
  --off-white: #fffbe9;
  --navy: #002726;
  --teal: #005c5a;
  --pastel-red: #ef4744;
  --macaroni-and-cheese: #fdbe27;

  /* Main Colours */
  --color-light: var(--off-white);
  --color-dark: var(--navy);
  --color-main: var(--teal);
  --color-alt: var(--pastel-red);
  --color-secondary: var(--macaroni-and-cheese);

  /* Fonts */
  --font-family-body: 'Merriweather', serif;
  --font-family-heading: 'Lato', sans-serif;

  /* Spacing */
  --gap: 24px;
  --border-radius: 4px;

  --spacing: 40px;

  /* font sizes */
  /* --px-to-rem: calc((var(--pixels) / 16) * 1rem); */
  --font-size--h1: calc((54 / 16) * 1rem); /* 56px */
  --font-size--h2: calc((40 / 16) * 1rem); /* 32px */
  --font-size--h3: calc((32 / 16) * 1rem); /* 26px */
  --font-size--h4: calc((26 / 16) * 1rem); /* 23px */
  --font-size--h5: calc((23 / 16) * 1rem); /* 22px */
  --font-size--h6: calc((16 / 16) * 1rem); /* 16px */
  --font-size--base: calc((16 / 16) * 1rem); /* 16px */
  --font-size--lead: calc((20 / 16) * 1rem); /* 16px */

  /* Transitions */
  --global-transition: 150ms ease;
}
@media screen and (min-width: 641px) {
  :root {
    --font-size--h1: calc((64 / 16) * 1rem); /* 56px */
    --font-size--h2: calc((56 / 16) * 1rem); /* 40px */
    --font-size--h3: calc((40 / 16) * 1rem); /* 32px */
    --font-size--h4: calc((32 / 16) * 1rem); /* 26px */
    --font-size--h5: calc((26 / 16) * 1rem); /* 21px */
    --font-size--h6: calc((21 / 16) * 1rem); /* 18px */
    --font-size--base: calc((18 / 16) * 1rem); /* 18px */
    --font-size--lead: calc((24 / 16) * 1rem); /* 16px */
    --spacing: 60px;
  }
}
/* merriweather-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: 'Merriweather';
  font-style: normal;
  font-weight: 300;
  src: url(/assets/fonts/merriweather-v30-latin-300.woff2) format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* merriweather-300italic - 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: 'Merriweather';
  font-style: italic;
  font-weight: 300;
  src: url(/assets/fonts/merriweather-v30-latin-300italic.woff2) format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* merriweather-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: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  src: url(/assets/fonts/merriweather-v30-latin-700.woff2) format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-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: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url(/assets/fonts/lato-v24-latin-700.woff2) format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-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: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url(/assets/fonts/lato-v24-latin-900.woff2) format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* base settings */
@view-transition {
  navigation: auto;
}
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  scroll-behavior: smooth;
}
*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}
body {
  font-family: 'Merriweather', serif;
  font-family: var(--font-family-body);
  background-color: #fffbe9;
  background-color: var(--color-light);
  color: #002726;
  color: var(--color-dark);
  margin: 0;
  font-weight: 300;
}
/* Typography */
h1,
.h1 {
  font-size: calc((54 / 16) * 1rem);
  font-size: var(--font-size--h1);
}
h2,
.h2 {
  font-size: calc((40 / 16) * 1rem);
  font-size: var(--font-size--h2);
}
h3,
.h3 {
  font-size: calc((32 / 16) * 1rem);
  font-size: var(--font-size--h3);
}
h4,
.h4 {
  font-size: calc((26 / 16) * 1rem);
  font-size: var(--font-size--h4);
}
h5,
.h5 {
  font-size: calc((23 / 16) * 1rem);
  font-size: var(--font-size--h5);
}
h6,
.h6 {
  font-size: calc((16 / 16) * 1rem);
  font-size: var(--font-size--h6);
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: 'Lato', sans-serif;
  font-family: var(--font-family-heading);
  font-weight: 900;
  letter-spacing: 0.01em;
  color: #005c5a;
  color: var(--color-main);
  margin: 0.5em 0 0.5em 0;
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, .h1:first-child, .h2:first-child, .h3:first-child, .h4:first-child, .h5:first-child, .h6:first-child {
    margin-top: 0;
  }
.Subtitle {
  font-family: 'Lato', sans-serif;
  font-family: var(--font-family-heading);
  font-size: 14px;
  letter-spacing: 0.01em;
  line-height: normal;
  text-transform: uppercase;
  margin-bottom: 1em;
}
/* Links */
a {
  -webkit-transition: color 150ms ease;
  -o-transition: color 150ms ease;
  transition: color 150ms ease;
  -webkit-transition: color var(--global-transition);
  -o-transition: color var(--global-transition);
  transition: color var(--global-transition);
  text-decoration: none;
  color: #005c5a;
  color: var(--color-main);
  font-weight: 600;
  position: relative;
}
a::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #ef4744;
    background-color: var(--color-alt);
    position: absolute;
    bottom: -3px;
    left: 0;
    -webkit-transform-origin: 0;
            transform-origin: 0;
  }
a:hover {
    color: #005c5a;
    color: var(--color-main);
    text-decoration: none;
  }
a:hover::after {
      -webkit-animation: re-draw 500ms 1 both;
              animation: re-draw 500ms 1 both;
    }
a:focus {
    text-decoration: none;
    color: #005c5a;
    color: var(--color-main);
  }
@-webkit-keyframes re-draw {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  10% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@keyframes re-draw {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  10% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
p {
  line-height: 1.6;
}
/* lists */
ul,
ol {
  margin-left: 0;
  padding-left: 1rem;
  list-style-position: outside;
}
li {
  margin-left: 0;
  margin-bottom: 0.7em;
  padding-left: 0;
  line-height: var(--line-height--base);
}
::marker {
  color: #ef4744;
  color: var(--color-alt);
  font-size: calc((20 / 16) * 1rem);
  font-size: var(--font-size--lead);
}
/* Definition Lists */
dt {
  font-weight: 600;
}
dd {
  margin: 0;
}
dd + dt {
  margin-top: 12px;
}
/* first child spacing fix */
p,
ul,
ol,
nav {
  margin: 0 0 1em 0;
}
/* Bold */
b,
strong {
  font-weight: 700;
}
/* Lead */
.Lead {
  font-size: calc((20 / 16) * 1rem);
  font-size: var(--font-size--lead);
}
.Heading {
  font-family: 'Lato', sans-serif;
  font-family: var(--font-family-heading);
  font-weight: 900;
  letter-spacing: 0.01em;
}
img {
  max-width: 100%;
  border-style: none;
  vertical-align: top;
  height: auto;
}
/* Label */
label {
  display: block;
  font-family: 'Lato', sans-serif;
  font-family: var(--font-family-heading);
  font-size: calc((20 / 16) * 1rem);
  font-size: var(--font-size--lead);
  font-weight: 900;
  letter-spacing: 0.01em;
  margin: 0 0 0.5em 0;
  color: #005c5a;
  color: var(--color-main);
}
[title='required'] {
  text-decoration: none;
  color: #ef4744;
  color: var(--color-alt);
}
/* Input Types */
input[type='color'],
input[type='date'],
input[type='datetime-local'],
input[type='email'],
input[type='month'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='time'],
input[type='url'],
input[type='week'],
textarea {
  width: 100%;
  padding: 10px;
  background-color: #ffffff;
  background-color: var(--white);
  border: solid 1px #005c5a;
  border: solid 1px var(--color-main);
  border-radius: 4px;
  border-radius: var(--border-radius);
  font-size: var(--font-size-base);

  /* Focus Styles - uses outline for A11y */
}
input[type='color'].focus-visible, input[type='date'].focus-visible, input[type='datetime-local'].focus-visible, input[type='email'].focus-visible, input[type='month'].focus-visible, input[type='number'].focus-visible, input[type='password'].focus-visible, input[type='search'].focus-visible, input[type='tel'].focus-visible, input[type='text'].focus-visible, input[type='time'].focus-visible, input[type='url'].focus-visible, input[type='week'].focus-visible, textarea.focus-visible {
    outline: solid 1px #fdbe27;
    outline: solid 1px var(--color-secondary);
    border-color: #fdbe27;
    border-color: var(--color-secondary);
    -webkit-box-shadow: 0px 0px 5px 0px #fdbe27;
            box-shadow: 0px 0px 5px 0px #fdbe27;
    -webkit-box-shadow: 0px 0px 5px 0px var(--color-secondary);
            box-shadow: 0px 0px 5px 0px var(--color-secondary);
  }
input[type='color'].focus-visible, input[type='date'].focus-visible, input[type='datetime-local'].focus-visible, input[type='email'].focus-visible, input[type='month'].focus-visible, input[type='number'].focus-visible, input[type='password'].focus-visible, input[type='search'].focus-visible, input[type='tel'].focus-visible, input[type='text'].focus-visible, input[type='time'].focus-visible, input[type='url'].focus-visible, input[type='week'].focus-visible, textarea.focus-visible {
    outline: solid 1px #fdbe27;
    outline: solid 1px var(--color-secondary);
    border-color: #fdbe27;
    border-color: var(--color-secondary);
    -webkit-box-shadow: 0px 0px 5px 0px #fdbe27;
            box-shadow: 0px 0px 5px 0px #fdbe27;
    -webkit-box-shadow: 0px 0px 5px 0px var(--color-secondary);
            box-shadow: 0px 0px 5px 0px var(--color-secondary);
  }
input[type='color'].focus-visible, input[type='date'].focus-visible, input[type='datetime-local'].focus-visible, input[type='email'].focus-visible, input[type='month'].focus-visible, input[type='number'].focus-visible, input[type='password'].focus-visible, input[type='search'].focus-visible, input[type='tel'].focus-visible, input[type='text'].focus-visible, input[type='time'].focus-visible, input[type='url'].focus-visible, input[type='week'].focus-visible, textarea.focus-visible {
    outline: solid 1px #fdbe27;
    outline: solid 1px var(--color-secondary);
    border-color: #fdbe27;
    border-color: var(--color-secondary);
    -webkit-box-shadow: 0px 0px 5px 0px #fdbe27;
            box-shadow: 0px 0px 5px 0px #fdbe27;
    -webkit-box-shadow: 0px 0px 5px 0px var(--color-secondary);
            box-shadow: 0px 0px 5px 0px var(--color-secondary);
  }
input[type='color'].focus-visible, input[type='date'].focus-visible, input[type='datetime-local'].focus-visible, input[type='email'].focus-visible, input[type='month'].focus-visible, input[type='number'].focus-visible, input[type='password'].focus-visible, input[type='search'].focus-visible, input[type='tel'].focus-visible, input[type='text'].focus-visible, input[type='time'].focus-visible, input[type='url'].focus-visible, input[type='week'].focus-visible, textarea.focus-visible {
    outline: solid 1px #fdbe27;
    outline: solid 1px var(--color-secondary);
    border-color: #fdbe27;
    border-color: var(--color-secondary);
    -webkit-box-shadow: 0px 0px 5px 0px #fdbe27;
            box-shadow: 0px 0px 5px 0px #fdbe27;
    -webkit-box-shadow: 0px 0px 5px 0px var(--color-secondary);
            box-shadow: 0px 0px 5px 0px var(--color-secondary);
  }
input[type='color']:focus-visible, input[type='date']:focus-visible, input[type='datetime-local']:focus-visible, input[type='email']:focus-visible, input[type='month']:focus-visible, input[type='number']:focus-visible, input[type='password']:focus-visible, input[type='search']:focus-visible, input[type='tel']:focus-visible, input[type='text']:focus-visible, input[type='time']:focus-visible, input[type='url']:focus-visible, input[type='week']:focus-visible, textarea:focus-visible {
    outline: solid 1px #fdbe27;
    outline: solid 1px var(--color-secondary);
    border-color: #fdbe27;
    border-color: var(--color-secondary);
    -webkit-box-shadow: 0px 0px 5px 0px #fdbe27;
            box-shadow: 0px 0px 5px 0px #fdbe27;
    -webkit-box-shadow: 0px 0px 5px 0px var(--color-secondary);
            box-shadow: 0px 0px 5px 0px var(--color-secondary);
  }
input[type='color']:disabled, input[type='date']:disabled, input[type='datetime-local']:disabled, input[type='email']:disabled, input[type='month']:disabled, input[type='number']:disabled, input[type='password']:disabled, input[type='search']:disabled, input[type='tel']:disabled, input[type='text']:disabled, input[type='time']:disabled, input[type='url']:disabled, input[type='week']:disabled, textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
textarea {
  min-height: 200px;
}
.InputWrap {
  margin-bottom: 2em;
}
/* Accent Colour for form elements */
input[type='checkbox'],
input[type='radio'],
input[type='range'],
progress {
  accent-color: #005c5a;
  accent-color: var(--color-main);
}
.Button {
  border-radius: 4px;
  border-radius: var(--border-radius);
  border: solid 2px #ef4744;
  border: solid 2px var(--color-alt);
  font-size: 1rem;
  font-weight: 700;
  font-family: 'Lato', sans-serif;
  font-family: var(--font-family-heading);
  letter-spacing: 0.01em;
  background-color: transparent;
  color: #ef4744;
  color: var(--color-alt);
  line-height: 1.4375rem;
  text-transform: uppercase;
  min-width: 226px;
  height: 59px;
  padding: 21px 26px 23px 26px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  -webkit-transition: all 150ms ease;
  -o-transition: all 150ms ease;
  transition: all 150ms ease;
  -webkit-transition: all var(--global-transition);
  -o-transition: all var(--global-transition);
  transition: all var(--global-transition);
  text-decoration: none;
  cursor: pointer;
  -webkit-box-shadow: inset 0px -2px 0px 0px #ef4744;
          box-shadow: inset 0px -2px 0px 0px #ef4744;
  -webkit-box-shadow: inset 0px -2px 0px 0px var(--color-alt);
          box-shadow: inset 0px -2px 0px 0px var(--color-alt);
  margin-bottom: 23px;
}
.Button:hover {
    -webkit-box-shadow: inset 0px -59px 0px 0px #ef4744;
            box-shadow: inset 0px -59px 0px 0px #ef4744;
    -webkit-box-shadow: inset 0px -59px 0px 0px var(--color-alt);
            box-shadow: inset 0px -59px 0px 0px var(--color-alt);
    color: #fffbe9;
    color: var(--color-light);
    text-decoration: none;
  }
.Button::after {
    display: none;
  }
/* Utilities */
/* Screen Reader Only  */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Skip to Content */
.skip-to-content-link:focus {
  z-index: 9999;
  position: inherit;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}
.Container {
  width: calc(100% - 24px - 24px);
  width: calc(100% - var(--gap) - var(--gap));
  display: block;
  margin-left: 24px;
  margin-left: var(--gap);
  margin-right: 24px;
  margin-right: var(--gap);
  position: relative;
}
@media screen and (min-width: 960px) {
.Container {
    margin-left: auto;
    margin-right: auto;
    width: 95%;
    max-width: 1144px;
}
  }
@media screen and (min-width: 960px) {
.Container--narrow {
    max-width: 680px;
}
  }
@media screen and (min-width: 641px) {
.hide-on-desktop {
    display: none;
}
  }
@media screen and (max-width: 640px) {
.hide-on-mobile {
    display: none;
}
  }
.Grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  grid-gap: 24px;
  grid-gap: var(--gap);
  gap: var(--gap);
}
/* Partials */
.Header {
  margin-bottom: 70px;
  view-transition-name: header;
}
.Header .Container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 24px 0;
  padding: var(--gap) 0;
}
.Header__Site-Title {
  color: #ef4744;
  color: var(--color-alt);
  display: block;
  width: 100px;
}
.Header__Site-Title svg {
    aspect-ratio: 1908/869;
  }
.Header__Site-Title::after {
    display: none;
  }
/* Main Nav */
.Header__Nav {
  background-color: #005c5a;
  background-color: var(--color-main);
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  padding: 50px 24px;
  text-align: right;
  -webkit-transition: -webkit-transform 150ms ease;
  transition: -webkit-transform 150ms ease;
  -o-transition: transform 150ms ease;
  transition: transform 150ms ease;
  transition: transform 150ms ease, -webkit-transform 150ms ease;
  -webkit-transition: -webkit-transform var(--global-transition);
  transition: -webkit-transform var(--global-transition);
  -o-transition: transform var(--global-transition);
  transition: transform var(--global-transition);
  transition: transform var(--global-transition), -webkit-transform var(--global-transition);
  z-index: 5;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  padding-top: 120px;
}
.Header__Nav[data-menu='open'] {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
.Header__Nav ul {
    text-transform: uppercase;
    font-family: var(--font-body);
    list-style-type: none;
    margin: 0;
  }
.Header__Nav ul li {
      margin: 0 0 10px 0;
      padding: 0;
    }
.Header__Nav a {
    font-size: 24px;
    font-family: 'Lato', sans-serif;
    font-family: var(--font-family-heading);
    font-weight: 700;
    letter-spacing: 0.01em;
    display: block;
    color: #fdbe27;
    color: var(--color-secondary);
  }
.Header__Nav a:hover {
      color: #ef4744;
      color: var(--color-alt);
    }
.Header__Nav a::after {
      display: none;
    }
@media screen and (min-width: 960px) {
.Header__Nav {
    position: static;
    width: auto;
    height: auto;
    display: block;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    background-color: transparent;
    padding: 0;
}

    .Header__Nav ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      margin: 0;
      padding: 0;
    }
      .Header__Nav ul li {
        margin: 0 0 0 16px;
        padding: 0;
      }

    .Header__Nav a {
      font-size: 14px;
      color: #ef4744;
      color: var(--color-alt);
    }
      .Header__Nav a:hover {
        color: #005c5a;
        color: var(--color-main);
      }
  }
.Header__Nav a[aria-current]:not([aria-current='false']) {
  color: #ef4744;
  color: var(--color-alt);
}
@media screen and (min-width: 960px) {
  .Header__Nav a[aria-current]:not([aria-current='false']) {
    color: #005c5a;
    color: var(--color-main);
  }
}
/* Toggles */
.Header__NavToggle,
.Header__ThemeToggle {
  display: block;
  cursor: pointer;
  border: 0;
}
/* Menu Toggle */
.Header__NavToggle {
  z-index: 10;
  width: 40px;
  height: 24px;
  background-color: transparent;
  padding: 0;
  margin: 0;
  position: relative;
}
.Header__NavToggle b {
    display: block;
    width: 100%;
    background-color: #ef4744;
    background-color: var(--color-alt);
    border-radius: 4px;
    border-radius: var(--border-radius);
    height: 4px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all 150ms ease;
    -o-transition: all 150ms ease;
    transition: all 150ms ease;
    -webkit-transition: all var(--global-transition);
    -o-transition: all var(--global-transition);
    transition: all var(--global-transition);
  }
.Header__NavToggle b:nth-child(1) {
      width: 35%;
    }
.Header__NavToggle b:nth-child(2) {
      top: 10px;
    }
.Header__NavToggle b:nth-child(3) {
      top: 20px;
      width: 75%;
    }
.Header__NavToggle[data-menu='open'] b:nth-child(1) {
    width: 100%;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    top: 10px;
  }
.Header__NavToggle[data-menu='open'] b:nth-child(2) {
    width: 0;
    opacity: 0;
  }
.Header__NavToggle[data-menu='open'] b:nth-child(3) {
    width: 100%;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    top: 10px;
  }
@media screen and (min-width: 960px) {
  .Header__Site-Title {
    width: 200px;
  }
  .Header__NavToggle {
    display: none;
  }
}
body.nav-open {
  overflow: hidden;
  position: fixed;
}
/* Footer */
.Footer {
  background-color: #002726;
  background-color: var(--color-dark);
  color: #fffbe9;
  color: var(--color-light);
  padding: 40px 0;
  padding: var(--spacing) 0;
}
.Footer h2 {
    color: var(--light);
  }
.Footer a {
    color: #ffffff;
    color: var(--white);
    font-weight: 400;
  }
.Footer a:hover {
      color: var(--secondary);
    }
.Footer a::after {
      display: none;
    }
.Footer a {
  color: #fdbe27;
  color: var(--color-secondary);
  text-decoration: none;
}
.Footer a:hover {
    color: #fffbe9;
    color: var(--color-light);
    text-decoration: none;
  }
.Footer h2 {
}
/* Footer Logos */
.Footer__Logos {
  display: block;
  padding: 20px 0 40px 0;
  a {
    display: block;
  }
    a img {
      width: 100%;
      max-width: 160px;
      height: auto;
      display: block;
    }
}
/* Footer Nav */
.FooterNav {
  list-style-type: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-left: 0;
}
.FooterNav__Item {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;

  margin-left: 0;
  margin-bottom: 10px;
}
.Footer__Details {
  margin-top: 24px;
  padding-top: 24px;
  border-top: solid 1px #005c5a;
  border-top: solid 1px var(--color-main);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}
.Footer__Colophon {
  font-size: 14px;
}
@media screen and (min-width: 641px) {
  .Footer__Details,
  .Footer__Content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: left;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 24px;
    gap: var(--gap);
  }

  .Footer__Social,
  .Footer__Logos,
  .Footer__Nav {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
    padding: 0;
  }

  .FooterNav {
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }

  .Footer__Nav {
    text-align: right;
  }
}
@media screen and (min-width: 960px) {
  .Footer__Social {
    max-width: 30%;
  }
}
/* Social Nav */
.SocialNav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.SocialNav a {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 24px;
          flex: 0 0 24px;
  -ms-flex: 0 0 var(--gap);
      flex: 0 0 var(--gap);
  display: block;
  margin-right: 16px;
}
.SocialNav a svg {
  width: 24px;
  width: var(--gap);
  height: 24px;
  height: var(--gap);
  display: block;
}
.Page__Header {
  margin-bottom: 40px;
  margin-bottom: var(--spacing);
}
@media screen and (min-width: 641px) {
.Page__Header {
    display: grid;
    gap: 24px;
    grid-gap: 24px;
    grid-gap: var(--gap);
    gap: var(--gap);
    grid-template-columns: repeat(12, 1fr);
}
    .Page__Header div {
      grid-column: 1 / span 8;
    }
  }
.Page__Header--centered {
  text-align: center;
}
.Page__Header--centered h1 {
    margin-bottom: 0;
  }
@media screen and (min-width: 641px) {
    .Page__Header--centered div {
      grid-column: 3 / span 8;
    }
  }
.Label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  border-radius: 9999em;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  font-size: 1rem;
  font-size: calc((16 / 16) * 1rem);
  font-size: var(--font-size--base);
  font-family: 'Lato', sans-serif;
  font-family: var(--font-family-heading);
  font-weight: 700;
  line-height: 1;
  background-color: #fdbe27;
  background-color: var(--color-secondary);
  color: #005c5a;
  color: var(--color-main);
  font-size: 12px;
  padding: 6px 14px 6px 12px;
  letter-spacing: 0.05em;
}
.ContentWrapper picture {
  display: block;
  width: 100%;
  height: auto;
}
.ContentWrapper picture,
.ContentWrapper p,
.ContentWrapper ul {
  margin-bottom: 2em;
}
.ContentWrapper picture img {
  display: block;
  width: 100%;
  height: auto;
}
/* Pages */
.Introduction__Content {
  background: #005c5a;
  background: var(--color-main);
  border-radius: 4px;
  border-radius: var(--border-radius);
  color: #fffbe9;
  color: var(--color-light);
  padding: 90px 24px 16px 24px;
  padding: 90px var(--gap) 16px var(--gap);
  font-family: 'Lato', sans-serif;
  font-family: var(--font-family-heading);
  font-size: calc((20 / 16) * 1rem);
  font-size: var(--font-size--lead);
  position: relative;
  margin-bottom: 40px;
  margin-bottom: var(--spacing);
}
.Introduction__Content h1 {
    color: #fffbe9;
    color: var(--color-light);
  }
.Introduction__Content strong {
    color: #fdbe27;
    color: var(--color-secondary);
  }
.Introduction__Content a {
    color: #fdbe27;
    color: var(--color-secondary);
  }
.Introduction__Image {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 9999em;
  width: 150px;
  border: solid 8px #fffbe9;
  border: solid 8px var(--color-light);
}
@media screen and (min-width: 960px) {
  .Introduction {
    display: grid;
    -webkit-column-gap: 24px;
       -moz-column-gap: 24px;
            column-gap: 24px;
    grid-column-gap: 24px;
    grid-column-gap: var(--gap);
    -webkit-column-gap: var(--gap);
       -moz-column-gap: var(--gap);
            column-gap: var(--gap);
    grid-template-columns: repeat(12, 1fr);
  }
  .Introduction__Content {
    grid-column: 2 / span 10;
  }
}
.Services {
  margin-bottom: 40px;
  margin-bottom: var(--spacing);
}
@media screen and (min-width: 641px) {
  .Services__Grid {
    display: grid;
    -webkit-column-gap: 24px;
       -moz-column-gap: 24px;
            column-gap: 24px;
    grid-column-gap: 24px;
    grid-column-gap: var(--gap);
    -webkit-column-gap: var(--gap);
       -moz-column-gap: var(--gap);
            column-gap: var(--gap);
    grid-template-columns: repeat(12, 1fr);
  }
  .Services__Title {
    grid-column: 1 / span 12;
  }
  .Services__Text {
    grid-column: 1 / span 6;
  }
  .Services__List {
    grid-column: 7 / span 6;
  }
}
@media screen and (min-width: 960px) {
  .Services__Title {
    grid-column: 2 / span 10;
  }
  .Services__Text {
    grid-column: 2 / span 4;
  }
  .Services__List {
    grid-column: 7 / span 5;
  }
}
.Projects {
  text-align: center;
  margin-bottom: 40px;
  margin-bottom: var(--spacing);
}
.Logo__List {
  list-style-type: none;
  padding: 0;
  margin: 0 0 40px 0;
  margin: 0 0 var(--spacing) 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  justify-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.Logo__Item {
  padding: 0;
  margin: 0;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  padding: 0 calc(24px);
  padding: 0 calc(var(--gap));
  margin-bottom: 24px;
  margin-bottom: var(--gap);
}
.Logo__Item svg {
    width: 100%;
    height: auto;
    max-width: 180px;
  }
@media screen and (min-width: 641px) {
  .Logo__Item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.3%;
            flex: 0 0 33.3%;
  }
}
@media screen and (min-width: 1008px) {
  .Logo__Item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
  }
}
.PortfolioNav,
.PortfolioNav__Tags {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.PortfolioNav {
  display: grid;
  -webkit-column-gap: 24px;
     -moz-column-gap: 24px;
          column-gap: 24px;
  grid-column-gap: 24px;
  grid-column-gap: var(--gap);
  -webkit-column-gap: var(--gap);
     -moz-column-gap: var(--gap);
          column-gap: var(--gap);
  row-gap: calc(2 * 24px);
  grid-row-gap: calc(2 * 24px);
  grid-row-gap: calc(2 * var(--gap));
  row-gap: calc(2 * var(--gap));

  grid-template-columns: 1fr;
}
@media screen and (min-width: 641px) {
.PortfolioNav {
    grid-template-columns: repeat(2, 1fr);
}
  }
.PortfolioNav__Item {
  padding: 0;
  margin: 0;
}
.PortfolioNav__Image {
  position: relative;
  border-radius: 4px;
  border-radius: var(--border-radius);
  overflow: hidden;
  margin-bottom: 24px;
  margin-bottom: var(--gap);
  position: relative;
  display: block;
  aspect-ratio: 800/450;
}
.PortfolioNav__Image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.PortfolioNav__Image h2 {
  text-decoration: none;
  z-index: 10;
  position: relative;
  left: 20px;
  top: 50%;
  width: 65%;
  color: #fffbe9;
  color: var(--color-light);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  padding: 0;
  margin: 0;
  font-size: 50px;
}
.PortfolioNav__Tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-bottom: 1em;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.PortfolioNav__Tags .Label {
  margin-right: 5px;
}
.Portfolio__Nav {
  padding-bottom: 40px;
  padding-bottom: var(--spacing);
}
.PortfolioNav__Link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5em;
  color: #ef4744;
  color: var(--color-alt);
  font-size: 1rem;
  font-weight: 700;
  font-family: 'Lato', sans-serif;
  font-family: var(--font-family-heading);
  font-size: calc((16 / 16) * 1rem);
  font-size: var(--font-size--h6);
}
.PortfolioNav__Link:after {
    display: none;
  }
.PortfolioNav__Link:hover svg {
      -webkit-transform: translate(0.1em, 0);
              transform: translate(0.1em, 0);
    }
.PortfolioNav__Link svg {
  display: block;
  width: 1em;
  height: 1em;
  -webkit-transition: all 150ms ease;
  -o-transition: all 150ms ease;
  transition: all 150ms ease;
  -webkit-transition: all var(--global-transition);
  -o-transition: all var(--global-transition);
  transition: all var(--global-transition);
}
.Portfolio__Image {
  width: 100%;
  height: auto;
  margin-bottom: 40px;
  margin-bottom: var(--spacing);
}
.Portfolio__Intro {
  display: grid;
  gap: 24px;
  grid-gap: 24px;
  grid-gap: var(--gap);
  gap: var(--gap);
  grid-template-columns: 1fr;
  margin-bottom: 40px;
  margin-bottom: var(--spacing);
}
@media screen and (min-width: 641px) {
  .Portfolio__Intro {
    grid-template-columns: repeat(12, 1fr);
  }

  .Project__Info {
    grid-column: 1 / span 5;
    position: relative;
  }
  .Project__Excerpt {
    grid-column: 6 / span 7;
  }

  .Project__Info dl {
    position: sticky;
    top: 40px;
    top: var(--spacing);
    bottom: 40px;
    bottom: var(--spacing);
  }
}
@media screen and (min-width: 1008px) {
  .Project__Info {
    grid-column: 2 / span 4;
  }
  .Project__Excerpt {
    grid-column: 7 / span 5;
  }
}
.About__ImageWrapper {
  margin-bottom: 100px;
  margin-left: auto;
  margin-right: auto;
  max-width: 400px;
  position: relative;
  width: 100%;
}
.About__ImageWrapper img {
    position: relative;
    z-index: 4;
  }
.About__ImageWrapper::before,
  .About__ImageWrapper::after {
    content: '';
    height: 100%;
    width: 100%;
    background-color: #ef4744;
    background-color: var(--color-alt);
    bottom: 0;
    left: 0;
    position: absolute;
    -webkit-transform: rotate(-4deg) translate(-2%, 2%);
            transform: rotate(-4deg) translate(-2%, 2%);
    z-index: 4;
    border-radius: 4px;
    border-radius: var(--border-radius);
    -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
  }
.About__ImageWrapper::after {
    -webkit-transform: rotate(-8deg) translate(-3%, 3%);
            transform: rotate(-8deg) translate(-3%, 3%);
    background-color: #fdbe27;
    background-color: var(--color-secondary);
    z-index: 3;
  }
.AboutGrid {
  padding-bottom: 24px;
  padding-bottom: var(--gap);
}
@media screen and (min-width: 641px) {
  .AboutGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    grid-gap: 24px;
    grid-gap: var(--gap);
    gap: var(--gap);
  }

  .AboutCol--left {
    position: relative;
  }
  .About__ImageWrapper {
    position: sticky;
    top: 24px;
    top: var(--gap);
  }
}
.Contact__Grid {
  display: grid;
  gap: 24px;
  grid-gap: 24px;
  grid-gap: var(--gap);
  gap: var(--gap);
  grid-template-columns: 1fr;
}
.Contact__Message {
  display: none;
  opacity: 0;
  -webkit-transition: all 150ms ease;
  -o-transition: all 150ms ease;
  transition: all 150ms ease;
  -webkit-transition: all var(--global-transition);
  -o-transition: all var(--global-transition);
  transition: all var(--global-transition);
}
.Contact__Message.Contact__Message--active {
    display: block;
    opacity: 1;
  }
.Contact__MessageText {
  display: none;
  padding: 24px;
  padding: var(--gap);
  background-color: #ef4744;
  background-color: var(--color-alt);
  color: #fffbe9;
  color: var(--color-light);
  border-radius: 4px;
  border-radius: var(--border-radius);
}
.Contact__MessageText--success {
  background-color: #005c5a;
  background-color: var(--color-main);
}
.Contact__List {
  list-style-type: none;
}
.Contact__List li {
    margin-bottom: 2em;
  }
.Contact__Link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.Contact__Link::after {
    display: none;
  }
.Contact__Icon {
  width: 40px;
  height: 40px;
  background-color: #005c5a;
  background-color: var(--color-main);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 16px;
  border-radius: 40px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 40px;
          flex: 0 0 40px;
}
.Contact__Icon svg {
    width: 20px;
    height: 20px;
    display: block;
    color: #fdbe27;
    color: var(--color-secondary);
  }
.Contact__Name {
  display: block;
  color: #005c5a;
  color: var(--color-main);
  margin: 0 0 0.2em 0;
}
.Contact__Url {
  color: #005c5a;
  color: var(--color-main);
  opacity: 0.8;
  font-style: italic;
  font-size: 14px;
  font-weight: 300;
  word-break: break-word;
}
.Contact__Link:hover .Contact__Url {
  text-decoration: underline;
  text-decoration-color: #ef4744;
  text-decoration-color: var(--color-alt);
}
@media screen and (min-width: 641px) {
  .Contact__Grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .Contact__Form {
    grid-column: 1 / span 6;
  }

  .Contact__Info {
    grid-column: 8 / span 5;
  }
}
.Page--centered {
  margin-bottom: 40px;
  margin-bottom: var(--spacing);
}
.Page--centered img {
  border-radius: 4px;
  border-radius: var(--border-radius);
}
@media screen and (min-width: 641px) {
  .Page--centered > .Container {
    display: grid;
    -webkit-column-gap: 24px;
       -moz-column-gap: 24px;
            column-gap: 24px;
    grid-column-gap: 24px;
    grid-column-gap: var(--gap);
    -webkit-column-gap: var(--gap);
       -moz-column-gap: var(--gap);
            column-gap: var(--gap);
    grid-template-columns: repeat(12, 1fr);
  }

  .Page--centered .ContentWrapper {
    grid-column: 2 / span 10;
  }
}
@media screen and (min-width: 960px) {
  .Page--centered .ContentWrapper {
    grid-column: 3 / span 8;
  }
}
@media screen and (min-width: 1008px) {
  .Page--centered .ContentWrapper {
    grid-column: 4 / span 6;
  }
}
/* Vendor */
/* PrismJS 1.14.0
http://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+abap+actionscript+ada+apacheconf+apl+applescript+c+arff+asciidoc+asm6502+aspnet+autohotkey+autoit+bash+basic+batch+bison+brainfuck+bro+cpp+csharp+arduino+coffeescript+clojure+ruby+csp+css-extras+d+dart+diff+django+docker+eiffel+elixir+elm+markup-templating+erlang+fsharp+flow+fortran+gedcom+gherkin+git+glsl+go+graphql+groovy+haml+handlebars+haskell+haxe+http+hpkp+hsts+ichigojam+icon+inform7+ini+io+j+java+jolie+json+julia+keyman+kotlin+latex+less+liquid+lisp+livescript+lolcode+lua+makefile+markdown+erb+matlab+mel+mizar+monkey+n4js+nasm+nginx+nim+nix+nsis+objectivec+ocaml+opencl+oz+parigp+parser+pascal+perl+php+php-extras+sql+powershell+processing+prolog+properties+protobuf+pug+puppet+pure+python+q+qore+r+jsx+typescript+renpy+reason+rest+rip+roboconf+crystal+rust+sas+sass+scss+scala+scheme+smalltalk+smarty+plsql+soy+stylus+swift+tcl+textile+twig+tsx+vbnet+velocity+verilog+vhdl+vim+visual-basic+wasm+wiki+xeora+xojo+yaml&plugins=line-numbers+toolbar+show-language */
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */
/*
* Dracula Theme for Prism.JS
*
* @author Gustavo Costa
* e-mail: gusbemacbe@gmail.com
*
* @contributor Jon Leopard
* e-mail: jonlprd@gmail.com
*
* @license MIT 2016-2020
*/
/* Scrollbars */
:root
{
  --background: #282A36;
  --comment:    #6272A4;
  --foreground: #F8F8F2;
  --selection:  #44475A;

  --cyan:       #8BE9FD;
  --green:      #50FA7B;
  --orange:     #FFB86C;
  --pink:       #FF79C6;
  --purple:     #BD93F9;
  --red:        #FF5555;
  --yellow:     #F1FA8C;

  /* Transparency */

  /** 30% of transparency **/
  --background-30: rgba(40,42,54,0.2);
  --comment-30:    rgba(98,114,164,0.2);
  --foreground-30: rgba(248,248,242,0.2);
  --selection-30:  rgba(68,71,90,0.2);

  --cyan-30:       rgba(139,233,253,0.2);
  --green-30:      rgba(80,250,123,0.2);
  --orange-30:     rgba(255,184,108,0.2);
  --pink-30:       rgba(255,121,198,0.2);
  --purple-30:     rgba(189,147,249,0.2);
  --red-30:        rgba(255,85,85,0.2);
  --yellow-30:     rgba(241,250,140,0.2);

  /** 40% of transparency **/
  --background-40: rgba(40,42,54,0.4);
  --comment-40:    rgba(98,114,164,0.4);
  --foreground-40: rgba(248,248,242,0.4);
  --selection-40:  rgba(68,71,90,0.4);

  --cyan-40:       rgba(139,233,253,0.4);
  --green-40:      rgba(80,250,123,0.4);
  --orange-40:     rgba(255,184,108,0.4);
  --pink-40:       rgba(255,121,198,0.4);
  --purple-40:     rgba(189,147,249,0.4);
  --red-40:        rgba(255,85,85,0.4);
  --yellow-40:     rgba(241,250,140,0.4);
}
pre::-webkit-scrollbar 
{
  width: 14px;
}
pre::-webkit-scrollbar-track 
{
  background-color: #6272A4;
  background-color: var(--comment);
  border-radius: 0px;
}
pre::-webkit-scrollbar-thumb 
{
  background-color: #BD93F9;
  background-color: var(--purple);
  border-radius: 0px;
}
/* Selection */
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection 
{
  text-shadow: none;
  background-color: #44475A;
  background-color: var(--selection);
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection 
{
  text-shadow: none;
  background-color: #44475A;
  background-color: var(--selection);
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection 
{
  text-shadow: none;
  background-color: #44475A;
  background-color: var(--selection);
}
/* Line numbers */
pre.line-numbers 
{
  position: relative;
  padding-left: 3.8em;
  counter-reset: linenumber;
}
pre.line-numbers > code 
{
  position: relative;
  white-space: inherit;
}
.line-numbers .line-numbers-rows 
{
  position: absolute;
  pointer-events: none;
  top: 0;
  font-size: 100%;
  left: -3.8em;
  width: 3em; /* works for line-numbers below 1000 lines */
  letter-spacing: -1px;
  border-right: 1px solid #999;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.line-numbers-rows > span 
{
  pointer-events: none;
  display: block;
  counter-increment: linenumber;
}
.line-numbers-rows > span:before 
{
  content: counter(linenumber);
  color: #999;
  display: block;
  padding-right: 0.8em;
  text-align: right;
}
/* Toolbar for copying */
div.code-toolbar 
{
  position: relative;
}
div.code-toolbar > .toolbar 
{
  position: absolute;
  top: 0.3em;
  right: 0.2em;
  -webkit-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}
div.code-toolbar:hover > .toolbar 
{
  opacity: 1;
}
div.code-toolbar > .toolbar .toolbar-item 
{
  display: inline-block;
  padding-right: 20px;
}
div.code-toolbar > .toolbar a 
{
  cursor: pointer;
}
div.code-toolbar > .toolbar button 
{
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  -webkit-user-select: none; /* for button */
  -moz-user-select: none;
  -ms-user-select: none;
}
div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button,
div.code-toolbar > .toolbar span 
{
  color: #F8F8F2;
  color: var(--foreground);
  font-size: 0.8em;
  padding: 0.5em;
  background: #6272A4;
  background: var(--comment);
  border-radius: 0.5em;
}
div.code-toolbar > .toolbar a:hover,
div.code-toolbar > .toolbar a:focus,
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar button:focus,
div.code-toolbar > .toolbar span:hover,
div.code-toolbar > .toolbar span:focus 
{
  color: inherit;
  text-decoration: none;
  background-color: #50FA7B;
  background-color: var(--green);
}
/* Remove text shadow for printing */
@media print 
{
  code[class*="language-"],
  pre[class*="language-"] 
  {
    text-shadow: none;
  }
}
code[class*="language-"],
pre[class*="language-"] 
{
  color: #F8F8F2;
  color: var(--foreground);
  background: #282A36;
  background: var(--background);
  text-shadow: none;
  font-family: PT Mono, Consolas, Monaco, "Andale Mono", "Ubuntu Mono",
    monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  hyphens: none;
}
/* Code blocks */
pre[class*="language-"] 
{
  background: #282A36;
  background: var(--background);
  border-radius: 0.5em;
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  height: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] 
{
  background: #282A36;
  background: var(--background);
}
/* Inline code */
:not(pre) > code[class*="language-"] 
{
  padding: 4px 7px;
  border-radius: 0.3em;
  white-space: normal;
}
/* Code box limit */
.limit-300
{
  height: 300px !important;
}
.limit-300
{
  height: 400px !important;
}
.limit-500
{
  height: 500px !important;
}
.limit-600
{
  height: 600px !important;
}
.limit-700
{
  height: 700px !important;
}
.limit-800
{
  height: 800px !important;
}
.language-css
{
  color: #BD93F9;
  color: var(--purple);
}
.token 
{
  color: #FF79C6;
  color: var(--pink);
}
.language-css .token 
{
  color: #FF79C6;
  color: var(--pink);
}
.token.script
{
  color: #F8F8F2;
  color: var(--foreground);
}
.token.bold 
{
  font-weight: bold;
}
.token.italic 
{
  font-style: italic;
}
.token.atrule, .token.attr-name, .token.attr-value 
{
  color: #50FA7B;
  color: var(--green);
}
.language-css .token.atrule 
{
  color: #BD93F9;
  color: var(--purple);
}
.language-html .token.attr-value, .language-markup .token.attr-value 
{
  color: #F1FA8C;
  color: var(--yellow);
}
.token.boolean 
{
  color: #BD93F9;
  color: var(--purple);
}
.token.builtin, .token.class-name 
{
  color: #8BE9FD;
  color: var(--cyan);
}
.token.comment 
{
  color: #6272A4;
  color: var(--comment);
}
.token.constant 
{
  color: #BD93F9;
  color: var(--purple);
}
.language-javascript .token.constant 
{
  color: #FFB86C;
  color: var(--orange);
  font-style: italic;
}
.token.entity 
{
  color: #FF79C6;
  color: var(--pink);
}
.language-css .token.entity 
{
  color: #50FA7B;
  color: var(--green);
}
.language-html .token.entity.named-entity
{
  color: #BD93F9;
  color: var(--purple);
}
.language-html .token.entity:not(.named-entity) 
{
  color: #FF79C6;
  color: var(--pink);
}
.language-markup .token.entity.named-entity
{
  color: #BD93F9;
  color: var(--purple);
}
.language-markup .token.entity:not(.named-entity) 
{
  color: #FF79C6;
  color: var(--pink);
}
.token.function 
{
  color: #50FA7B;
  color: var(--green);
}
.language-css .token.function 
{
  color: #8BE9FD;
  color: var(--cyan);
}
.token.important, .token.keyword 
{
  color: #FF79C6;
  color: var(--pink);
}
.token.prolog 
{
  color: #F8F8F2;
  color: var(--foreground);
}
.token.property 
{
  color: #FFB86C;
  color: var(--orange);
}
.language-css .token.property 
{
  color: #8BE9FD;
  color: var(--cyan);
}
.token.punctuation 
{
  color: #FF79C6;
  color: var(--pink);
}
.language-css .token.punctuation
{
  color: #FFB86C;
  color: var(--orange);
}
.language-html .token.punctuation, .language-markup .token.punctuation 
{
  color: #F8F8F2;
  color: var(--foreground);
}
.token.selector 
{
  color: #FF79C6;
  color: var(--pink);
}
.language-css .token.selector 
{
  color: #50FA7B;
  color: var(--green);
}
.token.regex 
{
  color: #FF5555;
  color: var(--red);
}
.language-css .token.rule:not(.atrule)
{
  color: #F8F8F2;
  color: var(--foreground);
}
.token.string 
{
  color: #F1FA8C;
  color: var(--yellow);
}
.token.tag 
{
  color: #FF79C6;
  color: var(--pink);
}
.token.url 
{
  color: #8BE9FD;
  color: var(--cyan);
}
.language-css .token.url 
{
  color: #FFB86C;
  color: var(--orange);
}
.token.variable 
{
  color: #6272A4;
  color: var(--comment);
}
.token.number 
{
  color: rgba(189, 147, 249, 1);
}
.token.operator 
{
  color: rgba(139, 233, 253, 1);
}
.token.char 
{
  color: rgba(255, 135, 157, 1);
}
.token.symbol 
{
  color: rgba(255, 184, 108, 1);
}
.token.deleted 
{
  color: #e2777a;
}
.token.namespace 
{
  color: #e2777a;
}
/* Line Highlighter */
.highlight-line
{
  color: inherit;
  display: inline-block;
  text-decoration: none;

  border-radius: 4px;
  padding: 2px 10px;
}
.highlight-line:empty:before
{
  content: " ";
}
.highlight-line:not(:last-child)
{
  min-width: 100%;
}
.highlight-line .highlight-line:not(:last-child)
{
  min-width: 0;
}
.highlight-line-isdir
{
  color: #F8F8F2;
  color: var(--foreground);
  background-color: rgba(68,71,90,0.2);
  background-color: var(--selection-30);
}
.highlight-line-active
{
  background-color: rgba(98,114,164,0.2);
  background-color: var(--comment-30);
}
.highlight-line-add
{
  background-color: rgba(80,250,123,0.2);
  background-color: var(--green-30);
}
.highlight-line-remove
{
  background-color: rgba(255,85,85,0.2);
  background-color: var(--red-30);
}
/* Diff Highlighting */
.token.deleted {
  background-color: rgba(255, 85, 85, 0.5);
}
.token.inserted {
  background-color: rgba(80, 250, 123, 0.2);
}
/* Make the + and - characters unselectable for copy/paste */
.token.prefix.unchanged,
.token.prefix.inserted,
.token.prefix.deleted {
  -webkit-user-select: none;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
}
/* Inline Code Blocks */
:not(pre) > code {
  background: #282A36;
  background: var(--background);
  padding: 4px 7px;
  border-radius: 0.3em;
  white-space: normal;
  color: #F8F8F2;
  color: var(--foreground);
  text-shadow: none;
  font-family: PT Mono, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono',
    monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
     tab-size: 4;
  hyphens: none;
}