@font-face {
    font-family: "ivypresto";
    src: url("/fonts/ivy100.woff") format("woff");
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "ivypresto";
    src: url("/fonts/ivy100italic.woff") format("woff");
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: "Sohne-Leicht";
    src: url("/fonts/NHG-55.woff2") format("woff2");
    font-display: swap;
  }
  :root {
    --title: "ivypresto";
    --text: "Sohne-Leicht";
    --p: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
    --h4: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
    --resume: clamp(1.21rem, 0.69vw + 1.29rem, 1.43rem);
    --h3: clamp(2rem, 0.68vw + 1.83rem, 2.37rem);
    --h2: clamp(2.62rem, 0.89vw + 2.39rem, 3.11rem);
    --h2-5: clamp(3rem, 1vw + 3rem, 4.3rem);
    --h1-footer: clamp(11.3rem, 3.85vw + 10.34rem, 13.42rem);
    --h1: clamp(9.22rem, 3.14vw + 8.44rem, 10.3rem);
    --h1-5: clamp(6.82rem, 2.32vw + 6.24rem, 8.1rem);
    --h1-project: clamp(11.3rem, 3.85vw + 10.34rem, 13.42rem);

    --primary: #f5ddc7;
    --diff: #f5ddc7;
    --bg: #151212;
    --cusror: #f5ddc7;
    --placeholder: #201C1B;
    --accent: #f5ddc7;
    --white: #fff4ea;
    --black: #151212;

    /* --primary: #222;
    --diff: #f8ebdf;
    --bg: #f8ebdf;
    --cusror: #222;
    --placeholder: #30252118;
    --accent: #fff;
      --accent: #df4f36;
    --white: #fff;
    --black: #111; */
    --ls: -0.25px;
    --ratio: 1.414;
    --uni: calc(var(--ratio) * 1.414rem);
    --ratio-2: calc(var(--ratio) * var(--ratio));
  }
  /* @media (prefers-color-scheme: dark) {
    :root {    
      --primary: #f5ddc7;
      --diff: #f5ddc7;
      --bg: #151212;
      --cusror: #f5ddc7;
      --placeholder: #201C1B;
      --accent: #f5ddc7;
      --white: #fff4ea;
      --black: #151212;
    }
  } */
  .disable-scroll {
    overflow-y: hidden;
    overflow-x: hidden;
  }
  .x-scroll {
    overflow-x: scroll;
    overflow-y: hidden;
  }
  .w {
    padding-left: var(--uni);
    padding-right: var(--uni);
  }
  .w-0 {
    padding: 0 !important;
  }
  .work-padding {
    padding-left: var(--uni);
    padding-right: var(--uni);
  }
  .w-2 {
    padding-left: calc(var(--uni) * var(--ratio));
    padding-right: calc(var(--uni) * var(--ratio));
  }
  .w-3 {
    padding-left: calc(var(--uni) * var(--ratio-2));
    padding-right: calc(var(--uni) * var(--ratio-2));
  }
  .width-100 {
    width: 100%;
  }
  .vw-100 {
    width: 100vw;
  }
  .gap-25 {
    gap: 25px;
  }
  .gap-35 {
    gap: 35px;
  }
  .gap-1rem {
    gap: 1rem;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .flex {
    display: flex;
  }
  .col {
    display: flex;
    flex-direction: column;
  }
  .row {
    display: flex;
    flex-direction: row;
  }
  .center {
    align-items: center;
  }
  .start {
    align-items: flex-start;
  }
  .end {
    align-items: flex-end;
  }
  .space-bw {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: end;
  }
  .space-even {
    justify-content: space-evenly;
  }
  .dif {
    mix-blend-mode: difference;
  }
  .self-center {
    align-self: center;
  }
  .self-start {
    align-self: flex-start;
  }
  .self-end {
    align-self: flex-end;
  }
  .pointer-none {
    pointer-events: none;
  }
  /* .nowrap {
    white-space: nowrap !important;
  } */
  ::-moz-selection {
    background: var(--primary);
    color: var(--bg);
  }
  ::selection {
    background: var(--primary);
    color: var(--bg);
  }
  .nowrap {
    flex-wrap: nowrap !important;
  }
  @media (hover: none) {
    #cursor {
      display: none;
    }
  }
  @media (min-width: 769px) {
    body:hover > #cursor {
      opacity: 1;
    }
    #cursor {
      border: 1.5px solid var(--diff);
      mix-blend-mode: difference;
      border-radius: 1.2rem;
      height: 2.2rem;
      margin: auto;
      width: 2.2rem;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 10000;
      pointer-events: none;
      opacity: 0;
      transition: opacity 500ms ease;
    }
    #cursor-icon {
      font-size: 6px;
      line-height: 4px;
      opacity: 0;
      transition: opacity 400ms ease;
    }
    #cursor:not([data-type="project"]) > #cursor-icon {
      opacity: 1;
    }
  }
  #loader {
    position: fixed;
    margin: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    overflow: hidden !important;
    background-color: var(--white);
  }
  #loader h2 {
    white-space: nowrap;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--black);
    font-family: var(--title);
    font-style: normal;
  }
  .parent {
    height: 100%;
    padding: 0 3px;
    overflow-y: hidden;
    overflow-x: visible;
    display: block;
  }
  .reveal .parent .child {
    display: block;
  }
  .child plug {
    display: inline-block;
  }
  plug .child {
    display: inline-block;
  }
  .parent .child plug {
    display: inline-block;
  }
  p {
    text-align: justify;
    font-family: var(--text);
    font-weight: 500;
    font-style: normal;
    font-size: var(--p);
    line-height: 145%;
    letter-spacing: var(--ls);
  }
  h1 {
    line-height: var(--h1);
    font-size: var(--h1);
    font-family: var(--title);
    font-weight: 250;
    font-style: normal;
    color: var(--primary);
    letter-spacing: var(--ls);
  }
  h2 {
    font-size: var(--h2);
    font-family: var(--title);
    font-weight: 400;
    color: var(--primary);
  }
  h3 {
    line-height: 150%;
    font-size: var(--h3);
    font-family: var(--title);
    font-weight: 250;
    color: var(--primary);
  }
  h4 {
    white-space: nowrap;
    line-height: 145%;
    color: var(--primary);
    font-size: var(--h4);
    font-weight: 500;
    font-family: var(--text);
    text-transform: uppercase;
    letter-spacing: var(--ls);
  }
  spon {
    font-family: var(--title);
    font-style: italic;
    text-decoration: underline;
  }
  * {
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none !important;
    list-style: none !important;
  }
  html {
    overscroll-behavior: none;
    scroll-behavior: smooth;
  }
  body {
    overscroll-behavior: none;
    background: var(--bg);
    color: var(--primary);
    font-size: var(--p);
    font-family: var(--text);
    transition: 0.2s ease-in-out;
  }
  nav,
  #nav,
  #nav-home,
  #time {
    color: var(--diff);
    mix-blend-mode: difference;
  }
  nav {
    position: fixed;
    width: 94%;
    top: 4%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid var(--diff);
    will-change: filter;
    border-radius: 100px;
    backdrop-filter: blur(10px);
    /* -moz-backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); */

    margin-top: 3svh;
    z-index: 10;
    height: 7.5vh;
  }
  #nav {
    overflow: hidden;
    text-decoration: none;
  }
  #nav-home {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.2s ease-in-out;
    white-space: nowrap;
    text-transform: uppercase;
    font-family: var(--body);
    font-size: var(--p);
  }
  #nav-cluster {
    width: 20rem;
    overflow: hidden;
  }
  .nav-menu {
    width: clamp(12rem, 4vw + 12rem, 15rem);
  }
  nav button {
    transition: 0.2s ease-in-out;
    display: flex;
    position: relative;
    z-index: 100;
    background: transparent;
    border: none;
  }
  input[type="checkbox"] {
    display: none;
  }
  #copyright {
    margin: 1rem 0;
  }
  #capsule {
    display: block;
    border-radius: 2em;
    height: 2.4rem;
    line-height: 2.4rem;
    width: fit-content;
    padding: 0 1rem;
    border: none;
    background-color: transparent;
    border: 1px solid;
    color: var(--primary);
    text-align: center;
    text-decoration: none;
  }
  #cta {
    text-transform: uppercase;
    font-size: var(--h4);
    transition: 0.25s ease-in-out;
    display: block;
    border-radius: 2em;
    height: 3.4rem;
    line-height: 3.4rem;
    width: fit-content;
    padding: 0 2rem;
    border: none;
    background-color: var(--primary);
    color: var(--bg);
    text-align: center;
    text-decoration: none;
  }
  #cta:hover {
    background-color: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
  }
  #cta-alt {
    text-decoration: none;
    text-transform: uppercase;
    font-size: var(--h4);
    transition: 0.25s ease-in-out;
    display: block;
    border-radius: 2em;
    height: 3.4rem;
    line-height: 3.4rem;
    width: fit-content;
    padding: 0 2rem;
    border: 1px solid var(--primary);
    background-color: transparent;
    color: var(--primary) !important;
    text-align: center;
    text-decoration: none;
  }
  .copy {
    /* align-self: center; */
    position: relative;
    /* width: 80%; */
    font-family: var(--title);
    /* text-align: left; */
    font-size: var(--h2);
  }
  .char span {
    font-style: normal;
  }
  .word span {
    font-style: normal;
  }
  .split-parent {
    overflow: hidden;
  }
  .split-line {
    overflow: hidden;
  }
  #overlay-bg {
    position: fixed;
    top: 0;
    left: 0;
    height: 100svh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.309);
    z-index: 9;
  }
  #overlay {
    padding: 3rem;
    overflow: hidden !important;
    width: 50%;
    background-color: var(--white);
    height: 100%;
  }
  .social a {
    text-transform: uppercase;
    font-family: var(--text);
    font-size: var(--h4);
  }
  .menu-item,
  .social {
    display: block;
    overflow: hidden !important;
  }
  .menu-item a,
  .social a {
    display: block;
    text-decoration: none;
    color: var(--black);
  }
  #overlay-text {
    width: auto;
    margin: auto;
  }
  #overlay-text > * {
    font-size: clamp(5.65rem, 1.93vw + 5.17rem, 6.71rem);
    line-height: clamp(5.65rem, 1.93vw + 5.17rem, 6.71rem);
    overflow: hidden !important;
    font-family: var(--title);
    -webkit-transition: 1.5s;
    transition: 0.5s;
    white-space: nowrap;
  }
  .menu-item span {
    margin-right: 20px;
    font-size: 1.1rem;
  }
  #inactive {
    opacity: 0.2;
  }
  #overlay-text:hover > * {
    opacity: 0.2;
  }
  #overlay-text > *:hover {
    opacity: 1;
  }
  .overlay h4 {
    color: var(--black) !important;
  }
  #socials {
    width: 100%;
    flex-direction: row;
    margin-bottom: 1.5rem;
  }
  #overlay-bottom {
    align-items: center;
    flex-direction: column;
  }
  #bottom {
    bottom: 0;
    width: 100%;
    position: absolute;
  }
  #footer {
    background-color: transparent;
    mix-blend-mode: difference;
    opacity: 70%;
    z-index: 3;
    width: 100%;
    position: fixed;
    bottom: 3rem;
  }
  #footer h4 {
    mix-blend-mode: difference;
    /* color: var(--nav); */
  }
  * {
    scrollbar-width: auto;
    scrollbar-color: var(--primary) rgba(0, 0, 0, 0);
  }
  *::-webkit-scrollbar {
    display: none;
    width: 22px;
  }
  *::-webkit-scrollbar-track {
    background: transparent;
  }
  *::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
    border: 7px solid var(--bg);
  }
  ::-webkit-scrollbar-thumb {
    background-color: var(--primary);
    border-radius: 10px;
    border: 7px solid var(--bg);
  }
  .x-scroll::-webkit-scrollbar {
    display: none;
  }
  @media (max-width: 1440px) {
    :root {
      --h1: clamp(8rem, 3vw + 8rem, 9rem);
      --h1-5: clamp(5.4rem, 2.3vw + 4.9rem, 6.8rem);
      --h2-5: clamp(2.83rem, 0.96vw + 2.59rem, 3.36rem)
    }
    .copy {
      width: 100%;
    }
  }
  @media (max-width: 1100px) {
    :root {
      --h1-5: clamp(4.8rem, 1.9vw + 4.6rem, 6.3rem);
    }
  }
  @media (max-width: 1000px) {
    #overlay {
      width: 100%;
    }
    :root {
      --h1: clamp(6.82rem, 2.32vw + 6.24rem, 8.1rem);
      /* --h1-5: clamp(4.2rem, 1.4vw + 4.1rem, 5.3rem); */
      --h2-5: clamp(2.41rem, 0.82vw + 2.21rem, 2.86rem);
    }
    /* #nav-cluster {
      width: 100%;
    } */
  }
  @media (max-width: 915px) {
    :root {
      --h3: clamp(1.85rem, 0.63vw + 1.69rem, 2.19rem);
      --h1-project: clamp(9.64rem, 3.28vw + 8.82rem, 11.45rem);
    }
  }
  @media (max-width: 768px) {
    .w-3 {
      padding-left: calc(var(--uni) * var(--ratio));
      padding-right: calc(var(--uni) * var(--ratio));
    }
    #work {
      margin-top: 12svh;
    }
    #nav-project {
      display: none;
    }
    #cursor {
      display: none;
    }
    #time {
      display: none;
    }
    #nav-home {
      position: relative;
      top: 0; 
      left: 0;
      transform: translate(0);
    }
    ::-webkit-scrollbar {
      display: none;
    }
    body {
      max-width: 100% !important;
      overflow-x: hidden !important;
    }
    .site {
      width: 100%;
    }
    :root {
      --h1: clamp(5.65rem, 1.93vw + 5.17rem, 6.71rem);
      --h1-5: clamp(4.2rem, 1.4vw + 4.1rem, 5.3rem);
      --h1-project: clamp(8.81rem, 3vw + 8.06rem, 9.15rem);
      --h1-footer: clamp(6.82rem, 2.32vw + 6.24rem, 8.1rem);
      --h2-5: clamp(2rem, 0.68vw + 1.83rem, 2.37rem);
      --h3: clamp(1.7rem, 0.58vw + 1.56rem, 2.02rem);
    }
  }
  @media (max-width: 684px) {
    .w {
      padding-left: 0;
      padding-right: 0;
    }
    :root {
      --h1-5: clamp(3.25rem, 2.25vw + 3.52rem, 4.25rem);
      --h1: clamp(4.82rem, 1.64vw + 4.41rem, 5.73rem);
      --h1-project: clamp(7.99rem, 2.72vw + 7.31rem, 9.49rem);
    }
  }
  @media (max-width: 600px) {
    :root {
      --h1-5: clamp(3rem, 2vw + 3rem, 4rem);
      --h1: clamp(4.82rem, 1.64vw + 4.41rem, 5.73rem);
      --h1-project: clamp(6.2rem, 6.2vw + 5.7rem, 7.4rem);
    }
  }
  @media (max-width: 550px) {
    .w-2 {
      padding-left: calc(var(--uni) * 1);
      padding-right: calc(var(--uni) * 1);
    }
    .w-3 {
      padding-left: calc(var(--uni) * 0.75);
      padding-right: calc(var(--uni) * 0.75);
    }
  }
  @media (max-width: 527px) {
    :root {
      --h1-5: clamp(3rem, 2vw + 3rem, 4rem);
      --h1: clamp(4.61rem, 1.57vw + 4.35rem, 5.48rem);
    }
  }
  @media (max-width: 517px) {
    :root {
      --h1: clamp(4.51rem, 1.53vw + 4.32rem, 5.36rem);
    }
  }
  @media (max-width: 500px) {
    :root {
      --h1: clamp(3.8rem, 1.3vw + 4rem, 5.24rem);
      --h1-5: clamp(2.8rem, 1vw + 2.7rem, 5rem);
      --h1-project: clamp(5.65rem, 1.93vw + 5.17rem, 6.71rem);
    }
    .w-3 {
      padding-left: calc(var(--uni) * 0.55);
      padding-right: calc(var(--uni) * 0.55);
    }
  }
  @media (max-width: 450px) {
    /* nav,
    #nav,
    #nav-home,
    #time {
      backdrop-filter: blur(0px);
      -moz-backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
      color: var(--diff);
      mix-blend-mode: normal;
    } */
    #page-2 #cta {
      margin-top: 7rem;
    }
    :root {
      --h1-5: clamp(2.62rem, 0.89vw + 2.59rem, 3.5rem);
      --h1-project: clamp(4.82rem, 1.64vw + 4.41rem, 5.73rem);
    }
  }
  @media (max-width: 375px) {
    :root {
      --h1-project: clamp(4.41rem, 1.5vw + 4.3rem, 5.24rem);
      --h1: clamp(3rem, 2vw + 3rem, 4rem);
    }
  }