/* learnwithai-shared.css v1.1, modified to adjust rubric shadow and root colors. */

/* ________________ Design parameters. ________________ */
:root {
	/* Global dimensions. */
	--container-width: 1000px;
	--margin-wide: 40px;
	--padding-padlet: 1em;
	--padding-section: 1em;
	--event-min-height: 100px;
	--lexia-transition-duration: 0.3s;
	
	/* Global colors. Screen-specific values are below. */
	--h-cooler: 220;
	--h-medium: 210;
	--h-warmer: 200;
	--h-warmest: 160;
	--h-rotate-from-sepia: 170deg;
	
	/* Ice: a cool, dull blue. */
	--pale-ice: azure;
	--medium-ice: hsla(var(--h-medium), 30%, 50%, 1);
	--dark-ice: hsla(var(--h-medium), 30%, 30%, 1);
	--darker-ice: hsla(var(--h-medium), 100%, 20%, 1);
	--darkest-ice: hsla(var(--h-medium), 100%, 10%, 1);
	
	/* Celeste: a more saturated, warmer blue. */
	--pale-celeste: hsla(var(--h-medium), 90%, 80%, 1);
	--dull-celeste: hsla(var(--h-warmer), 40%, 70%, 1);
	--deep-celeste: hsla(var(--h-warmer), 60%, 70%, 1);
	--medium-celeste: hsla(var(--h-warmer), 60%, 20%, 1);
	--dark-celeste: hsla(var(--h-warmer), 60%, 15%, 1);
	--darkest-celeste: hsla(var(--h-warmer), 100%, 7%, 1);
	
	/* Jade: even more saturated and warmer. */
	--pale-jade: hsla(var(--h-warmest), 100%, 40%, 1);
	--medium-jade: hsla(var(--h-warmest), 100%, 20%, 1);
	
	/* Lexia and other backgrounds. */
	--lexia-lightest: azure;
	--lexia-lighter: paleturquoise;
	--lexia-darker: teal;
	--dull-aqua: lightseagreen;
	--darker-body: hsla(180, 25%, 25%);
	
	/* Gradients */
	--gradientStopA: hsla(var(--h-warmer), 100%, 10%, 0.8);
	--gradientStopB: hsla(var(--h-warmer), 100%, 60%, 0);
	--gradientStopC: hsla(var(--h-warmer), 70%, 35%, 0.8);
	--gradientStopD: hsla(var(--h-warmer), 70%, 60%, 0);
	--gradientStopE: hsla(var(--h-cooler), 90%, 90%, 0.8);
	--gradientStopF: hsla(var(--h-cooler), 90%, 95%, 0);
	--gradient-lightest: hsla(var(--h-warmer), 90%, 95%, 1);
	--background-lightest: skyblue;
	
	/* Shadows. */
	--cluster-shadow: hsl(var(--h-warmer), 5%, 5%);
	--screenshot-background: hsla(0, 0%, 0%, 0.5);
	
	/* Accents. */
	--accent: aqua;
	--highlight: lime;
}

/* ________________ Fonts ________________ */
@font-face {
	font-family: "sansation-light";
	src: url("../fonts/Sansation-Light.ttf") format("truetype");
}

@font-face {
	font-family: "sansation-regular";
	src: url("../fonts/Sansation-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "sansation-bold";
	src: url("../fonts/Sansation-Bold.ttf") format("truetype");
}

/* ________________ Universal tags. ________________ */
*,
:before,
:after {
	box-sizing: border-box;
}

html {
	height: 100%;
	scroll-behavior: smooth;
}

body {
	background-color: var(--gradient-lightest);
	margin: 0;
	font-family: century gothic, verdana, sans-serif;
	color: var(--darker-ice);
}

h1 {
	font-family: sansation-bold;
	color: var(--darker-ice);
}

h2 {
	color: var(--darker-ice);
	font-family: sansation-bold;
}

h3 {
	color: var(--darker-ice);
	font-weight: normal;
}

p {
	color: var(--darker-ice);
	line-height: 1.6;
}

/* ________________ Links ________________ */
a {
	color: var(--darker-ice);
	font-weight: normal;
	background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
	background-repeat: no-repeat;
	background-size: 100% 0.2em;
	background-position: 0 88%;
	transition: background-size 0.1s ease-in;
	text-decoration: none;
}

a:hover {
	background-size: 100% 88%;
	cursor: pointer;
}

/* ________________ Watermark / Background ________________ */
#watermark {
	position: absolute;
	width: 100%;
	height: 2000px;
	z-index: -1;
	background-image: 
		linear-gradient(150deg, var(--gradientStopA), var(--gradient-lightest) 35%), 
		linear-gradient(217deg, var(--gradientStopC), var(--gradient-lightest) 30%), 
		linear-gradient(0deg, var(--gradientStopE), var(--gradient-lightest) 20%);
	background-color: var(--gradient-lightest);
}

/* ________________ Header ________________ */
#header {
	position: relative;
	padding-top: 20px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0 25px;
	max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
}

#header img {
	width: 3vw;
	text-shadow: black 0 0 0.2em;
}

h2#rubric {
	font-size: clamp(2.2rem, 5vw, 4.5rem);
	text-align: center;
	color: var(--lexia-lightest);
	font-family: sansation-regular;
	/* text-shadow: black 0 0 0.2em; */
	text-shadow: var(--darker-ice) 0 0 0.2em;
}

/* ________________ Footer ________________ */
.footer {
	clear: both;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-height: 200px;
	width: 90vw;
	max-width: var(--container-width);
	margin: 40px auto 0;
	padding-top: 20px;
}

.footer > img {
	height: 70px;
	z-index: 1;
	padding: 10px;
}

.nmd-logo-phrase {
	width: 200px;
}

.nmd-logo-phrase img {
	width: 100%;
}

#credit {
	display: flex;
}

#credit p {
	align-self: center;
}