:root {
  /*
   * Only use these static colors for elements,
   * which should keep their colors independent
   * from color mode (e.g. navbar)
   */
  --color-static-background-light-primary: #F6F6F6;
  --color-static-background-light-variant-10: #E9EAED;
  --color-static-background-light-variant-20: #ECEDEF;
  --color-static-background-light-variant-30: #D5D7DD;
  --color-static-background-light-neutral: #BDBDBD;
  --color-static-background-dark-primary: #243042;
  --color-static-background-dark-variant-10: #58616F;
  --color-static-on-background-light-primary: #243042;
  --color-static-on-background-light-variant-10: #404E64;
  --color-static-on-background-light-neutral: #92A0B2;
  --color-static-on-background-dark-primary: #FFFFFF;
  --color-static-on-background-dark-variant-10: var(--color-static-background-light-primary);
  --color-key-primary: #FFC700;
  --color-key-variant-10: #E9B600;
  --color-key-variant-20: #F7EFD1;
  --color-key-green-primary: #48A74D;
  --color-key-green-variant-10: #E5F7E6;
  --color-gradient-blue: linear-gradient(180deg, rgba(33, 69, 120, 0.00) 50%, rgba(33, 69, 120, 0.65) 100%);
  --color-gradient-white: linear-gradient(180deg, rgba(246, 246, 246, 0) 0%, rgba(246, 246, 246, 0.95) 60%);
  /* Light mode colors */
  --color-dynamic-background-primary: var(--color-static-background-light-primary);
  --color-dynamic-background-variant-10: var(--color-static-background-light-variant-10);
  --color-dynamic-background-variant-20: var(--color-static-background-light-variant-20);
  --color-dynamic-on-background-primary: var(--color-static-on-background-light-primary);
  --color-dynamic-on-background-variant-10: var(--color-static-on-background-light-variant-10);
  --color-dynamic-on-background-variant-20: var(--color-static-on-background-light-neutral);
}

/* Uncomment to activate dark mode */
:root {
  /**
   * Focus
   */
  --focus-color: var(--color-key-primary);
  --focus-default: 2px solid var(--focus-color);
  --focus-offset: 2px;
  /**
   * Animations
   */
  --in: rotateX(0) rotateY(0deg);
  --out-up: rotateX(90deg) rotateY(0deg);
  --out-right: rotateX(0deg) rotateY(90deg);
  --out-down: rotateX(-90deg) rotateY(0deg);
  --out-left: rotateX(0deg) rotateY(-90deg);
  /**
   * sections
   */
  --section-padding-y: 3.125rem;
  --section-margin-y: 0rem;
  --container-width: 100%;
  /**
   * z-index
   */
  --z-0: 0;
  --z-1: 10;
  --z-2: 20;
  --z-3: 180;
  --z-4: 190;
  --z-5: 200;
  /**
   * blur
   */
  --blur-1: 12px;
  /**
   * shadow
   */
  --shadow-10: 0px 10px 36px -18px rgba(0, 0, 0, 0.08), 0px 20px 60px -12px rgba(33, 69, 120, 0.04);
  --shadow-20: 0px 10px 36px -18px rgba(0, 0, 0, 0.2), 0px 15px 60px -12px rgba(33, 69, 120, 0.15);
  /**
   * spacing
   */
  --number-space-0: 0px;
  --number-space-1: 6px;
  --number-space-2: 10px;
  --number-space-3: 20px;
  --number-space-4: 30px;
  --number-space-5: 50px;
  --number-space-6: 70px;
  --number-space-7: 100px;
  --number-space-8: 1000px;
  /**
   * border-radius
   */
  --number-corner-0: 0px;
  --number-corner-1: var(--number-space-1);
  --number-corner-2: var(--number-space-2);
  --number-corner-3: var(--number-space-3);
  --number-corner-4: var(--number-space-4);
  --number-corner-5: var(--number-space-5);
  --number-corner-8: 1000px;
  /**
   * transition
   */
  --transition-time-default: 0.15s;
  --transition-time-slow: 0.5s;
  --transition-time-fast: 0.10s;
  --transition-default: var(--transition-time-default) ease;
  --transition-slow: var(--transition-time-slow) ease;
  --transition-fast: var(--transition-time-fast) ease;
}