/* src/assets/fonts/fonts.css */

@font-face {
    font-family: 'Comfortaa';
    src: url('/fonts/Comfortaa/Comfortaa-VariableFont_wght.woff2') format('woff2'),
        url('/fonts/Comfortaa/Comfortaa-VariableFont_wght.ttf') format('truetype');
    font-display: swap;
    font-weight: 100 900;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Golos Text';
    src: url('/fonts/Golos_Text/GolosText-VariableFont_wght.woff2') format('woff2'),
        url('/fonts/Golos_Text/GolosText-VariableFont_wght.ttf') format('truetype');
    font-display: swap;
    font-weight: 100 900;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'IBM Plex Sans';
    src: url('/fonts/IBM_Plex_Sans/IBMPlexSans-VariableFont_wdth,wght.woff2') format('woff2'),
        url('/fonts/IBM_Plex_Sans/IBMPlexSans-VariableFont_wdth,wght.ttf') format('truetype');
    font-display: swap;
    font-weight: 100 900;
    font-style: normal;
  }
  
  

:root {

    --BL_RED: rgba(207, 20, 23, 1);
    --20_R: rgba(207, 20, 23, 0.2);
    --40_R: rgba(207, 20, 23, 0.4);
    
    --BL_BLACK: rgba(7, 6, 0, 1);
    --90_B: rgba(22, 22, 26, 0.9);
    --80_B: rgba(22, 22, 26, 0.8);
    --75_B: rgba(7, 6, 0, 0.75); 
    --50_B: rgba(7, 6, 0, 0.5); 
    --10_B: rgba(7, 6, 0, 0.1); 
    --25_B: rgba(7, 6, 0, 0.25); 

    --BL_GRAY: rgba(22, 22, 26, 1);

    --BL_WHITE: rgba(251, 254, 249, 1);
    --80_W: rgba(251, 254, 249, 0.8);
    --70_W: rgba(251, 254, 249, 0.7);
    --10_W: rgba(251, 254, 249, 0.1);

    --gr-1:rgba(207, 20, 23, 0.5);
    --gr-2:rgba(99, 19, 87, 1);
    --gr-3:rgba(35, 16, 58, 1);
    --gr-4:rgba(53, 1, 63, 1);
    --gr-5:rgba(73, 43, 123, 1);



    /* 
    --font: [font-weight] [font-size]/[line-height] [font-family];
    
    - 400: font-weight (вес шрифта, например, normal = 400, bold = 700)
    - 16px: font-size (размер шрифта)
    - 1.5: line-height (межстрочный интервал)
    - 'Arial', sans-serif: font-family (семейство шрифтов)
    */

    --font-Golos-text: 400 16px/1.5 'Golos Text', sans-serif;
    --font-IBM-Plex-Sans: 400 16px/1.5 'IBM Plex Sans', sans-serif;
    --font-Comfortaa: 400 16px/1.5 'Comfortaa', sans-serif;
  
}

:root{
    --half-indent: 15px;
    --indentation: 30px;
    --distance: 10px;
    --small-distance: 5px;
    --radius-big: 28px;
    --radius-medial: 16px;
    --radius-small: 12px;
}

@media (max-width: 1439px) {
    :root{
        --indentation: 2.08vw;
        --half-indent: calc(var(--indentation) / 2);
        --distance: 0.69vw;
        --small-distance: 0.35vw;

        --radius-big:  1.94vw;
        --radius-medial: 1.11vw;
        --radius-small: 0.83vw;
    }
}

@media (max-width: 860px){
    :root{
        --indentation: 4vw;
        --half-indent:  1.333vw;
        --distance: 2.667vw;
        --small-distance: 1.333vw;
        --radius-big: 16px;
        --radius-medial: 12px;
        --radius-small: 8px;
    }
}

@media (max-width: 375px){
    :root{
        --indentation: 15px;
        --half-indent: 5px;
        --distance: 10px;
        --small-distance: 5px;
        --radius-big: 16px;
        --radius-medial: 12px;
        --radius-small: 8px;
    }
}