:root {
	--blue-main: #3dafe2;
	--background-default: #fafafa;
	--text-primary: #0e0d0f;
	--background-60: rgba(250, 250, 250, 0.6);
	--secondary-main: #0e0d0f;
	--secondary-0: rgba(14, 13, 15, 0);
	--divider-main: rgba(14, 13, 15, 0.08);
	--white-main: #fff;
	--text-secondary: rgba(14, 13, 15, 0.7);
	--purple---main: #6f76c0;
	--action---main-: rgba(14, 13, 15, 0.64);
	--background-0: rgba(250, 250, 250, 0);
	--background-2: rgba(250, 250, 250, 0.02);
	--background-80: rgba(250, 250, 250, 0.8);
	--shadow---24: rgba(14, 13, 15, 0.08);
	--blue-24: rgba(61, 175, 226, 0.24);
	--blue-16: rgba(61, 175, 226, 0.16);
	--blue-0: rgba(61, 175, 226, 0);
	--white-contrast: #fff;
	--black---main-: #0e0d0f;
	--secondary-48: rgba(14, 13, 15, 0.48);
	--background-48: rgba(250, 250, 250, 0.48);
	--divider-input: rgba(14, 13, 15, 0.24);
	--blue-48: rgba(61, 175, 226, 0.48);
	--white-48: rgba(255, 255, 255, 0.48);
	--backdrop---main: rgba(14, 13, 15, 0.9);
	--background-elevation: #fafafa;
	--secondary-24: rgba(14, 13, 15, 0.24);
	--blue-8: rgba(61, 175, 226, 0.08);
	--secondary-4: rgba(14, 13, 15, 0.04);
	--secondary-8: rgba(14, 13, 15, 0.08);
	--blue-4: rgba(61, 175, 226, 0.04);
}

:root {
  --font-family: "Urbanist", sans-serif;
  --second-family: "Lato", sans-serif;
  --third-family: "Ubuntu", sans-serif;
}
html[data-theme="dark"]{
    --background-default:#0e0d0f ;
    --text-primary:#fafafa;
}

body{
    font-family: var(--font-family);
    font-weight: 700;
    background-color: var(--background-default);
    transition: background-color 0.3s ease, color 0.3s ease;
}

header{
    padding: 16px;
    .site-branding{
        display: flex;
        color: var(--blue-48);
        
        .header-text{
            margin-left: 7px;
            font-family: var(--second-family);
            font-size: 18px;
            line-height: 120%;
            background: linear-gradient(90deg, #3dafe2 0%, #6f76c0 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .header-text, .header-logo{
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .header-menu{
        display: flex;
        flex-direction: column;
        .main-navigation li:not(:first-child) {
                margin-top: 48px;
                }
        #site-navigation{
            order: 2;
            margin-top: 63px;
            font-family: var(--third-family);
            font-weight: 500;
            font-size: 20px;
            line-height: 130%;
            text-transform: uppercase;
            color: var(--text-primary);
            a{
                font-family: var(--third-family);
                font-weight: 500;
                font-size: 20px;
                line-height: 130%;
                text-transform: uppercase;
                color: var(--text-primary);
            }

            
        }
        .header-menu_icons{
            margin-top: 16px;
            order: 1;
            display: flex;
            .header-menu_icons-icon:not(:first-child){
                margin-left: 7px;
            }
            .header-menu_icons-icon{
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: transform 0.25s ease, color 0.25s ease;
            }
            .header-menu_icons-icon:hover {
                transform: scale(1.08);
                }
           .header-menu_icons-member{
            font-family: var(--font-family);
            font-weight: 700;
            font-size: 12px;
            line-height: 140%;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--text-primary);
            border: 1px solid var(--divider-main);
            border-radius: 5px;
            padding: 4px 20px;
            height: 40px;
            margin-left: 7px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.2s ease, color 0.25s ease;
                    }
            .header-menu_icons-member:hover{
                color: var(--blue-main);
            }
        }
    }
}