:root {
  --u: 16px;
  /* Color */
  --co-pri: #001fcc;
  --co-sec: hsl(228, 54%, 10%);
  --co-text: hsl(240, 6%, 10%);
  --co-high: hsl(216, 20%, 95.1%);
  --co-fn: hsl(225, 8%, 90.2%);
  --co-dark: hsl(34, 4%, 66%);
  --co-white: hsl(0, 0%, 100%);
  --co-hlght: rgb(245, 235, 142);
  --co-hllow: rgba(245, 235, 142, 0.3);

  /* Text: LH ( Line Height) */

  --lh-reg: 1.5; /*Default */
  --lh-lrg: 1.55; /*Default */
  --lh-hln: calc(var(--lh-reg) / 1.65); /*Headline*/

  /* Text: FF ( Font Face ) */
  --ff-sans: "Manrope", Arial, sans-serif;
  --ff-seri: "Editorial", Georgia, serif;
  --ff-mono: "Recursive", monospace;

  /* Text: FW (Font Weight )*/
  --fw-lit: 300;
  --fw-reg: 400; /* Default */
  --fw-med: 600;
  --fw-hev: 700;
  --fw-bld: 800;
  /* Text: ST (Style) */
  --st-ital: italic;

  /* Text: CS (Convenience Style) */
  --cs-tny: var(--fw-reg) var(--fs-tiny) / var(--lh-reg) var(--ff-sans);
  --cs-lbl: var(--fw-reg) var(--fs-sml) / var(--lh-reg) var(--ff-sans);
  --cs-sml: var(--fw-reg) var(--fs-sml) / var(--lh-reg) var(--ff-seri);
  --cs-reg: var(--fw-reg) var(--fs-reg) / var(--lh-reg) var(--ff-sans);
  --cs-txt: var(--fw-reg) var(--fs-txt) / var(--lh-lrg) var(--ff-seri);
  --cs-cal: var(--fw-reg) var(--fs-big) / var(--lh-reg) var(--ff-seri);
  --cs-big: var(--fw-reg) var(--fs-big) / var(--lh-reg) var(--ff-sans);
  --cs-hg1: var(--fw-lit) var(--fs-med) / var(--lh-reg) var(--ff-sans);
  --cs-hg2: var(--fw-reg) var(--fs-med) / var(--lh-hln) var(--ff-seri);
  --cs-hg3: var(--fw-bld) var(--fs-big) / var(--lh-hln) var(--ff-sans);
  --cs-art: var(--fw-bld) var(--fs-med) / var(--lh-hln) var(--ff-seri);
  --cs-msv: var(--fw-bld) var(--fs-msv) / var(--lh-hln) var(--ff-seri);
  --cs-msv2: var(--fw-bld) var(--fs-hge) / var(--lh-hln) var(--ff-sans);
  --cs-meta: var(--fw-reg) var(--fs-sml) / var(--lh-reg) var(--ff-sans);

  /* Margin */
  --ma-reg: calc(1rem * var(--lh-reg));
  --ma-sml: calc(0.5rem * var(--lh-reg));
  --ma-tny: calc(0.2rem * var(--lh-reg));
  --ma-lrg: calc(2rem * var(--lh-reg));
  --ma-hge: calc(4rem * var(--lh-reg));
  /* Padding */
  --pd-reg: calc(1rem * var(--lh-reg));
  --pd-sml: calc(0.5rem * var(--lh-reg));
  --pd-lrg: calc(2rem * var(--lh-reg));
  --pd-hge: calc(4rem * var(--lh-reg));
}

html {
  font-size: var(--u); /* Everything happens here*/
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  background-color: var(--co-high);
  line-height: var(--lh-reg);
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-behavior: smooth;
  color: var(--co-text);
}

body,
main {
  width: calc(100vw - 44px);
  position: relative;
}

body > main,
#document {
  width: 100%;
  z-index: 1;
  transition: filter 350ms, opacity 350ms;
  position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-weight: var(--fw-reg);
}

img {
  display: block;
}

strong {
  font-weight: var(--fw-hev);
}

em {
  font-style: var(--st-ital);
}

a {
  position: relative;
  color: var(--co-pri);
  text-decoration: none;
}

code,
pre {
  font-family: var(--ff-mono);
}

/* Global Logo  */
#ndc-logo {
  width: 238px;
  position: absolute;
  top: 0;
  z-index: 30;
  padding: var(--ma-reg);
}

#ndc-logo a {
  color: var(--co-high);
}

body.tag-streams > #ndc-logo {
  background: rgba(0, 0, 0, 1);
}

body.tag-streams > #ndc-logo a {
  background: none;
  color: var(--co-high) !important;
}

#menu #ndc-logo,
.post-template #ndc-logo,
.page-template #ndc-logo {
  background: var(--co-high);
}
#menu #ndc-logo a,
.post-template #ndc-logo a,
.page-template #ndc-logo a,
.author-template #ndc-logo a,
.tag-template #ndc-logo a {
  color: var(--co-pri);
}

#ndc-logo a {
  display: block;
  line-height: 0;
}

/* Common layout stuff */
#essay {
  padding: calc(2rem * var(--lh-reg)) calc(1rem * var(--lh-reg));
}

/* Ghost items */
.kg-button-card {
  font-family: var(--ff-sans);
}

.kg-button-card a {
  padding-top: 2px;
}

/* Error page */
body.is-error {
  max-height: 100vh;
  overflow: hidden;
  border: 1px solid var(--co-text);
  border-right: none;
}
body.is-error > #ndc-logo a {
  color: var(--co-pri);
  transform: scaleY(-1) scaleX(-1);
}
body.is-error #ndc-content.error {
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
body.is-error #ndc-content.error svg {
  width: 100%;
  height: 100%;
  position: absolute;
}

body.is-error #ndc-content.error svg line {
  stroke: var(--co-text);
  stroke-width: 1;
}

body.is-error #ndc-content #error-content {
  font: var(--cs-hg2);
  text-transform: uppercase;
  background-color: var(--co-high);
  z-index: 20;
  padding: var(--pd-lrg);
  border: 1px solid var(--co-text);
  position: relative;
}

body.is-error #ndc-content #error-content:before {
  content: " ";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  background-image: url("../images/individual-plus-animated.gif");
  background-size: cover;
  background-position: right;
  mix-blend-mode: difference;
}

body.is-error #ndc-content #error-content span,
body.is-error #ndc-content #error-content a {
  display: block;
  mix-blend-mode: normal;
  line-height: 1.1;
}

body.is-error #ndc-content #error-content span.statusCode {
  font-size: 200%;
  line-height: 1.2;
}

body.is-error #ndc-content #error-content span.options {
  margin-bottom: var(--ma-reg);
}
body.is-error #ndc-content #error-content a {
  margin-bottom: var(--ma-sml);
}