/*--------- COLORS ----------------------------*/


@media (prefers-color-scheme: light) {
    /* :root {
        color-scheme: light;
    } */
}

@media (prefers-color-scheme: dark) {
    /* :root {
        color-scheme: dark;
    } */

    /* img {
		filter: brightness(80%);
	  } */


}



:root {
    
    --light: #ffffff;
    --accent0: #ff00c8;
    --accent1: #eb6625;
    --accent2: #35699e;
    --accent3: #f88b42;
    --accent5: #00b7b3;
    --accent6: #00b77d;
    --accent7: #5473A9;
    --accent8: #6A90D3;
    
    
    /*--------- HEADER ----------------------------*/
    --telegramColor: var(--accent8) !important;
    --telegramHover: var(--accent7) !important;
    --WhatsAppColor: var(--accent5) !important;
    --WhatsAppHover: var(--accent6) !important;
    
    /*--------- NAVIGATION ------------------------*/
    /* --MenuColor: linear-gradient(180deg, var(--MainColor), var(--MainColor) calc(100% - 4px), var(--MainColor) calc(100% - 4px)) !important; */
    
    --contentWidth: 1152px;
    
    }



.dark-theme {
    color-scheme: dark;

    --color8: #fafcffa3;
    --color7: #ecf2fc;
    --color6: #b7bfd2;
    --color5: #7482A1;
    --color4: #4E5C7A;
    --color3: #3d517a;
    --color2: #082648;
    --color1: #061a31;
    --color0: #061a31db;

    --textLight: #f9f9f9;
    --textDark: #071937;

    --brightness: brightness(80%);

    /* --videofilter: url('#bluefill') brightness(0.2); */
    /* --videofilter: hue-rotate(182deg) brightness(97%) invert(100%) opacity(100%); */
    --videofilter:  opacity(90%) contrast(124%);


    --LightSchemeOn: none !important;
    --DarkSchemeOn: flex !important;

    --gradient1: linear-gradient(-9deg, var(--color2), var(--color1) 142%);
    --gradient2: linear-gradient(-6deg, var(--color2) 0%, var(--color3) 142%);
    --gradient3: linear-gradient(-9deg, var(--color1) 56%, var(--color3) 110%);


}


.light-theme {
    color-scheme: light;

    --color0: #fdfdfdcf;
    --color1: #ffffff;
    --color2: #f3f3f5;
    --color3: #bbc1ce;
    --color4: #8d97ad;
    --color5: #4a5775;
    --color6: #233046;
    --color7: #061a31;
    --color8: #151D2Aaa;


    --textLight: #081b3a;
    --textDark: #fff;

    --brightness: brightness(100%);

    /* --videofilter: url('#blur'); */
    /* --videofilter: none; */
    --videofilter: brightness(124%) contrast(107%);

    --LightSchemeOn: flex ;
    --DarkSchemeOn: none;

    --gradient1: linear-gradient(-9deg, var(--color2), var(--color1) 142%);
    --gradient2: linear-gradient(-6deg, var(--color5) 0%, var(--color4) 142%);
    /* --gradient2: linear-gradient(-6deg, #00cf16 0%, #88ef00 142%); */
    --gradient3: linear-gradient(-9deg, var(--color3) 56%, var(--color1) 110%);

}




.dark-scheme-hide {
    display: var(--DarkSchemeOn) !important;
}

.light-scheme-hide {
    display: var(--LightSchemeOn) !important;
}


.theme-icon-color {
    fill: var(--color6);
}

.theme-icon-color:hover {
    fill: var(--accent1) !important;
}




/*--------------------------------------------------*/
/* overflow-x: clip; */


html,
body {
    padding: 0;
    margin: 0;
    min-width: 100%;
    max-width: 100%;
}

html {
    min-height: 100%;
    font-family: "Onest", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    scroll-behavior: smooth;

}

.pswp__bg {
    background: var(--gradient2);
}


html {
    background: var(--color1);
}


body {
    height: 100%;
    width: 100%;
    background-color: var(--color1);
    color: var(--textLight);
    /* color: var(--textDark); */
}









/*--------- MAIN ------------------------------*/
/*--------- HEADER ----------------------------*/
/*--------- NAVIGATION ------------------------*/
/*--------- CONTENT ---------------------------*/
.Page-Content {
    /* background: #fff; */
}

.Breadcrumbs-Breadcrumb {
    color: var(--color5);
}



/*--------- INTRO -----------------------------*/
/*--------- TILE ------------------------------*/
/*--------- TABLE -----------------------------*/
/*--------- FOOTER ----------------------------*/

footer {
    color: var(--textLight);
    background: var(--color1);
}


/*--------- DESCRIPTION -----------------------*/





/*----------- DESCTOP ---------------------------------------------------*/
@media screen and (min-width:769px) {

    html,
    body,
    header {
        min-width: calc(80px + var(--contentWidth));
    }


    /*--------- MAIN ------------------------------*/

    /*--------- SCROLLBAR -----------------------------*/
    ::-webkit-scrollbar-button {
        background-repeat: no-repeat;
        width: 15px;
        height: 0px
    }

    ::-webkit-scrollbar-track {
        background-color: var(--color2);
    }

    ::-webkit-scrollbar-thumb {
        -webkit-border-radius: 0px;
        border-radius: 0px;
        background: linear-gradient(45deg, var(--color1) 0%, var(--color2) 100%);
        width: 10%
    }

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(45deg, var(--color2) 0%, var(--color5) 100%);
    }

    ::-webkit-resizer {
        background-repeat: no-repeat;
        width: 15px;
        height: 0px
    }

    ::-webkit-scrollbar {
        width: 15px;
    }



    /*--------- HEADER ----------------------------*/

    /*--------- NAVIGATION ------------------------*/

    /* .MenuDesktop-Link {
		color: #272a6e;
	}

	a.MenuDesktop-Link:nth-child(1):hover {
		color: #f2c700;
	}

	a.MenuDesktop-Link:nth-child(2):hover {
		color: #307aff;
	}

	a.MenuDesktop-Link:nth-child(3):hover {
		color: #54df0f;
	}

	a.MenuDesktop-Link:nth-child(4):hover {
		color: #f2c700;
	}

	a.MenuDesktop-Link:nth-child(5):hover {
		color: #307aff;
	}

	a.MenuDesktop-Link:nth-child(6):hover {
		color: #54df0f;
	} */



    /*--------- CONTENT ---------------------------*/
    /*--------- INTRO -----------------------------*/
    /*--------- TILE ------------------------------*/
    /*--------- TABLE -----------------------------*/
    /*--------- FOOTER ----------------------------*/
    /*--------- DESCRIPTION -----------------------*/


}



/*----------- MOBILE ----------------------------------------------------*/
@media screen and (max-width:768px) {



    /*--------- MAIN ------------------------------*/
    /*--------- HEADER ----------------------------*/
    /*--------- NAVIGATION ------------------------*/
    /*--------- CONTENT ---------------------------*/
    /*--------- INTRO -----------------------------*/
    /*--------- TILE ------------------------------*/
    /*--------- TABLE -----------------------------*/
    /*--------- FOOTER ----------------------------*/
    /*--------- DESCRIPTION -----------------------*/


}