@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Saira+Stencil+One&family=Questrial&display=swap');
/* @import url('debug.css'); */

/* CSS Styles for CricketStar */

:root {
	--font-primary: "Questrial", serif;
	--font-secondary: "Noto Sans", sans-serif;

	--bg-color: white;
	--bg-color-light: #e4f6f2;
	--bg-color-highlight: #fefefe;
	--bg-color-dark: #020655;
	--bg-color-footer: white;
	--bg-color-nav: white;
	--bg-color-homepage-divider: #020655;

	--text-color-footer: black;
	--text-color-dark: #141414;
	--text-color-highlight: #bbd;
	--text-color-white: white;
	--text-color-stroke: rgba(191,191,255,0.5);

	--heading-primary-color: #141414;
	--heading-primary-highlight: transparent;

	--border-color: #8b8997;
	--border-color-light: #cccccc;
	--border-color-dark: #020655;

	--shadow-color: rgba(139, 137, 151, 0.5);
	--shadow-sm: 3px 3px 3px var(--shadow-color);
	--shadow-md: 0 0 0px 1px var(--shadow-color);
	--shadow-lg: 0 0 0px 1px var(--shadow-color);
	--shadow-old: 4px 4px black;
	
	--link-color: #333;
	--link-color-highlight: #bcb594;
	--link-color-footer: #020655;
	--link-color-disabled: rgba(2, 6, 85, 0.5);

	--btn-primary-color: white;
	--btn-primary-bg: #333;
	--btn-primary-accent: #a0d91f;
	--btn-primary-highlight: #bbd;
	--btn-primary-dark: #99ff22;

	--btn-secondary-color: white;
	--btn-secondary-bg: #333;
	--btn-secondary-accent: #c32f90;
	--btn-secondary-highlight: #bbd;
	--btn-secondary-dark: #020655;

	--btn-tertiary-color: white;
	--btn-tertiary-bg: #333;
	--btn-tertiary-accent: #99adf3;
	--btn-tertiary-highlight: #5e62a2;
	--btn-tertiary-dark: #3e4fb7;

	--error-color: #DC3545;

	--border-radius-xl: 50px;
	--border-radius-lg: 20px;
	--border-radius-md: 10px;
	--border-radius-sm: 5px;
	--border-radius-xs: 2px;

	--hero-aspect: 776 / 500;
	--hero-aspect-wide: 776 / 500;

	--font-mobile-16:16px;
	--font-mobile-14:14px;
	--font-mobile-12:12px;
	--font-mobile-10:10px;
	
	--game-wheel-primary-bg:cyan;
	--game-wheel-secondary-bg:red;
	--game-wheel-tertiary-bg:green;
}

.heroLink, .tileImage, .carousel {
	filter: saturate(10%) contrast(50%) brightness(125%);
}
.splashBottom {
	filter: saturate(0%);
}