:root {
  --background-color_body: rgba(248, 248, 248, 1);
  --background-color_nav: rgba(255, 255, 255, 1);
  --background-color_container: rgba(246, 246, 246, 1);
  --background-color_content: rgba(255, 255, 255, 1);

  /* COLORS */
  --color-black: rgba(0, 0, 0, 1);
  --color-black_transparent_09: rgba(0, 0, 0, 0.9);
  --color-black_transparent_08: rgba(0, 0, 0, 0.8);
  --color-blue-light: rgba(31, 187, 246, 1);
  --color-blue-light-ultra: rgba(238, 246, 253, 1);
  --color-blue-medium: rgba(5, 129, 179, 1);
  --color-red: rgba(213, 69, 61, 1);
  --color-grey: rgba(71, 72, 74, 1);
  --color-grey_transparent_08: rgba(71, 72, 74, 0.8);
  --color-grey_transparent_095: rgba(71, 72, 74, 0.95);
  --color-white: rgba(255, 255, 255, 1);
  --color-white_transparent_09: rgba(255, 255, 255, 0.9);
  --color-white_transparent_095: rgba(255, 255, 255, 0.95);
  --color-gold: rgba(255,215,0, 1);
  --color-silver: rgba(192,192,192, 1);
  --color-bronze: rgba(184,115,51, 1);

  /* header */
  --header-color: rgba(71, 72, 74, 1);
  --header-color-light: rgba(31, 187, 246, 1);
  --header-color-medium: rgba(5, 129, 179, 1);
  --header-color-dark: rgba(0, 0, 0, 0.9);
  --header-background-image: url();
  --height_main_header: 120px;
  --height_main_header-menu: 60px;
  --height_aside-header: 80px;

  /* abc */
  --background-color_abc: var(--header-color-light);
  --background-color_abc-hover: var(--header-color-medium);
  --background-color_abc_block: var(--header-color);
  --background-color_abc_popover: var(--background-color_container);
  --background-color_abc_button: var(--header-color);
  --alfabet-button_color: rgba(255, 255, 255, 1);

  --nav_elements-color: rgba(29, 31, 33, 1);
  --accent-element-color: rgba(31, 187, 246, 1);

  --nav_width: 80px;

  /* font-size */
  --font-size_extra-small: 10px;
  --font-size_small: 12px;
  --font-size_normal: 14px;
  --font-size_h1: 26px;
  --font-size_h2: 20px;
  --font-size_h3: 14px;

  /* font-weight */
  --font-weight_light: 300;
  --font-weight_middle: 400;
  --font-weight_bold: 600;

  /* icon-size */
  --icon-size_story_footer: 20px;
  --icon-size_story_small: 1.3em;
  --icon-gap_story_small: 0.4em;

  /* gap */
  --gap_story_footer: 1em;
  --gap_customcomments_footer: 1em;

/* text-color*/
  --text-color: rgba(0, 0, 0, 1);
  --text-color-light: rgba(29, 31, 33, 1);

  --block-outline-color: rgba(71, 72, 74, 0.1);
  --block-background-color: rgba(255, 255, 255, 1);
  --block-background-accent-color: rgba(238, 246, 253, 1);

  --header-menu_upload-hover: rgba(5, 129, 179, 1);
  --box-shadow: rgba(0, 0, 0, 0.3);
  --box-shadow_block: 0 1px 2px 0 var(--box-shadow);
  --separator: rgba(71, 72, 74, 0.1);
  --separator-border: 1px var(--separator) solid;
  --separator-border-left: 1px var(--separator) solid;
  --separator-border-accent: 1px var(--accent-element-color) solid;
  --icon-color: rgba(71, 72, 74, 1);
  --color-h1: rgba(255, 255, 255, 1);

  --news-block_color: rgba(255, 255, 255, 1);
  --button-color: var(--color-white);
  --button-color-black: rgba(0, 0, 0, 1);
  --button-color-light: rgba(29, 31, 33, 1);
  --button-color-accent: rgba(31, 187, 246, 1);
  --button-background: rgba(255, 255, 255, 1);
  --button-background-accent: var(--accent-element-color);
  --button-background-accent_hover: rgba(5, 129, 179, 1);
  --comments-avatar-width: 70px;


  --popover_background-color: rgba(255, 255, 255, 1);
  --popover_outline: rgba(71, 72, 74, 0.1);
  --popover-form-label: rgba(71, 72, 74, 1);
  --popover-form-input-border: rgba(71, 72, 74, 0.2);
  --popover-form-input-focus: rgba(31, 187, 246, 1);
  --popover-form-input-background: rgba(255, 255, 255, 1);
  --popover-form-input-placeholder: rgba(71, 72, 74, 0.8);
  --popover-form-link-accent: rgba(31, 187, 246, 1);
  --popover-form-button-color: rgba(255, 255, 255, 1);
  --popover-form-button-hover: rgba(5, 129, 179, 1);
  --informer_icon-color: rgba(0, 0, 0, 1);

  --textarea-border: 1px rgba(71, 72, 74, 0.2) solid;
  --textarea-color: var(--text-color);
  --textarea-placeholder: rgba(71, 72, 74, 0.8);
  --textarea-padding: 0.8em 0.8em 0.9em 0.8em;
  --textarea-background: rgba(255, 255, 255, 1);
  --textarea-border-radius: 3px;
  --textarea-font-family: 'Inter-Variable', sans-serif;
  --textarea-font-size: 14px;
  --textarea-font-weight: 300;

  --checkbox-color: rgba(71, 72, 74, 1);
  --checkbox-background: rgba(255, 255, 255, 1);
  --checkbox-border: rgba(71, 72, 74, 0.2);
  --checkbox-background: rgba(255, 255, 255, 1);
  --checkbox-border-radius: 3px;

  --form-color: rgba(71, 72, 74, 1);
  --form-color-title: rgba(255, 255, 255, 1);
  --form-placeholder: rgba(71, 72, 74, 0.8);
  --form-background: rgba(255, 255, 255, 1);
  --form-background-title: rgba(71, 72, 74, 0.8);
  --form-background-option: rgba(238, 246, 253, 1);
  --form-border-radius: 3px;
  --form-border: 1px rgba(71, 72, 74, 0.2) solid;
  --form-input-padding: 0.6em 0.8em 0.6em 0.8em;
  --form-input-padding-logged: 0.6em 2.8em 0.6em 0.8em;
  --form-family: 'Inter-Variable', sans-serif;
  --form-font-size: 14px;
  --form-font-weight: 300;

  --userinfo_icon-color: rgba(71, 72, 74, 0.8);
}
/*
@media (max-height: 600px) {

  :root {
    --font-size_h1: 20px;
    --font-size_h2: 18px;
    --nav_width: 60px;
    --height_main_header: 100px;
    --height_main_header-menu: 40px;
    --height_aside-header: calc(var(--height_main_header) - var(--height_main_header-menu));
  }

}
*/
@media (max-width: 768px) {
  :root {
    --nav_width: 70px;
    --separator-border-left: 0;
  }
}

@media (max-width: 480px) {

  :root {
    --nav_width: 54px;
    --font-size_h1: 18px;
    --font-size_h2: 16px;
    --height_main_header: 80px;
    --height_main_header-menu: 40px;
    --height_aside-header: 60px;
    --comments-avatar-width: 4em;
  }

}

@media (max-height: 600px) and (max-width: 1024px) {
  :root {
    --nav_width: 54px;
    --font-size_h1: 18px;
    --font-size_h2: 16px;
    --height_main_header: 80px;
    --height_main_header-menu: 40px;
    --height_aside-header: 60px;
    --comments-avatar-width: 4em;
    --separator-border-left: 0;
  }
}