html {
  /* COLORS */
  --color-grey-50: rgb(61, 70, 82);
  --color-grey-100: rgb(72, 83, 98);
  --color-grey-150: rgb(83, 95, 113);
  --color-grey-300: rgb(113, 127, 148);
  --color-grey-350: rgb(132, 151, 179);
  --color-grey-350-alpha: rgba(132, 151, 179, 0.5);
  --color-grey-400: rgb(148, 164, 189);
  --color-grey-700-alpha: rgba(163, 177, 198, 0.502);
  --color-grey-750: rgb(202, 206, 212);
  --color-grey-750-alpha: rgba(202, 206, 212, 0.5);
  --color-grey-800: rgb(224, 229, 236);
  --color-grey-850-alpha: rgba(240, 245, 253, 0.5);
  --color-grey-900-alpha: rgba(255, 255, 255, 0.502);

  --color-primary-main: rgb(237, 89, 89);
  --color-primary-main-alpha: rgba(237, 89, 89, 0.5);
  --color-primary-light: rgb(239, 124, 124);
  --color-primary-light-alpha: rgba(239, 124, 124, 0.5);

  /* GRADIENTS */
  --linear-inflate: linear-gradient(
      180deg,
      var(--color-grey-850-alpha) 0%,
      var(--color-grey-750-alpha) 100%
    ),
    linear-gradient(90deg, var(--color-grey-850-alpha) 0%, var(--color-grey-750-alpha) 100%);
  --linear-primary-inflate: linear-gradient(
      180deg,
      var(--color-primary-light-alpha) 0%,
      var(--color-primary-main-alpha) 100%
    ),
    linear-gradient(
      90deg,
      var(--color-primary-light-alpha) 0%,
      var(--color-primary-main-alpha) 100%
    );
  --linear-deflate: linear-gradient(
      0deg,
      var(--color-grey-850-alpha) 0%,
      var(--color-grey-750-alpha) 100%
    ),
    linear-gradient(-90deg, var(--color-grey-850-alpha) 0%, var(--color-grey-750-alpha) 100%);

  /* SHADOWS */
  --snack-shadow: 0 -4px 8px rgba(0, 0, 0, 0.12);
  --overlay-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  --neo-text-up: 3px 3px 5px var(--color-grey-700-alpha), -3px -3px 5px var(--color-grey-900-alpha);
  --neo-small-up-flat: 3px 3px 5px var(--color-grey-700-alpha),
    -3px -3px 5px var(--color-grey-900-alpha);
  --neo-small-up-up: var(--neo-small-up-flat), inset var(--color-grey-750-alpha) -5px -5px 10px,
    inset var(--color-grey-850-alpha) 5px 5px 10px;
  --neo-small-up-down: var(--neo-small-up-flat), inset 3px 3px 5px var(--color-grey-750-alpha),
    inset -3px -3px 5px var(--color-grey-850-alpha);
  --neo-medium-up-flat: 5px 5px 10px var(--color-grey-700-alpha),
    -5px -5px 10px var(--color-grey-900-alpha);
  --neo-medium-up-up: var(--neo-medium-up-flat), inset var(--color-grey-750-alpha) -5px -5px 10px,
    inset var(--color-grey-850-alpha) 5px 5px 10px;
  --neo-medium-up-down: var(--neo-medium-up-flat), inset 3px 3px 5px var(--color-grey-750-alpha),
    inset -3px -3px 5px var(--color-grey-850-alpha);
  --neo-dark-medium-up-down: 5px 5px 10px var(--color-grey-50), -5px -5px 10px var(--color-grey-150),
    inset 3px 3px 5px var(--color-grey-50), inset -3px -3px 5px var(--color-grey-150);
  --neo-dark-medium-up-flat: 5px 5px 10px var(--color-grey-50), -5px -5px 10px var(--color-grey-150);
  --neo-medium-down: inset 5px 5px 10px var(--color-grey-700-alpha),
    inset -5px -5px 10px var(--color-grey-900-alpha);
  --neo-large-up-flat: 9px 9px 14px var(--color-grey-700-alpha),
    -9px -9px 14px var(--color-grey-900-alpha);
  --neo-large-up-up: var(--neo-large-up-flat), inset -5px -5px 10px var(--color-grey-700-alpha),
    inset 5px 5px 10px var(--color-grey-900-alpha);
  --neo-large-down: inset 9px 9px 14px var(--color-grey-700-alpha),
    inset -9px -9px 14px var(--color-grey-900-alpha);
  --neo-dark-large-down: inset 9px 9px 14px var(--color-grey-50),
    inset -9px -9px 14px var(--color-grey-150);

  /* PADDING */
  --padding-1: 8px;
  --padding-1-5: 12px;
  --padding-2: 16px;
  --padding-3: 24px;
  --padding-4: 32px;
  --padding-5: 40px;

  /* BORDERS */
  --radius-medium: 16px;

  /* FONT-SIZES */
  --size-medium: 12px;
  --size-decent: 18px;
  --size-large: 36px;
  --size-largest: 64px;

  /* MISC */
  --background-shadow: rgba(0, 0, 0, 0.12);
}