@font-face {
  font-family: BrandFont;
  src: url('Rosehot.ttf') format('truetype');
}
@font-face {
  font-family: StyledFont;
  src: url('BebasNeue-Regular.otf') format('opentype');
}
.brand {
  font-family: BrandFont, Arial, sans-serif;
}
.styled {
  font-family: StyledFont, Helvetica, sans-serif;
  font-size: 1.3em;
}
.guidance {
  font-family: Georgia, serif;
}

:root {
  --title-scale: 10em;
  --accent: #d6dfa5;
  --accent-fg: #354a4b;
  --accent-sh: #ffffffa0;
  --bg1: #716758;
  --bg2: #909285;
  --io: oklch(88.831% 0.07423 310.868);
  --fg1: oklch(0.9037 0 0);
  --fg2: oklch(96.002% 0.0356 113.986);
  --fg-inverse: oklch(0.1076 0 0);
  --sh: #151a1a;
  --stroke: oklch(25.906% 0.00488 39.13);
  --shade-hard: #222423;
  --shade: #2224248c;
  --border: rgb(0 0 0 / 20%);
  --border-inverse: rgb(255 255 255 / 70%);
}
@media (max-width: 800px) {
  :root {
    --title-scale: 6em;
    font-size: 0.8em;
  }
}

html, body {
  width: 100vw;
  height: 100%;
  margin: 0;
  padding: 0;
}
html::before {
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;

  background:
    radial-gradient(
      ellipse 100% 200% at left center,
      var(--bg2) 0%,
      var(--bg1) 80%, var(--bg1) 100%
    ),
    var(--bg1);

  /* keep it out of main paint work */
  will-change: transform;
  transform: translateZ(0);
  contain: paint;
  image-rendering:auto;
  backface-visibility:hidden;
}

body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  color: var(--fg2);
}

#scroll-top {
  z-index: 2;
  position: fixed;
  width: 100%;
  top: 0;
  display: flex;
  height: 80px;
  background-color: var(--shade-hard);
  border-bottom: 1px solid var(--border);
  flex-direction: row-reverse;
  align-items: center;
}
#preferences-toggle {
  border: none;
  background: none;
  appearance: none;
}
:root[data-dark="true"] #preferences-toggle img {
  filter: invert(1) brightness(2);
}
#preferences-toggle,
#preferences label {
  flex-shrink: 0;
  align-self: center;
}
#preferences {
  z-index: 3;
  color: var(--fg2);
  margin: 0;
}

/* Title */
#title-stack {
  position: relative;
  transition: padding-bottom 0.5s ease-in-out;
  white-space: nowrap;
  height: var(--title-scale);
  padding: 2em 0;
  margin: 0 auto;
}
#title, #title-stroke {
  z-index: 7;
  position: absolute;
  text-shadow: none;
  text-stroke: .1em transparent;
  -webkit-text-stroke: .1em transparent;
  transition: font-size 0.5s ease-in-out;
}
#title-stroke {
  z-index: 6;
  text-stroke-color: var(--stroke);
  -webkit-text-stroke-color: var(--stroke);
  mix-blend-mode: luminosity;
}
#title-stack a {
  color: var(--fg2);
}
#title-stack h1 {
  font-size: var(--title-scale);
  margin: auto;
  text-shadow: inherit;
  text-decoration: inherit;
  text-decoration-thickness: from-font;
  text-decoration-color: var(--accent);
}

#replication {
  z-index: 6;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  text-shadow: 0 2px var(--sh) !important;
  font-family: ArticleFont, "Times New Roman", times, serif;
  padding-bottom: 1em;
  margin: 0 auto;
}

/* Footer */
#footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: var(--shade);
  color: var(--fg2);
  font-size: 0.8em;
  padding-right: 4em;
}
#footer > * {
  position: relative;
  z-index: 6;
}

.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;
}