:root {
  --text-color: #fff;
  --bg-color: #282a37;
  --box-shadow-def:
    0 2.8px 2.2px rgb(0 0 0 / 2%), 0 6.7px 5.3px rgb(0 0 0 / 3%),
    0 12.5px 10px rgb(0 0 0 / 4%), 0 22.3px 17.9px rgb(0 0 0 / 4%),
    0 41.8px 33.4px rgb(0 0 0 / 5%), 0 100px 80px rgb(0 0 0 / 7%);

  /* labels */
  --label-color: #6d6f7c;

  /* button */
  --button-bg-color: #1d90f4;

  /* input */
  --input-bg-color: #323645;
  --input-border: 2px solid;
  --input-border-focus-color: #508dc5;
  --input-icon-color: #c2c4c4;

  /* navigation annimation */
  --nav-bg-before: #393e4f;
  --nav-bg-after: #323645;

  /* navigation hamburger icon */
  --nav-icon-color: #c1c0c0;
  --nav-icon-color-hover: #ffffff;

  /* navigation links */
  --nav-link-color: #9f9c9c;
  --nav-link-color-hover: #fff;
  --nav-link-color-active: #1d90f4;
  --nav-item-description: #c1c0c0;
  --nav-link-color-bulletpoint: #1d90f4;
  --nav-link-not-active: #9f9c9c;

  /* text */
  --text-color: #fff;
}