:root {
	--body: rgb(240,245,255);
	--body_text_01: rgb(20,40,60);
	--body_text_02: rgb(120,140,160);
	--body_gradient_01: rgba(220,235,240,0.75);
	--body_gradient_02: rgba(245,250,255,0.25);
	--img_bg: rgb(255,255,255);

	/* links */
	--link: rgb(80, 40, 0);
	--link_visited: rgb(0,100,200);

	/* shadows */
	--body_shadow: rgba(160,170,180,0.75);
	--body_shadow_full: 4px 4px 8px rgba(160,170,180,0.5);

	/* forms */
	--form_colour: rgb(220,240,255,0.5);
	--form_input: rgb(255,255,255);
	--form_input_hover: brightness(0.98);
}

body > header{background: linear-gradient(var(--body_gradient_01), var(--body_gradient_02));}
body > footer{background: linear-gradient(var(--body_gradient_02), var(--body_gradient_01));}

@media (prefers-color-scheme: dark) {
	:root {
		--body: rgb(25,35,50);
		--body_text_01: rgb(220,230,240);
		--body_text_02: rgb(180,200,220);
		--body_gradient_01: rgb(0,10,20,0.75);
		--body_gradient_02: rgb(0,20,40,0.25);
		--img_bg: rgb(5,15,25);

		/* links */
		--link: rgb(0,100,200);
		--link_visited: rgb(138,43,226);

		/* shadows */
		--body_shadow: rgb(0,0,0);
		--body_shadow_full: 4px 4px 8px rgba(0,0,0);

		/* forms */
		--form_colour: rgb(40,80,100,0.75);
		--form_input: rgb(20,40,60);
		--form_input_hover: brightness(0.98);
	}

	body > header{background: linear-gradient(var(--body_gradient_01), var(--body_gradient_02));}
	body > footer{background: linear-gradient(var(--body_gradient_02), var(--body_gradient_01));}
}