@layer reset {
  html {
    color-scheme: light dark;
    tab-size: 2;
    word-break: break-word;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  :where(html) {
    scrollbar-gutter: stable;
  }
  body {
    margin: 0;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
    margin-block-start: 0;
  }
  p,
  li,
  dd {
    text-wrap: pretty;
    max-inline-size: 88ch;
  }
  a {
    color: oklch(68% 0.17 228deg);
    text-underline-offset: 2px;
  }
  a:not(:is(:hover, :focus)) {
    text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);
  }
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    inset-block-end: -0.25em;
  }
  sup {
    inset-block-start: -0.5em;
  }
  ul,
  ol,
  dl {
    margin: 0;
    padding: 0;
    list-style-position: inside;
  }
  ul ul,
  ul ol,
  ul dl,
  ol ul,
  ol ol,
  ol dl,
  dl ul,
  dl ol,
  dl dl {
    padding-inline-start: 2ch;
  }
  img,
  video,
  iframe {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
    border-style: none;
  }
  figure {
    inline-size: fit-content;
    margin-inline: auto;
  }
  figcaption {
    contain: inline-size;
    font-size: 90%;
  }
  input,
  select,
  textarea,
  button {
    font: inherit;
    /* FUTURE: appearance: base; */
  }
  label {
    display: block;
  }
  input:not(:where([type=submit],
  [type=checkbox],
  [type=radio],
  [type=button],
  [type=reset])) {
    inline-size: 100%;
  }
  button,
  input:where([type=submit],
  [type=reset],
  [type=button]) {
    background: CanvasText;
    color: Canvas;
    border: 1px solid transparent;
  }
  textarea {
    field-sizing: content;
    min-block-size: 5lh;
    inline-size: 100%;
    max-inline-size: 100%;
  }
  pre,
  code,
  kbd,
  samp {
    font-family: ui-monospace, SFMono-Regular, monospace;
  }
  svg {
    fill: currentColor;
  }
  [aria-disabled=true i],
  [disabled] {
    cursor: not-allowed;
  }
  [hidden] {
    display: none !important;
  }
  [disabled],
  label:has(input[disabled]) {
    opacity: 0.5;
  }
  [disabled] [disabled],
  label:has(input[disabled]) [disabled] {
    opacity: 1;
  }
  pre {
    white-space: pre-wrap;
    background: CanvasText;
    color: Canvas;
    padding: 1.5rem;
  }
  hr {
    border-style: solid;
    border-width: 1px 0 0;
    color: inherit;
    height: 0;
    overflow: visible;
    margin-block: 2.5rem;
  }
  :target {
    scroll-margin: 3rlh;
  }
  table {
    caption-side: bottom;
    border-collapse: collapse;
  }
  table td {
    font-size: 90%;
  }
  table td,
  table th {
    word-break: normal;
    border: 1px solid gray;
    padding: 0.5rem;
  }
  [role=region][aria-labelledby][tabindex] {
    overflow: auto;
  }
  caption {
    font-size: 90%;
  }
  .screenreader-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  :focus-visible {
    outline-offset: 2px;
  }
  @media (prefers-reduced-motion: no-preference) {
    @view-transition {
      navigation: auto;
    }
    html {
      interpolate-size: allow-keywords;
    }
    html:focus-within {
      scroll-behavior: smooth;
    }
  }
}
@font-face {
  font-family: "EBGaramond";
  src: url("/assets/fonts/EBGaramond-VariableFont_wght.ttf");
}
@font-face {
  font-family: "Cleric";
  src: url("/assets/fonts/cleric.otf");
}
@media (min-width: 841px) {
  html {
    font-size: 16px;
  }
}
@media (max-width: 840px) {
  html {
    font-size: 10.5px;
  }
}

*.hidden {
  display: none;
}

body {
  background: #fffbf5;
  color: #383b66;
  font-family: EBGaramond;
}

body::-webkit-scrollbar {
  width: 1rem;
}

body::-webkit-scrollbar-track {
  background: #fffbf5;
  border-radius: 8px;
}

body::-webkit-scrollbar-thumb {
  background: #dfdfdf;
  border-radius: 8px;
  border: 3px solid #fffbf5;
  transition: all 0.3s ease-in-out;
}
body::-webkit-scrollbar-thumb:hover {
  background: #383b66;
  transition: all 0.3s ease-in-out;
}

@supports not selector(::-webkit-scrollbar) {
  body {
    scrollbar-color: #dfdfdf #fffbf5;
  }
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Cleric;
  font-weight: 500;
}

h1 {
  font-size: 4rem;
  margin-bottom: 0rem;
}

p,
div.verse,
ul.plugs {
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 2%;
  margin-bottom: 1.5rem;
}

div.verse,
ul.plugs {
  text-align: center;
}

ul.plugs {
  list-style: none;
  font-family: Cleric;
}
ul.plugs li {
  margin-bottom: 1rem;
}
ul.plugs li a {
  text-decoration: none;
  color: #383b66;
}

div.verse p {
  font-size: 1.5rem;
}

@media (max-width: 840px) {
  div.main {
    width: 100%;
  }
}
@media (min-width: 841px) {
  div.main {
    max-width: 80rem;
    display: flex;
    margin: 0 auto 0;
  }
}
div.main article {
  max-width: 60rem;
  padding-right: 2rem;
  margin: 0 auto 0;
}
@media (max-width: 840px) {
  div.main article {
    padding: 2rem;
  }
}
div.main article section {
  margin-bottom: 5rem;
}
div.main article section:nth-child(1) {
  padding-top: 20vh;
}
div.main article section h1,
div.main article section p {
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 840px) {
  div.main nav {
    z-index: 2;
    position: fixed;
    bottom: 0;
    background: #fffbf5;
    width: 100vw;
    padding: 1rem 1rem calc(env(safe-area-inset-bottom) + 1rem) 1rem;
    border-top: 1px solid #dfdfdf;
  }
  div.main nav ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  div.main nav ul li {
    margin: 0 0.5rem 0 0.5rem;
  }
}
@media (min-width: 841px) {
  div.main nav {
    max-height: calc(100vh - 1.5rem);
    align-content: flex-end;
    padding: 0 8rem 0 2rem;
    position: sticky;
    top: 0;
  }
  div.main nav ul {
    display: flex;
    flex-direction: column;
  }
  div.main nav ul li {
    margin: 0 0 1rem 0;
  }
}

nav {
  font-family: Cleric;
  font-size: 1.5rem;
}
nav ul {
  list-style: none;
}
nav ul li a {
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  color: #dfdfdf;
}
nav ul li a.active {
  color: #383b66;
}

div.graphic {
  overflow: hidden;
  margin: 0 auto 0 auto;
}
div.graphic:nth-child(1) {
  margin-bottom: 8rem;
}
div.graphic svg {
  position: relative;
  height: 100%;
}

div.blueberry {
  width: 14rem;
  height: 14rem;
}
div.blueberry svg {
  position: relative;
  height: 100%;
  animation: blueberryAnimation 2s steps(12) infinite;
}

div.family {
  width: 24rem;
  height: 24rem;
}

div.onion {
  width: 24rem;
  height: 24rem;
  margin-top: 8rem;
}

div.handprint {
  width: 24rem;
  height: 24rem;
}

div.hourglass {
  width: 16rem;
  height: 16rem;
}

div.james {
  width: 24rem;
  height: 24rem;
}

@keyframes blueberryAnimation {
  from {
    margin-left: 0%;
  }
  to {
    margin-left: -1200%;
  }
}
div.scribbleContainer {
  position: relative;
  text-align: center;
  margin: 0 auto 0;
  height: 16rem;
}
div.scribbleContainer svg {
  height: 100%;
}

svg:not(:root) {
  overflow: visible;
}

.scribble {
  z-index: 1;
  transform-origin: center;
  mix-blend-mode: difference;
}

@keyframes scribbleGrow {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  100% {
    transform: matrix(2, 0, 0, 2, 0, 0);
  }
}