/* Define the charset to interpret this stylesheet in */
@charset "utf-8";

/* Define global variables */
:root {
	--page-ui-hue-main: 250;
	--page-ui-hue-accent: 40;
	--page-ui-hue-link: 200;
	--color-page-text: hsl(var(--page-ui-hue-main), 20%, 60%);
	--color-page-text-secondary: hsl(var(--page-ui-hue-main), 15%, 65%); /* Used in the footer and character titles */
	--color-scrollbar: hsl(var(--page-ui-hue-main), 10%, 50%);
	--color-scrollbar-background: hsl(var(--page-ui-hue-main), 0%, 100%);
	--color-heading: hsl(var(--page-ui-hue-accent), 85%, 60%);
	--color-links-normal: hsl(var(--page-ui-hue-link), 80%, 70%);
	--color-links-hover: hsl(var(--page-ui-hue-link), 90%, 50%);
}

body {
	background-image: url(/static/siteBackground_light.png), linear-gradient(to bottom, white, white 25%, hsl(0, 0%, 80%));
}

.footer {
    background: linear-gradient(to right,
            hsl(var(--page-ui-hue-main), 0%, 85%),
            hsl(var(--page-ui-hue-main), 0%, 92%) 50%,
            hsl(var(--page-ui-hue-main), 0%, 85%));
}

.navigation {
    background: linear-gradient(to right,
            hsl(var(--page-ui-hue-main), 0%, 90%),
            hsl(var(--page-ui-hue-main), 0%, 95%) 40%,
            hsl(var(--page-ui-hue-main), 0%, 95%) 60%,
            hsl(var(--page-ui-hue-main), 0%, 90%));
}
.navigation_mobile {
    background: linear-gradient(to right,
            hsl(var(--page-ui-hue-main), 0%, 90%),
            hsl(var(--page-ui-hue-main), 0%, 95%) 40%,
            hsl(var(--page-ui-hue-main), 0%, 95%) 60%,
            hsl(var(--page-ui-hue-main), 0%, 90%));
}

.page_body_landing {
    background: linear-gradient(to bottom, white, hsl(var(--page-ui-hue-main), 0%, 96%));
}

.page_main {
	background: linear-gradient(to bottom, white, hsl(var(--page-ui-hue-main), 0%, 96%));
}

.safetyTagLabel {
    background: hsl(2, 80%, 70%);
    color: white;
}
.characterTagLabel {
    background: hsl(200, 75%, 75%);
}
.characterTagLabel a {
    color: white;
}
.contentTagLabel {
    background: hsl(var(--page-ui-hue-accent), 80%, 70%);
}
.contentTagLabel a {
    color: white;
}