:root {
  --purps: #8000ff;
  --candy: #ff007a;
  --white: #ffffff;

  --overlay: #000000cc;
  --gray-bq: #6e6e6e;
  --gray-g1: #222222;
  --gray-g2: #444444;
  --gray-g3: #666666;
  --gray-g4: #888888;
  --gray-g4a: #999999;
  --gray-g5: #c4c4c4;
  --gray-g6: #e2e2e2;
  --gray-g7: #f0f0f0;
  --gray-g8: #f8f8f8;

  --warning-red-extra: #ffe5e5;
  --text-candy: #e5006e;
  --primary-warning: #d60404;
  --text-purps: #6600cc;
  --semantic-surface-light-primary-2: #ecd9ff;
  --purps-level-10: #f3e9ff;
  --purps-level-20: #e6ccff;
  --purps-400: #9933ff;
  --purps-300: #b266ff;
  --purps-surface-bg: #f8f6ff;
  --purps-dark-tone: #306;
  --text-okay-green-3: #08813f;

  --bg-primary: #1f003f;
  --bg-dark: #150228;

  --nav-height: 120px; /* 50 margin + 70 height */
  --side-margin: 16px;

  --display-1-font-family: "halyard-display";
  --display-1-font-size: 42px;
  --display-1-font-style: normal;
  --display-1-font-weight: 500;
  --display-1-line-height: 1.3;

  --display-2-font-family: "halyard-display";
  --display-2-font-size: 60px;
  --display-2-font-style: normal;
  --display-2-font-weight: 500;
  --display-2-line-height: 72px;

  --display-3-font-family: "halyard-display";
  --display-3-font-size: 48px;
  --display-3-font-style: normal;
  --display-3-font-weight: 500;
  --display-3-line-height: 54px;

  --display-regular-font-family: "halyard-display";
  --display-regular-font-size: 36px;
  --display-regular-font-style: normal;
  --display-regular-font-weight: 500;
  --display-regular-line-height: 44px;

  --heading-1-font-family: "halyard-display";
  --heading-1-font-size: 42px;
  --heading-1-font-style: normal;
  --heading-1-font-weight: 500;
  --heading-1-line-height: 52px;

  --heading-1-mweb-font-family: "halyard-display";
  --heading-1-mweb-font-size: 32px;
  --heading-1-mweb-font-style: normal;
  --heading-1-mweb-font-weight: 500;
  --heading-1-mweb-line-height: 38px;

  --heading-2-font-family: "halyard-display";
  --heading-2-font-size: 32px;
  --heading-2-font-style: normal;
  --heading-2-font-weight: 500;
  --heading-2-line-height: 40px;

  --heading-2-mweb-font-family: "halyard-display";
  --heading-2-mweb-font-size: 24px;
  --heading-2-mweb-font-style: normal;
  --heading-2-mweb-font-weight: 500;
  --heading-2-mweb-line-height: 32px;

  --heading-3-font-family: "halyard-display";
  --heading-3-font-size: 24px;
  --heading-3-font-style: normal;
  --heading-3-font-weight: 500;
  --heading-3-line-height: 30px;

  --heading-3-mweb-font-family: "halyard-display";
  --heading-3-mweb-font-size: 20px;
  --heading-3-mweb-font-style: normal;
  --heading-3-mweb-font-weight: 500;
  --heading-3-mweb-line-height: 24px;

  --heading-4-font-family: "halyard-display";
  --heading-4-font-size: 18px;
  --heading-4-font-style: normal;
  --heading-4-font-weight: 500;
  --heading-4-line-height: 24px;

  --subheading-1-font-family: "halyard-text";
  --subheading-1-font-size: 16px;
  --subheading-1-font-style: normal;
  --subheading-1-font-weight: 500;
  --subheading-1-line-height: 20px;

  --subheading-2-font-family: "halyard-text";
  --subheading-2-font-size: 14px;
  --subheading-2-font-style: normal;
  --subheading-2-font-weight: 500;
  --subheading-2-line-height: 20px;

  --para-1-font-family: "halyard-text";
  --para-1-font-size: 20px;
  --para-1-font-style: normal;
  --para-1-font-weight: 300;
  --para-1-line-height: 32px;

  --para-2-font-family: "halyard-text";
  --para-2-font-size: 17px;
  --para-2-font-style: normal;
  --para-2-font-weight: 300;
  --para-2-line-height: 28px;

  --quote-font-family: "halyard-display";
  --quote-font-size: 24px;
  --quote-font-style: normal;
  --quote-font-weight: 300;
  --quote-line-height: 36px;

  --quote-mweb-font-family: "halyard-display";
  --quote-mweb-font-size: 22px;
  --quote-mweb-font-style: normal;
  --quote-mweb-font-weight: 300;
  --quote-mweb-line-height: 32px;

  --quote-1-font-family: "halyard-text";
  --quote-1-font-size: 20px;
  --quote-1-font-style: italic;
  --quote-1-font-weight: 300;
  --quote-1-line-height: 32px;

  --quote-1-mweb-font-family: "halyard-text";
  --quote-1-mweb-font-size: 17px;
  --quote-1-mweb-font-style: italic;
  --quote-1-mweb-font-weight: 300;
  --quote-1-mweb-line-height: 28px;

  --caption-font-family: "halyard-text";
  --caption-font-size: 15px;
  --caption-font-style: normal;
  --caption-font-weight: 500;
  --caption-line-height: 20px;

  --caption-mweb-font-family: "halyard-text";
  --caption-mweb-font-size: 12px;
  --caption-mweb-font-style: normal;
  --caption-mweb-font-weight: 500;
  --caption-mweb-line-height: 16px;

  --display-28-36-font-family: "halyard-display";
  --display-28-36-font-size: 28px;
  --display-28-36-font-style: normal;
  --display-28-36-font-weight: 500;
  --display-28-36-line-height: 36px;

  --display-1: var(--display-1-font-style) var(--display-1-font-weight)
    var(--display-1-font-size) / var(--display-1-line-height)
    var(--display-1-font-family);

  --display-2: var(--display-2-font-style) var(--display-2-font-weight)
    var(--display-2-font-size) / var(--display-2-line-height)
    var(--display-2-font-family);

  --display-regular: var(--display-regular-font-style)
    var(--display-regular-font-weight) var(--display-regular-font-size) /
    var(--display-regular-line-height) var(--display-regular-font-family);

  --display-3: var(--display-3-font-style) var(--display-3-font-weight)
    var(--display-3-font-size) / var(--display-3-line-height)
    var(--display-3-font-family);

  --heading-1: var(--heading-1-font-style) var(--heading-1-font-weight)
    var(--heading-1-font-size) / var(--heading-1-line-height)
    var(--heading-1-font-family);

  --heading-2: var(--heading-2-font-style) var(--heading-2-font-weight)
    var(--heading-2-font-size) / var(--heading-2-line-height)
    var(--heading-2-font-family);

  --heading-3: var(--heading-3-font-style) var(--heading-3-font-weight)
    var(--heading-3-font-size) / var(--heading-3-line-height)
    var(--heading-3-font-family);

  --heading-4: var(--heading-4-font-style) var(--heading-4-font-weight)
    var(--heading-4-font-size) / var(--heading-4-line-height)
    var(--heading-4-font-family);

  --heading-1-mweb: var(--heading-1-mweb-font-style)
    var(--heading-1-mweb-font-weight) var(--heading-1-mweb-font-size) /
    var(--heading-1-mweb-line-height) var(--heading-1-mweb-font-family);

  --heading-2-mweb: var(--heading-2-mweb-font-style)
    var(--heading-2-mweb-font-weight) var(--heading-2-mweb-font-size) /
    var(--heading-2-mweb-line-height) var(--heading-2-mweb-font-family);

  --heading-3-mweb: var(--heading-3-mweb-font-style)
    var(--heading-3-mweb-font-weight) var(--heading-3-mweb-font-size) /
    var(--heading-3-mweb-line-height) var(--heading-3-mweb-font-family);

  --subheading-1: var(--subheading-1-font-style) var(--subheading-1-font-weight)
    var(--subheading-1-font-size) / var(--subheading-1-line-height)
    var(--subheading-1-font-family);

  --subheading-2: var(--subheading-2-font-style) var(--subheading-2-font-weight)
    var(--subheading-2-font-size) / var(--subheading-2-line-height)
    var(--subheading-2-font-family);

  --para-xl: var(--para-xl-font-style) var(--para-xl-font-weight)
    var(--para-xl-font-size) / var(--para-xl-line-height)
    var(--para-xl-font-family);

  --para-1: var(--para-1-font-style) var(--para-1-font-weight)
    var(--para-1-font-size) / var(--para-1-line-height)
    var(--para-1-font-family);

  --para-2: var(--para-2-font-style) var(--para-2-font-weight)
    var(--para-2-font-size) / var(--para-2-line-height)
    var(--para-2-font-family);

  --quote: var(--quote-font-style) var(--quote-font-weight)
    var(--quote-font-size) / var(--quote-line-height) var(--quote-font-family);

  --quote-1: var(--quote-1-font-style) var(--quote-1-font-weight)
    var(--quote-1-font-size) / var(--quote-1-line-height)
    var(--quote-1-font-family);

  --quote: var(--quote-font-style) var(--quote-font-weight)
    var(--quote-font-size) / var(--quote-line-height) var(--quote-font-family);

  --quote-mweb: var(--quote-mweb-font-style) var(--quote-mweb-font-weight)
    var(--quote-mweb-font-size) / var(--quote-mweb-line-height)
    var(--quote-mweb-font-family);

  --quote-1-mweb: var(--quote-1-mweb-font-style) var(--quote-1-mweb-font-weight)
    var(--quote-1-mweb-font-size) / var(--quote-1-mweb-line-height)
    var(--quote-1-mweb-font-family);

  --caption: var(--caption-font-style) var(--caption-font-weight)
    var(--caption-font-size) / var(--caption-line-height)
    var(--caption-font-family);

  --caption-mweb: var(--caption-mweb-font-style) var(--caption-mweb-font-weight)
    var(--caption-mweb-font-size) / var(--caption-mweb-line-height)
    var(--caption-mweb-font-family);

  --display-28-36: var(--display-28-36-font-style)
    var(--display-28-36-font-weight) var(--display-28-36-font-size) /
    var(--display-28-36-line-height) var(--display-28-36-font-family);
}

@media (min-width: 768px) {
  :root {
    --side-margin: 24px;
  }
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: halyard-text, arial, sans-serif;
  color: var(--gray-g2);
  overscroll-behavior-x: none;
}

html {
  min-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

body {
  min-width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  position: relative;
  overscroll-behavior-y: auto;
}

footer {
  margin-top: auto;
}

/* DESIGN SYSTEM */
/* ==================== */

.inline-block {
  display: inline-block;
}

a {
  color: var(--text-candy);
  text-decoration: underline;
}

.post__meta a:hover::after,
span a:hover::after,
h4 a:hover::after,
p a:hover::after {
  font-size: smaller;
}

h1 {
  font: var(--heading-1);
}

h2 {
  font: var(--heading-2);
  font-family: "halyard-display-variable", sans-serif;
  font-variation-settings: "wght" 500;
  margin: 20px 0px 8px 0px;
}

h3,
h4 {
  font: var(--heading-3);
  font-family: "halyard-display-variable", sans-serif;
  font-variation-settings: "wght" 500;
  margin: 20px 0px 8px;
}

p,
ol,
ul,
li {
  font: var(--para-1);
}

hr {
  margin: 1.6rem 0;
  border: 0;
  border-top: 1px solid var(--gray-g5);
}

mark {
  background-color: #eedeff;
}

blockquote {
  font: var(--quote-1);
  border-left: 2px solid var(--gray-g2);
  padding: 0px 0px 0px 24px;
  margin: 36px 0;
  text-align: start;
  color: var(--gray-g2);
}

blockquote.kg-blockquote-alt {
  font: var(--quote);
  font-family: "halyard-display-variable", sans-serif;
  font-variation-settings: "wght" 300;
  margin: 36px 0;
  color: var(--gray-bq);
  border-left: none;
  padding: 0 48px;
  text-align: left;
}

@media screen and (max-width: 767px) {
  h1 {
    font: var(--heading-1-mweb);
  }

  h2 {
    font: var(--heading-2-mweb);
    font-family: "halyard-display-variable", sans-serif;
    font-variation-settings: "wght" 500;
    margin: 20px 0px 8px 0px;
  }

  h3,
  h4 {
    font: var(--heading-3-mweb);
    font-family: "halyard-display-variable", sans-serif;
    font-variation-settings: "wght" 500;
    margin: 20px 0px 8px 0px;
  }

  p,
  ol,
  ul,
  li {
    font: var(--para-2);
  }

  blockquote {
    font: var(--quote-1-mweb);
  }

  blockquote.kg-blockquote-alt {
    font: var(--quote-mweb);
    font-family: "halyard-display-variable", sans-serif;
    font-variation-settings: "wght" 300;
    padding: 0 12px;
  }
}

iframe {
  width: 100%;
  height: 100%;
}

.display-300-24 {
  font-family: "halyard-display-variable", sans-serif;
  font-variation-settings: "wght" 300;
  font-size: 24px;
  line-height: 33.6px;
}

.display-300 {
  font-family: "halyard-display-variable", sans-serif;
  font-variation-settings: "wght" 300;
}

.display-400 {
  font-family: "halyard-display-variable", sans-serif;
  font-variation-settings: "wght" 400;
}

.display-500 {
  font-family: "halyard-display-variable", sans-serif;
  font-variation-settings: "wght" 500;
}

.display-500 {
  font-family: "halyard-display-variable", sans-serif;
  font-variation-settings: "wght" 500;
}

.text-400 {
  font-family: "halyard-text-variable", sans-serif;
  font-variation-settings: "wght" 400;
}