Fiddle.Digital Design Agency — Index

:root {
  --color-dominant: #bb8e43;
  --color-surface: #dbc49d;
  --color-ink: #644c24;
  --color-accent: #947c5c;
  --color-detail: #ccc4cc;
}

/* CSS variables exposed by source */
:root {
  --font-mono: "KHTekaMono","KHTeka",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
  --font: "KHTeka",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
  --type-step: 1.333;
  --font-jp: "JP",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
  --vw: 14.4px;
  --f-2-bounce: linear(0,1.28 7%,1.42 10%,1.18 14%,.78 22%,.72 28%,.86 34%,1.08 48%,1.12 56%,1.04 64%,.97 78%,.985 88%,1);
  --y: 0;
  --g-columns: 14;
  --c-berry: #c8c2cf;
  --col: calc(14.4px*100/14 - calc(.2rem*4)*2/14 - .2rem*13/14);
  --c-grey-dark-rgb: 84,77,86;
  --body-line-height: 1.2;
  --large-lh: calc(1.2*pow(1.2 /1.333, 1));
  --dy: 0;
  --h4: calc(calc(calc(1rem*1.333)*1.333)*1.333);
  --p: 1rem;
  --h3-lh: calc(1.2*pow(1.2 /1.333, 1));
  --h2: calc(calc(calc(calc(calc(1rem*1.333)*1.333)*1.333)*1.333)*1.333);
  --c-white: #fff;
  --progress: 0;
  --mm: calc(calc(1rem/1.333)/1.333);
  --h6: calc(1rem*1.333);
  --marquee-progress: 0;
  --c-green-rgb: 77,191,157;
  --c-purple: #a399a8;
  --h1: calc(calc(calc(calc(calc(calc(1rem*1.333)*1.333)*1.333)*1.333)*1.333)*1.333);
  --angle: 0;
  --f-fast: cubic-bezier(0,.81,.35,1);
  --c-black: #101214;
  --c-blue: #3687ff;
  --c-yellow: #f4ff1e;
  --a: 0deg;
  --g-gap: .2rem;
  --f-smooth-alt: cubic-bezier(.6,0,.05,1);
  --c-green-alt: #38d6a3;
  --c-grey: #e6dfe4;
  --vh: 9px;
  --f-smooth: cubic-bezier(.5,0,.3,1);
  --x-lerp: 0;
  --h5: calc(calc(1rem*1.333)*1.333);
  --c-purple-rgb: 163,153,168;
  --large: clamp(1rem,calc(calc(calc(calc(calc(calc(calc(1rem*1.333)*1.333)*1.333)*1.333)*1.333)*1.333)*1.333*1.333),9.3vw);
  --angle-deg: 0;
  --progress-slice: 0;
  --c-red: #ff4f36;
  --y-lerp: 0;
  --body-font-size: 1rem;
  --c-white-rgb: 255,255,255;
  --h6-lh: calc(1.2*pow(1.2 /1.333, .9));
  --h4-lh: calc(1.2*pow(1.2 /1.333, 1));
  --c-berry-rgb: 200,194,207;
  --g-margin: calc(.2rem*4);
  --h2-lh: calc(1.2*pow(1.2 /1.333, 2));
  --c-grey-dark: #544d56;
  --columns: 14;
  --h5-lh: calc(1.2*pow(1.2 /1.333, .9));
  --y-px: 0;
  --h1-lh: calc(1.2*pow(1.2 /1.333, 3));
  --f-cubic: cubic-bezier(.22,.31,0,1);
  --line-height-step: 1.2 /1.333;
}