* {
  box-sizing: border-box;
}

/* Typography */

@font-face {
  font-display: block;
  font-family: Mori;
  font-style: normal;
  font-weight: 400;
  src: url(https://assets.codepen.io/16327/PPMori-Regular.woff) format("woff");
}

@font-face {
  font-display: block;
  font-family: Mori;
  font-style: normal;
  font-weight: 600;
  src: url(https://assets.codepen.io/16327/PPMori-SemiBold.woff) format("woff");
}

@font-face {
  font-display: block;
  font-family: Fraktion Mono;
  font-style: normal;
  font-weight: 400;
  src: url(https://assets.codepen.io/16327/PPFraktionMono-Bold.woff)
    format("woff");
}

:root {
  --color-shockingly-green: #0ae448;
  --color-just-black: #0e100f;
  --color-surface-white: #fffce1;
  --color-pink: #fec5fb;
  --color-shockingly-pink: #f100cb;
  --color-orangey: #ff8709;
  --color-lilac: #9d95ff;
  --color-lt-green: #abff84;
  --color-blue: #00bae2;
  --color-grey: #2c2c2c;
  --color-surface75: #bbbaa6;
  --color-surface50: #7c7c6f;
  --color-surface25: #42433d;
  --gradient-macha: linear-gradient(
    114.41deg,
    var(--color-shockingly-green) 20.74%,
    var(--color-lt-green) 65.5%
  );
  --gradient-orange-crush: linear-gradient(
    111.45deg,
    var(--color-orangey) 19.42%,
    #f7bdf8 73.08%
  );
  --gradient-lipstick: linear-gradient(
    165.72deg,
    #f7bdf8 21.15%,
    #cd237f 81.93%
  );
  --gradient-purple-haze: linear-gradient(
    153.58deg,
    #f7bdf8 32.25%,
    #2f3cc0 92.68%
  );
  --gradient-skyfall: linear-gradient(
    131.77deg,
    #0a157a 30.82%,
    #15bfe4 81.82%
  );
  --gradient-emerald-city: linear-gradient(
    166.9deg,
    var(--color-shockingly-green) 53.19%,
    #0085d0 107.69%
  );
  --gradient-summer-fair: linear-gradient(
    144.02deg,
    var(--color-blue) 4.56%,
    var(--color-pink) 72.98%
  );
  --color-core-green: #dfffd1;
  --color-core-green-lt: #f3ffee;
  --color-core-gradient: radial-gradient(
    89.08% 84.62% at 16.54% 78.46%,
    #fbfefa 0%,
    #c9f6b4 39.58%,
    #abff84 77.6%,
    #2fee65 100%
  );
  --color-core-button-gradient: linear-gradient(
    114.41deg,
    #0ae448 20.74%,
    #abff84 65.5%
  );
  --color-core-heading-gradient: linear-gradient(
      180deg,
      #d6ffc3 0%,
      rgba(214, 255, 195, 0) 100%
    ),
    #f3ffee;
  --color-core-intro-gradient: linear-gradient(
      144.5deg,
      #e8ffdd 65.09%,
      #7dea7b 122.73%
    ),
    linear-gradient(311.31deg, #7ef89e 36.08%, #e5ffd9 106.98%);
  --color-text-purple: #d2ceff;
  --color-text-purple-lt: #dfdcff;
  --color-text-gradient: radial-gradient(
    129.03% 100% at 120.97% 81.45%,
    #dfdcff 27.08%,
    #a69eff 100%
  );
  --color-svg-tangerine: #ffe3c7;
  --color-svg-tangerine-lt: #fff0e0;
  --color-svg-gradient: radial-gradient(
    70.77% 70.77% at 0% 70.77%,
    #ffd9b0 0%,
    #fd9f3b 80.73%,
    #ff8709 100%
  );
  --color-svg-heading-gradient: linear-gradient(
      180deg,
      #ffbd77 0%,
      rgba(254, 197, 251, 0) 100%
    ),
    #ffe4c7;
  --color-ui-blue: #bef3fe;
  --color-ui-blue-lt: #e1faff;
  --color-ui-blue-codeblk: #f6feff;
  --color-ui-text-gradient: linear-gradient(
    168.89deg,
    #fec5fb -21.3%,
    #00bae2 89.88%
  );
  --color-ui-code-blocktext-gradient: linear-gradient(
    142.91deg,
    #cef6ff 18.75%,
    #a6efff 54.93%
  );
  --color-ui-gradient: radial-gradient(
    78.77% 78.77% at 71.71% 30.77%,
    #f0fcff 0%,
    #9bedff 67.21%,
    #98ecff 76.04%,
    #5be1ff 84.9%,
    #00bae2 94.79%
  );
  --color-ui-gradient-background: linear-gradient(
    137.1deg,
    #ecfcff 27.5%,
    #a6efff 94.09%
  );
  --color-ui-gradient-flip-background: radial-gradient(
    140% 190% at 117.54% 131.12%,
    #f0fcff 0%,
    #9bedff 25.52%,
    #98ecff 42.71%,
    #5be1ff 60.94%,
    #00bae2 94.79%
  );
  --color-scroll-pink: #ffd7fd;
  --color-scroll-pink-lt: #ffe9fe;
  --color-scroll-gradient: linear-gradient(
    317.42deg,
    #ffe9fe 10.4%,
    #ff96f9 83.03%
  );
  --ease-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-out-quart: cubic-bezier(0.175, 0.79, 0.38, 0.905);
  --ease-in-out-quart: cubic-bezier(0.645, 0.045, 0.355, 1);
}

:root {
  --dark: var(--color-just-black);
  --grey-dark: #201f1f;
  --light: var(--color-surface-white);
  --mid: #7c7c6f;
  --grey: var(--color-grey);
  --gray: var(--color-grey);
  --green: var(--color-shockingly-green);
  --green-dark: #0ae448;
  --green-light: var(--color-lt-green);
  --blue: var(--color-blue);
  --purple: var(--color-lilac);
  --red: #cd237f;
  --orange: var(--color-orangey);
  accent-color: var(--color-shockingly-green);
}
/* lovely fluid fonts */

:root {
  --fluid-min-width: 320;
  --fluid-max-width: 1140;

  --fluid-screen: 100vw;
  --fluid-bp: calc(
    (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) /
      (var(--fluid-max-width) - var(--fluid-min-width))
  );
}

@media screen and (min-width: 1140px) {
  :root {
    --fluid-screen: calc(var(--fluid-max-width) * 1px);
  }
}

:root {
  --f-0-min: 16;
  --f-0-max: 18;
  --step-0: calc(
    ((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) *
      var(--fluid-bp)
  );

  --f-1-min: 16;
  --f-1-max: 22.5;
  --step-1: calc(
    ((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) *
      var(--fluid-bp)
  );

  --f-2-min: 23.04;
  --f-2-max: 28.13;
  --step-2: calc(
    ((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) *
      var(--fluid-bp)
  );

  --f-3-min: 27.65;
  --f-3-max: 35.16;
  --step-3: calc(
    ((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) *
      var(--fluid-bp)
  );

  --f-4-min: 33.18;
  --f-4-max: 46;
  --step-4: calc(
    ((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) *
      var(--fluid-bp)
  );
}

/* fluid paddings */

:root {
  --fluid-min-width: 320;
  --fluid-max-width: 1140;

  --fluid-screen: 100vw;
  --fluid-bp: calc(
    (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) /
      (var(--fluid-max-width) - var(--fluid-min-width))
  );
}

@media screen and (min-width: 1140px) {
  :root {
    --fluid-screen: calc(var(--fluid-max-width) * 1px);
  }
}

:root {
  --fc-s-min: (var(--f-0-min, 21));
  --fc-s-max: (var(--f-0-max, 24));

  --fc-m-min: (var(--fc-s-min) * 6);
  --fc-m-max: (var(--fc-s-max) * 6);

  --fc-l-min: (var(--fc-s-min) * 8);
  --fc-l-max: (var(--fc-s-max) * 8);

  --fc-xl-min: (var(--fc-s-min) * 10);
  --fc-xl-max: (var(--fc-s-max) * 10);

  /* T-shirt sizes */
  --space-s: calc(
    ((var(--fc-s-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-s-min)) *
      var(--fluid-bp)
  );
  --space-m: calc(
    ((var(--fc-m-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-m-min)) *
      var(--fluid-bp)
  );
  --space-l: calc(
    ((var(--fc-l-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-l-min)) *
      var(--fluid-bp)
  );
  --space-xl: calc(
    ((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-xl-min)) *
      var(--fluid-bp)
  );

  /* One-up pairs */
  --space-s-m: calc(
    ((var(--fc-s-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-s-min)) *
      var(--fluid-bp)
  );
  --space-m-l: calc(
    ((var(--fc-m-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-m-min)) *
      var(--fluid-bp)
  );
  --space-l-xl: calc(
    ((var(--fc-l-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-l-min)) *
      var(--fluid-bp)
  );
}

/* commonly used utils */

.pad-s {
  padding-top: var(--space-s);
  padding-bottom: var(--space-s);
}

.pad-m {
  padding-top: var(--space-m);
  padding-bottom: var(--space-m);
}

.pad-l {
  padding-top: var(--space-l);
  padding-bottom: var(--space-l);
}

.pad-xl {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.flow > * + * {
  margin-top: 1em;
}

.text-center {
  text-align: center;
}

.box {
  width: 75px;
  height: 75px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--dark);
  background: var(--gradient-macha),
    url("https://assets.codepen.io/16327/noise-e82662fe.png"); /* Replace with the path to your noise texture image */
  background-blend-mode: color-dodge; /* Blend the noise texture with the gradient */
  font-weight: 600;
  line-height: 1.2;
  will-change: transform;
}

.circle {
  width: 75px;
  height: 75px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--green);
  font-weight: 600;
  color: var(--dark);
  line-height: 1.2;
  will-change: transform;
}

/* always doing this */
.flex-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

/* and this */

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* colors */

.dark {
  background-color: var(--dark);
  color: var(--color-surface75);
}

.light,
.light h1,
.light h2,
.light h3,
.light h4 {
  background-color: var(--light);
  color: var(--dark);
}

h1,
h2,
h3,
h4 {
  color: var(--light);
}

.text-light {
  color: var(--light);
}

.text-dark {
  color: var(--dark);
}

.gray,
.grey {
  background-color: var(--grey);
}

body {
  color: var(--color-surface75);
  background-color: var(--dark);
  font-family: Mori, sans-serif;
  font-weight: 400;
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.45;
}

h1,
h2,
h3,
h4 {
  margin: 10px 0 10px 0;
  font-weight: 400;
  line-height: 1.2;
}

h1,
.h1 {
  font-size: var(--step-4);
}

h2,
.h2 {
  font-size: var(--step-3);
}

h3,
.h3 {
  font-size: var(--step-2);
}

h4,
.h4,
.lead {
  font-size: var(--step-1);
}

.heading-l {
  font-size: max(2.625rem, min(5.56634vw + 1.32039rem, 8rem));
}

a {
  color: inherit;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  display: inline-block;
  outline: none;
  padding: 8px 14px;
  background: var(--dark);
  border: solid 2px var(--color-surface75);
  color: var(--color-surface75);
  text-decoration: none;
  border-radius: 99px;
  padding: 12px 25px;
  cursor: pointer;
  line-height: 1;
  font-size: 0.9rem;
  transition: opacity 0.2s ease-out;
}

button:hover {
  border: solid 2px var(--light);
  color: var(--light);
}

.light button {
  background: var(--light);
  border: solid 2px var(--dark);
  color: var(--dark);
}

.light button:hover {
  border: solid 2px var(--dark);
  color: var(--dark);
}

.gsap-logo {
  width: 20vw;
  max-width: 90px;
  position: fixed;
  bottom: 15px;
  right: 15px;
  mix-blend-mode: difference;
  z-index: 9999;
}

.gsap-logo img {
  width: 100%;
}

.gsap-3-logo {
  width: 20vw;
  max-width: 150px;
  position: fixed;
  bottom: 15px;
  right: 15px;
}

/* panels  */

.panel {
  --background: var(--dark);
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background-color: var(--background);
  box-sizing: border-box;
  z-index: 1;
}

.panel p {
  max-width: 75ch;
}

.panel.blue {
  color: var(--dark);
  --background: var(--color-ui-blue-lt);
}
.panel.orange {
  color: var(--dark);
  --background: var(--color-svg-tangerine);
}
.panel.red {
  color: var(--dark);
  --background: var(--color-scroll-pink);
}
.panel.purple {
  color: var(--dark);
  --background: var(--color-text-purple);
}
.panel.green {
  color: var(--dark);
  --background: var(--color-core-green-lt);
}
.panel.light {
  --background: var(--light);
  color: var(--dark);
}
.panel.grey {
  --background: var(--grey);
  color: var(--light);
}

.panel.description {
  text-align: center;
}

.panel h1 {
  color: var(--color-surface-white);
}

.panel__number {
  font-size: 50vw;
  line-height: 1;
  opacity: 0.25;
  margin: 0;
}

.panel.border {
  border-radius: 0;
  border-top: 2px grey dashed;
}

.hr-top::before {
  background-color: var(--color-surface25);
  content: "";
  height: 0.0625rem;
  left: 10%;
  position: absolute;
  top: 0;
  width: 80%;
}

.hr-bottom::after {
  background-color: var(--color-surface25);
  content: "";
  height: 0.0625rem;
  left: 10%;
  position: absolute;
  bottom: 0;
  width: 80%;
}

/* SCROLL DOWN */
.scroll-down {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, 0);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 16px;
  overflow: visible;
  mix-blend-mode: difference;
  z-index: 999;
}
.scroll-down .arrow {
  position: relative;
  top: -4px;
  margin: 0 auto;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmY2UxIiBkPSJNNDU2LjIsMTkyLjJjLTIwLjUtMjAuNS01My41LTIwLjgtNzMuNy0wLjZMMjU3LDM0NC4xTDEwNC41LDE5MS42Yy0yMC4yLTIwLjItNTMuMi0xOS45LTczLjcsMC42Yy0yMC41LDIwLjUtMjAuOCw1My41LTAuNiw3My43bDE5MCwxOTBjMTAuMSwxMC4xLDIzLjQsMTUuMSwzNi44LDE1YzEzLjMsMC4xLDI2LjctNC45LDM2LjgtMTVsMTkwLTE5MEM0NzYuOSwyNDUuNyw0NzYuNywyMTIuNyw0NTYuMiwxOTIuMnoiLz48L3N2Zz4=");
  background-size: contain;
}

.panel p strong,
.panel li strong {
  font-weight: 400;
}
.panel p code,
.panel li code {
  background-color: #28292b;
  color: var(--color-surface-white);
  padding: 2px 4px;
  border-radius: 5px;
  font-size: 0.9em;
}
.panel li {
  margin: 0;
}

pre.prettyprint {
  max-width: 100%;
  overflow: auto;
}

ul pre.prettyprint {
  margin-left: -0.5rem;
}

/* Hide elements visually, but not for screenreaders by clipping it */

.vh {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

/* checkboxes */

/*  Add a :before to each label and style this as the checkbox you want to have */
.checkbox label {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}

.checkbox label:before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 2px;
  background: var(--light);
  display: inline-block;
  margin-right: 10px;
}

.checkbox input[type="checkbox"]:checked ~ label:before {
  background: var(--green) no-repeat center;
  background-size: 12px 12px;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQ1LjcwMSA0NS43IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NS43MDEgNDUuNzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0yMC42ODcsMzguMzMyYy0yLjA3MiwyLjA3Mi01LjQzNCwyLjA3Mi03LjUwNSwwTDEuNTU0LDI2LjcwNGMtMi4wNzItMi4wNzEtMi4wNzItNS40MzMsMC03LjUwNCAgICBjMi4wNzEtMi4wNzIsNS40MzMtMi4wNzIsNy41MDUsMGw2LjkyOCw2LjkyN2MwLjUyMywwLjUyMiwxLjM3MiwwLjUyMiwxLjg5NiwwTDM2LjY0Miw3LjM2OGMyLjA3MS0yLjA3Miw1LjQzMy0yLjA3Miw3LjUwNSwwICAgIGMwLjk5NSwwLjk5NSwxLjU1NCwyLjM0NSwxLjU1NCwzLjc1MmMwLDEuNDA3LTAuNTU5LDIuNzU3LTEuNTU0LDMuNzUyTDIwLjY4NywzOC4zMzJ6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
}

.flair {
  width: 100px;
  height: 100px;
  background-image: url("https://assets.codepen.io/16327/flair.png");
  background-size: contain;
  background-repeat: no-repeat;
  will-change: transform;
}

.flair--2 {
  background-image: url("https://assets.codepen.io/16327/flair-2.png");
}

.flair--3 {
  background-image: url("https://assets.codepen.io/16327/flair-3.png");
}

.flair--4 {
  background-image: url("https://assets.codepen.io/16327/flair-4.png");
}

.flair--5 {
  background-image: url("https://assets.codepen.io/16327/flair-5.png");
}

.flair--6 {
  background-image: url("https://assets.codepen.io/16327/flair-6.png");
}

.flair--7 {
  background-image: url("https://assets.codepen.io/16327/flair-7.png");
}

.flair--8 {
  background-image: url("https://assets.codepen.io/16327/flair-8.png");
}

.flair--9 {
  background-image: url("https://assets.codepen.io/16327/flair-9.png");
}

.flair--10 {
  background-image: url("https://assets.codepen.io/16327/flair-10.png");
}

.flair--11 {
  background-image: url("https://assets.codepen.io/16327/flair-11.png");
}

.flair--12 {
  background-image: url("https://assets.codepen.io/16327/flair-12.png");
}

.flair--13 {
  background-image: url("https://assets.codepen.io/16327/flair-13.png");
}

.flair--14 {
  background-image: url("https://assets.codepen.io/16327/flair-14.png");
}

.flair--15 {
  background-image: url("https://assets.codepen.io/16327/flair-15.png");
}

.flair--16 {
  background-image: url("https://assets.codepen.io/16327/flair-16.png");
}

.flair--17 {
  background-image: url("https://assets.codepen.io/16327/flair-17.png");
}

.flair--18 {
  background-image: url("https://assets.codepen.io/16327/flair-18.png");
}

.flair--19 {
  background-image: url("https://assets.codepen.io/16327/flair-19.png");
}

.flair--20 {
  background-image: url("https://assets.codepen.io/16327/flair-20.png");
}

.flair--21 {
  background-image: url("https://assets.codepen.io/16327/flair-21.png");
}

.flair--22 {
  background-image: url("https://assets.codepen.io/16327/flair-22.png");
}

.flair--23 {
  background-image: url("https://assets.codepen.io/16327/flair-23.png");
}

.flair--24 {
  background-image: url("https://assets.codepen.io/16327/flair-24.png");
}

.flair--25 {
  background-image: url("https://assets.codepen.io/16327/flair-25.png");
}

.flair--26 {
  background-image: url("https://assets.codepen.io/16327/flair-26.png");
}

.flair--27 {
  background-image: url("https://assets.codepen.io/16327/flair-27.png");
}

.flair--28 {
  background-image: url("https://assets.codepen.io/16327/flair-28.png");
}

.flair--29 {
  background-image: url("https://assets.codepen.io/16327/flair-29.png");
}

.flair--30 {
  background-image: url("https://assets.codepen.io/16327/flair-30.png");
}

.flair--31 {
  background-image: url("https://assets.codepen.io/16327/flair-31.png");
}

.flair--32 {
  background-image: url("https://assets.codepen.io/16327/flair-32.png");
}

.flair--33 {
  background-image: url("https://assets.codepen.io/16327/flair-33.png");
}

.flair--34 {
  background-image: url("https://assets.codepen.io/16327/flair-34.png");
}

.flair--35 {
  background-image: url("https://assets.codepen.io/16327/flair-35.png");
}

.flair--3D-1 {
  background-image: url("https://assets.codepen.io/16327/3D-keyframe.png");
}
.flair--3D-2 {
  background-image: url("https://assets.codepen.io/16327/3D-poly.png");
}
.flair--3D-3 {
  background-image: url("https://assets.codepen.io/16327/3D-semi.png");
}
.flair--3D-4 {
  background-image: url("https://assets.codepen.io/16327/3D-spiral.png");
}
.flair--3D-5 {
  background-image: url("https://assets.codepen.io/16327/3D-squish.png");
}
.flair--3D-6 {
  background-image: url("https://assets.codepen.io/16327/3D-triangle.png");
}
.flair--3D-7 {
  background-image: url("https://assets.codepen.io/16327/3D-tube.png");
}
.flair--3D-8 {
  background-image: url("https://assets.codepen.io/16327/3D-tunnel.png");
}
.flair--3D-9 {
  background-image: url("https://assets.codepen.io/16327/3D-combo.png");
}
.flair--3D-10 {
  background-image: url("https://assets.codepen.io/16327/3D-cone.png");
}
.flair--3D-11 {
  background-image: url("https://assets.codepen.io/16327/3D-hoop.png");
}

.flair-cont {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 2rem;
  flex-wrap: wrap;
}

.box.green,
.gradient-green {
  color: var(--dark);
  background: var(--gradient-macha),
    url("https://assets.codepen.io/16327/noise-e82662fe.png"); /* Replace with the path to your noise texture image */
  background-blend-mode: color-dodge; /* Blend the noise texture with the gradient */
}

.box.green-lt,
.gradient-green-2 {
  color: var(--dark);
  background: var(--gradient-emerald-city),
    url("https://assets.codepen.io/16327/noise-e82662fe.png"); /* Replace with the path to your noise texture image */
  background-blend-mode: color-dodge; /* Blend the noise texture with the gradient */
}

.box.orange,
.gradient-orange {
  color: var(--dark);
  background: var(--gradient-orange-crush),
    url("https://assets.codepen.io/16327/noise.png"); /* Replace with the path to your noise texture image */
  background-blend-mode: color-dodge; /* Blend the noise texture with the gradient */
}

.box.purple,
.gradient-purple {
  color: var(--dark);
  background: var(--gradient-purple-haze),
    url("https://assets.codepen.io/16327/noise.png"); /* Replace with the path to your noise texture image */
  background-blend-mode: color-dodge; /* Blend the noise texture with the gradient */
}

.box.blue-lt .gradient-blue-2 {
  color: var(--dark);
  background: var(--gradient-summer-fair),
    url("https://assets.codepen.io/16327/noise.png"); /* Replace with the path to your noise texture image */
  background-blend-mode: color-dodge; /* Blend the noise texture with the gradient */
}

.box.blue,
.gradient-blue {
  color: var(--dark);
  background: var(--color-ui-gradient),
    url("https://assets.codepen.io/16327/noise-e82662fe.png"); /* Replace with the path to your noise texture image */
  background-blend-mode: color-dodge; /* Blend the noise texture with the gradient */
}

.box.red,
.gradient-red {
  color: var(--dark);
  background: var(--gradient-lipstick),
    url("https://assets.codepen.io/16327/noise.png"); /* Replace with the path to your noise texture image */
  background-blend-mode: color-dodge; /* Blend the noise texture with the gradient */
}

.box.pink,
.gradient-pink {
  color: var(--dark);
  background: var(--color-scroll-gradient),
    url("https://assets.codepen.io/16327/noise.png"); /* Replace with the path to your noise texture image */
  background-blend-mode: color-dodge; /* Blend the noise texture with the gradient */
}

.gradient-blue-dark {
  background: var(--gradient-skyfall),
    url(https://assets.codepen.io/16327/noise.png);
  background-blend-mode: color-dodge;
}

.noise {
  position: relative;
}
.noise:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: url("https://assets.codepen.io/16327/noise.png");
  opacity: 0.4;
  pointer-events: none;
}

/* SCROLL DOWN */
.scroll-down {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translate(-50%, 0);
  color: var(--color-surface-white);
  font-weight: 400;
  text-transform: lowercase;
  font-size: 1rem;
  overflow: visible;
}
.scroll-down .arrow {
  position: relative;
  top: 5px;
  margin: 0 auto;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 11 7'%3E%3Cpath fill='%23FFFCE1' d='M1.044.359.5.949l4.728 5.128.272.282.272-.282L10.5.948l-.544-.59L5.5 5.193 1.044.359Z'/%3E%3C/svg%3E");
}

.arrow-right {
  transform: rotate(-90deg);
  position: relative;
  top: -4px;
  margin: 1rem auto;
  width: 20px;
  height: 20px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KPHBhdGggZmlsbD0iYmxhY2siIGQ9Ik00ODMuMiwxOTIuMmMtMjAuNS0yMC41LTUzLjUtMjAuOC03My43LTAuNkwyNTcsMzQ0LjFMMTA0LjUsMTkxLjZjLTIwLjItMjAuMi01My4yLTE5LjktNzMuNywwLjYKCWMtMjAuNSwyMC41LTIwLjgsNTMuNS0wLjYsNzMuN2wxOTAsMTkwYzEwLjEsMTAuMSwyMy40LDE1LjEsMzYuOCwxNWMxMy4zLDAuMSwyNi43LTQuOSwzNi44LTE1bDE5MC0xOTAKCUM1MDMuOSwyNDUuNyw1MDMuNywyMTIuNyw0ODMuMiwxOTIuMnoiLz4KPC9zdmc+);
  background-size: contain;
}

/* code theme */
/* Background and default text */

/* Required base Prism layout styles */
code[class*="language-"],
pre[class*="language-"] {
  color: #bfc7d5;
  background: #201f1f;
  text-shadow: none;
  font-family: Fraktion Mono, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  font-size: 16px;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  line-height: 1.5;
  tab-size: 4;
  hyphens: none;
}

/* Ensure <pre> blocks have proper padding and overflow */
pre[class*="language-"] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 0.3em;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}

code[class*="language-"],
pre[class*="language-"] {
  color: var(--color-surface-white);
  background: #201f1f;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  max-width: 600px;
}

/* Comments */
.token.comment {
  color: #9c9c9c;
  font-style: italic;
}

/* Strings & inserted */
.token.string,
.token.inserted {
  color: #63d55a;
}

/* Numbers */
.token.number {
  color: rgb(247, 140, 108);
}

/* Built-ins, functions, constants */
.token.builtin,
.token.char,
.token.constant,
.token.function {
  color: rgb(130, 170, 255);
}

/* Punctuation, selectors */
.token.punctuation,
.token.selector {
  color: rgb(199, 146, 234);
}

/* Variables */
.token.variable {
  color: rgb(191, 199, 213);
}

/* Class names, attribute names */
.token.class-name,
.token.attr-name {
  color: rgb(255, 203, 107);
}

/* Tags, deleted */
.token.tag,
.token.deleted {
  color: rgb(255, 85, 114);
}

/* Operators */
.token.operator {
  color: rgb(137, 221, 255);
}

/* Booleans */
.token.boolean {
  color: rgb(255, 88, 116);
}

/* Keywords */
.token.keyword {
  font-style: italic;
}

/* Doctypes */
.token.doctype {
  color: rgb(199, 146, 234);
  font-style: italic;
}

/* Namespaces */
.token.namespace {
  color: rgb(178, 204, 214);
}

/* URLs */
.token.url {
  color: rgb(221, 221, 221);
}

/* fixed nav */

.fixed-nav {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  border: solid 2px var(--mid);
  border-radius: 99px;
  z-index: 999;
  display: flex;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background-color: var(--dark);
}

.fixed-nav a {
  text-transform: lowercase;
  color: var(--color-surface50);
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 0.9rem;
  line-height: 1;
}

.fixed-nav a:hover {
  text-decoration: none;
}

.gsap-marker-end,
.gsap-marker-scroller-end {
  font-family: "Mori" !important;
  color: #fa7777 !important;
  border-color: #fa7777 !important;
}

.gsap-marker-start,
.gsap-marker-scroller-start {
  font-family: "Mori" !important;
  color: #abff84 !important;
  border-color: #abff84 !important;
}

/* text gradients */

.heading-scroll {
  -webkit-text-fill-color: transparent;
  background: var(--color-scroll-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

.heading-svg {
  -webkit-text-fill-color: transparent;
  background: var(--color-svg-heading-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

.heading-core {
  -webkit-text-fill-color: transparent;
  background: var(--color-core-heading-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

.heading-ui {
  -webkit-text-fill-color: transparent;
  background: var(--color-ui-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

.heading-text {
  -webkit-text-fill-color: transparent;
  background: var(--color-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}


.braces {
  position: relative;
  color: var(--light)
}

.braces:before {
  position: absolute;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 27 78'%3E%3Cpath fill='%23FFFCE1' d='M26.52 77.21h-5.75c-6.83 0-12.38-5.56-12.38-12.38V48.38C8.39 43.76 4.63 40 .01 40v-4c4.62 0 8.38-3.76 8.38-8.38V12.4C8.38 5.56 13.94 0 20.77 0h5.75v4h-5.75c-4.62 0-8.38 3.76-8.38 8.38V27.6c0 4.34-2.25 8.17-5.64 10.38 3.39 2.21 5.64 6.04 5.64 10.38v16.45c0 4.62 3.76 8.38 8.38 8.38h5.75v4.02Z'%3E%3C/path%3E%3C/svg%3E");
  right: 100%; height: 150%;
  top: -25%;
  aspect-ratio: 1/2;
  background-repeat: no-repeat;
}

.braces:after {
  position: absolute;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 27 78'%3E%3Cpath fill='%23FFFCE1' d='M26.52 77.21h-5.75c-6.83 0-12.38-5.56-12.38-12.38V48.38C8.39 43.76 4.63 40 .01 40v-4c4.62 0 8.38-3.76 8.38-8.38V12.4C8.38 5.56 13.94 0 20.77 0h5.75v4h-5.75c-4.62 0-8.38 3.76-8.38 8.38V27.6c0 4.34-2.25 8.17-5.64 10.38 3.39 2.21 5.64 6.04 5.64 10.38v16.45c0 4.62 3.76 8.38 8.38 8.38h5.75v4.02Z'%3E%3C/path%3E%3C/svg%3E");
  left: 100%; height: 150%;
  transform: rotate(180deg);
  top: -25%;
  aspect-ratio: 1/2;
  background-repeat: no-repeat;
}