:root {
    --color-white: 255 255 255;
    --color-black: 51 51 51;
    --color-gray-1: 46 50 65;
    --color-gray-2: 148 151 158;
    --color-gray-3: 223 225 231;
    --color-gray-4: 242 243 247;
    --color-dark-gray: 59 63 70;
    --color-primary: 0 86 179;
    --color-green: 25 135 84;
    --color-red: 255 105 97;
    
    --opacity-100: 0.1;
    --opacity-250: 0.25;
    --opacity-600: 0.6;
    --opacity-700: 0.7;
    --opacity-900: 0.9;

    
    --border-white: 1px solid rgba(var(--color-white) / var(--opacity-100));
    --border-blue: 1px solid rgba(var(--color-white) / var(--opacity-100));
    --border-radius-sm: 4px;
    
    --shadow-light: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    
    --font-main: 'Lexend';

    --font-size-xs: 12px;
    --font-size-s: 14px;
    --font-size-m: 20px;
    --font-size-ml: 40px;
    --font-size-l: 48px;
    --font-size-xl: 64px;
    
    --line-height-s: 22px;
    --line-height-m: 32px;
    --line-height-ml: 46px;
    --line-height-xl: 54px;
    
    --font-weight-regular: 400;
    --font-weight-bold: 600;
    --font-weight-thin: 200;

    --space-sections-xs: 50px;
    --space-sections-s: 80px;
    --space-sections-m: 160px;
    --space-sections-l: 240px;
    
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 40px;
    --space-11: 44px;
    --space-12: 48px;
    --space-13: 52px;
    --space-14: 56px;
    --space-15: 60px;
    --space-16: 64px;
    
    --chip-image: url("/img/chip_background.jpg");

    --bg-overlay: linear-gradient(rgba(var(--color-primary) / var(--opacity-900)));
    
    --max-width: 940px;
}

@media (max-width: 1020px) {
    :root {
        --max-width: 760px;
    }
}

@media (max-width: 820px) {
    :root {
        --max-width: unset;
    }
}