:root {
  /* Fonts */
  --font-main: "Heebo", Arial, sans-serif;

  /* Colors */
  --color-black: #000;
  --color-white: #ffffff;
  --color-cream: #fbfaf7;
  --color-cream-light: #fffdf8;
  --color-text-dark: #13202b;
  --color-gold: #c9a84c;
  --color-gold-button-top: #f0d99d;
  --color-gold-button-bottom: #bb9140;
  --color-gold-button-hover-top: #f6e6b8;
  --color-gold-button-hover-bottom: #a97d31;

  /* Transparent colors */
  --white-08: rgba(255, 255, 255, 0.08);
  --cream-14: rgba(255, 253, 248, 0.14);
  --cream-18: rgba(255, 253, 248, 0.18);
  --cream-42: rgba(255, 253, 248, 0.42);
  --cream-90: rgba(255, 253, 248, 0.9);
  --cream-94: rgba(255, 253, 248, 0.94);
  --cream-98: rgba(255, 253, 248, 0.98);
  --cream-scroll-82: rgba(245, 234, 212, 0.82);
  --cream-bg-75: rgba(251, 250, 247, 0.75);
  --cream-bg-0: rgba(251, 250, 247, 0);
  --text-dark-08: rgba(19, 32, 43, 0.08);
  --text-dark-16: rgba(19, 32, 43, 0.16);
  --text-dark-18: rgba(19, 32, 43, 0.18);
  --text-dark-38: rgba(19, 32, 43, 0.38);
  --text-dark-76: rgba(19, 32, 43, 0.76);
  --text-dark-78: rgba(19, 32, 43, 0.78);
  --gold-border-18: rgba(197, 150, 63, 0.18);
  --gold-border-24: rgba(197, 150, 63, 0.24);
  --gold-dark-22: rgba(142, 103, 31, 0.22);
  --gold-dark-42: rgba(142, 103, 31, 0.42);
  --black-35: rgba(0, 0, 0, 0.35);
  --black-75: rgba(0, 0, 0, 0.75);
  --black-50: rgba(0, 0, 0, 0.5);
  --black-0: rgba(0, 0, 0, 0);
  --teal-shadow-20: rgba(13, 90, 99, 0.2);

  /* Effects */
  --radius-small: 8px;
  --radius-round: 999px;
  --blur-header: blur(10px);
  --blur-header-open: blur(16px);
  --shadow-header: 0 12px 28px var(--text-dark-08);
  --shadow-open-menu: 0 18px 60px var(--black-35);
  --shadow-mobile-menu: 0 24px 52px var(--text-dark-18);
  --shadow-logo: drop-shadow(0 10px 14px var(--text-dark-16));
  --shadow-logo-small: drop-shadow(0 5px 9px var(--text-dark-08));
  --shadow-button: 0 12px 24px var(--gold-dark-22);
  --shadow-button-hover: 0 16px 28px var(--teal-shadow-20);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-header: 0.28s ease;
  --transition-fade: 0.35s ease;
  --transition-logo-opacity: 0.16s ease;

  /* Gradients */
--gradient-cream-window: linear-gradient(
  to right,
  #fffdf8 0%,
  #fffdf8 68%,
  rgba(255, 253, 248, 0.72) 70%,
  rgba(255, 253, 248, 0) 71%,
  rgba(255, 253, 248, 0) 90%,
  rgba(255, 253, 248, 0.72) 92%,
  #fffdf8 94%,
  #fffdf8 100%
);

  --gradient-dark-side: linear-gradient(
    to left,
    var(--black-75) 0%,
    var(--black-0) 100%
  );

  --gradient-gold-button: linear-gradient(
    180deg,
    var(--color-gold-button-top),
    var(--color-gold-button-bottom)
  );

  --gradient-gold-button-hover: linear-gradient(
    180deg,
    var(--color-gold-button-hover-top),
    var(--color-gold-button-hover-bottom)
  );

  /* Masks */
  --mask-dark-fade-bottom: linear-gradient(
    to bottom,
    black 0%,
    black 65%,
    transparent 100%
  );

  --mask-cream-fade-bottom: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 90%,
    var(--black-50) 95%,
    black 100%
  );

  /* Layout */
  --header-z: 1000;
  --page-z: 1;
  --overlay-z: 1;
  --content-z: 3;
  --image-z: 4;
  --cream-overlay-z: 5;
}