:root {
  /* COLORS */
  --color-text-primary: #000; /* default text color */
  --color-text-secondary: #fff; /* additional text color */
  --color-text-primary-btn: #000; /* bottom big button text color */
  --color-shadow-primary-btn: #69C0B5; /* bottom big button shadow color */
  --color-add-story-icon: #fff; /* add story icon text color */
  --color-stories-bottom-border: #F1F2F6; /* border color under stories block */
  --color-preloader-dots: #000; /* preloader dots text color */

  /* BACKGROUNDS */
  --bg-overlay: 180deg, rgba(0, 0, 0, 0) 15.89%, rgba(0, 0, 0, 0.8) 68.31%; /* background color for page overlay */
  --bg-body: #fff; /* background for all body */
  --bg-content: #fff; /* background for all contents places (header, main, footer) */
  --bg-stories-border: #F0C275, #C92166;
  --bg-stories: #fff; /* background color under story photo */
  --bg-add-story: #F1F2F6; /* background color under add story photo */
  --bg-add-story-icon: #0395F4; /* background color for add story icon */
  --bg-primary-btn: #E9BF5C, #EF6E6A; /* bottom big button gradient background */
  --bg-primary-btn-pulse: white; /* bottom big button pulse color */
  --bg-preloader: #fff; /* all background for preloader */

  /* FONT PARAMS */
  --font-family: 'Lato', sans-serif; /* default font */
  --font-size: 14px; /* default size */
  --font-weight: 400; /* default weight */
  --font-spacing: 0.7px; /* default letter spacing */
  --font-logo: 'Lobster Two', sans-serif; /* logo font */
  --font-logo-size: 32px;
  --font-logo-spacing: 2px; /* logo letter spacing */
  --font-primary: 'Barlow Condensed', sans-serif; /* bottom big button font */
  --font-primary-btn-size: 24px; /* center big button font size */
  --font-preloader-dots-size: 72px; /* preloader dots text size */
  
  /* OTHER APP PARAMS */
  --app-width: 640px; /* wrapper size for tablet or desktop site versions */
  --app-direct-icon-size: 25px;
  --app-pulse-animation-speed: 0.5s; /* center big button pulse speed */
  --app-story-and-user-round-size: 80px; /* story and user round size */
  --app-avatar-size: 40px; /* avatar round size (under stories block) */
  --app-media-block-height: 52vh; /* video (or photo) block height (% from screen height) */
  --app-primary-button-bottom-offset: 15%; /* bottom big button offset */
  --app-bg-video-blur: 20px; /* background video blur size */
  
}