/* root colors, etc */
:root {
	color-scheme: light dark;
	/* ? */
	--color-text: #333333;
	--color-background: #ffffff;

	--dark-gray: #333333;
	--medium-gray: #888888;
	--light-gray: #cccccc;


	--font-family: 'Work Sans', sans-serif;
	--font-family-heading: 'Tomorrow', sans-serif;

	--font-style-normal: normal;
	--font-style-italic: italic;
	--font-style-oblique: oblique;

	--font-size-xxsmall: 0.5rem;
	--font-size-small: 0.75rem;
	--font-size-normal: 1rem;
	--font-size-large: 1.25rem;
	--font-size-xlarge: 1.5rem;
	--font-size-xxlarge: 2rem;

	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-bold: 700;

}

/* Media Queries for color scheme */
/* will change the texture image as well */
@media (prefers-color-scheme: dark) {
	:root {
		--color-text: #cccccc;
		--color-background: #000000;
		/* --background-texture: url(../graphics/texture-light.png); Have you optimized your PNG? */
	}
	.footer {
		border-top: 1px solid var(--light-gray);
		background-color: var(--dark-gray);
		color: var(--light-gray);
	}
}

@media (prefers-color-scheme: light) {
	:root {
		--color-text: #333333;
		--color-background: #ffffff;
		/* --background-texture: url(../graphics/texture-dark.png); Have you optimized your PNG? */
	}
	.footer {
		border-top: 1px solid var(--dark-gray);
		background-color: var(--light-gray);
		color: var(--dark-gray);
	}	
}

body {
	font-family: var(--font-family);
	font-weight: var(--font-weight-normal);
	font-style: var(--font-style-normal);
	font-size: 1rem;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	color: var(--color-text);
	background-color: var(--color-background);
	background-image: var(--background-texture);
}

.header {
	/* background-color: var(--color-primary); */
	font-family: var(--font-family-heading);
	text-align: center;
}

.header h1 {
	font-size: 3rem;
	font-weight: var(--font-weight-bold);
}

.header h2 {
	font-size: 1.5rem;
	font-weight: var(--font-weight-bold);
}

/* Structural CSS Grid Basics */
.container {
	display: grid;
	grid-template-columns: 1fr minmax(auto, 1168px) 1fr;
	grid-template-rows: auto 1fr auto;
	gap: 0px 0px;
	grid-template-areas:
		"header header header"
		". content ."
		"footer footer footer";
}

.header {
	grid-area: header;
	max-height: 240px;
	/* Max height for the header */
}

.content {
	grid-area: content;
}

emphasis {
	font-size: var(--font-size-large);
	font-weight: var(--font-weight-bold);
}

.footer {
	font-size: var(--font-size-small);
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	gap: 0px 0px;
	grid-template-areas:
		"copyright disclaimer credits";
	grid-area: footer;
}

.copyright {
	grid-area: copyright;
	padding: 13px;
	text-align: center;
}

.credits {
	grid-area: credits;
	padding: 13px;
	text-align: center;
}

.disclaimer {
	grid-area: disclaimer;
	padding: 18px;
	text-align: justify;
}

/* Media Queries for CSS Grid */
@media screen and (max-width: 1198px) {
	.container {
		grid-template-columns: 0 minmax(auto, 1198px) 0;
		/* Side columns shrink to 0 below 1198px */
	}
	.content {
		margin: 0 auto;
		padding: 0 13px;
		/* Padding for content area below 1198px */
	}
	.footer {
		margin: 0 auto;
		padding: 0 13px;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		grid-template-areas:
			"copyright"
			"disclaimer"
			"credits"}
}