/* Global variables - Can be used in every components by using var(--var-name) method */
:root {
  --body-bg: hsla(200, 18%, 97%, 1) !important;
  --color-default: #000;
  --color-primary: hsl(221, 58%, 30%);
  --color-primary-light: hsl(221, 39%, 41%);
  --color-primary-dark: hsl(221, 58%, 20%);
  --color-secondary: #ddd;
  --color-secondary-light: #eee;
  --color-secondary-dark: #ccc;
  --color-info: hsl(187, 100%, 42%);
  --color-success: hsl(122, 39%, 49%);
  --color-warning: hsl(45, 100%, 51%);
  --color-danger: hsl(4, 90%, 58%);
  --font-family-sans-serif: 'ProximaNova', 'Helvetica Neue', Helvetica, Arial,
    sans-serif;
  --font-size-base: 14px;
  --line-height-base: 1.5;
  --text-color: #636b6f;
  --second-text-color: rgba(0, 0, 0, 0.4);
  --second-font-size: 14px;
  --max-mobile-screen-width: 600px;
  --max-tablet-screen-width: 768px;
  --default-box-shadow: 0 1px 1px 0.8px hsla(201, 10%, 55%, 0.5);
}