:root {
    --container-width: 1392px;

    /*main colors*/
    --color-white: #fff;
	--color-black: #000;
    --color-dark: #111;
    --color-dark-2: #1b0029;
    --color-accent: #5F0092;
    --color-accent-2: #FFA800;
    --color-accent-3: #9F3200;

    /*header, footer, body background*/
    --color-bg-header-footer: var(--color-dark-2);
    --color-bg-body: var(--color-dark);

    /*texts colors*/
    --color-nav-menu-text: var(--color-white);
    --color-p: var(--color-white);
    --color-button-text: var(--color-white);
    --color-font-shadow: var(--color-dark);
    --font-shadow: drop-shadow(0 2px 0 var(--color-accent-3));

    /*text gradients settings*/
    --gradient-headers: linear-gradient(to bottom, var(--color-white) 25%, var(--color-accent-2) 75%);
    --gradient-headers-title-fixed: linear-gradient(to bottom, var(--color-white) 25%, var(--color-accent-2) 100%);
    --green-gradient: linear-gradient(to bottom, #4BAEFE, #0E46FF);
    --green-gradient-hover: linear-gradient(to top, #4BAEFE, #0E46FF);

    /*buttons and elements*/
    --color-elements: var(--color-accent-2);
    --color-button-anchor-text: var(--color-white);
    --color-button-anchor-bg: var(--color-dark);
    --color-anchor-menu-primary: var(--color-dark);
    --color-anchor-menu-secondary: var(--color-accent);

    /*banners*/
    --color-banner-bg: var(--color-accent);
    --color-banner-text: var(--color-white);

    /*font settings*/
    --header-height: 8rem;
    --font-base-letter-spacing: -.01em;
    --font-secondary-letter-spacing: .01em;

    /*font sizes*/
    --font-size-xs: 12px;
    --font-size-sm: 20px;
    --font-size-md: 24px;
    --font-size-lg: 28px;
    --font-size-xl: 32px;
    --font-size-2xl: 40px;
    --font-size-3xl: 54px;

    /*line heights*/
    --line-height-sm: 24px;
    --line-height-md: 36px;
    --line-height-lg: 42px;
    --line-height-xl: 50px;
    --line-height-relative: 1.2em;

    /*spacing system*/
    --spacing-xs: 10px;
    --spacing-sm: 15px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 40px;
    --spacing-2xl: 50px;

    /*border radius*/
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 15px;
    --radius-xl: 40px;
    --radius-full: 50%;

    /*transitions*/
    --transition-fast: 0.2s linear;
    --transition-normal: 0.3s ease;

    /*z-index layers*/
    --z-nav: 10;
    --z-aside: 1;
    --z-header: 100;

    /*layout sizes*/
    --header-height-desktop: 80px;
    --header-height-mobile: 58px;
    --aside-width: 194px;
    --container-padding: 30px;
    --container-padding-mobile: 20px;

    --clip-for-corners: polygon(
            calc(0% + 8px) 0%,
            calc(100% - 8px) 0%,
            100% calc(0% + 8px),
            100% calc(100% - 8px),
            calc(100% - 8px) 100%,
            calc(0% + 8px) 100%,
            0% calc(100% - 8px),
            0% calc(0% + 8px)
    );
}