@import "global.css";

/* background colors */
html {
	background-color: var(--background);
	color: var(--text);

	font-family: monospace;
}

/* main grid */
main {
	display: grid;
	grid-template-areas:
		'header header header'
		'body   body   side'
	;
}

#main_header {
	grid-area: header;
	background-color: var(--background-accent);
}

#main_header h1 {
	color: var(--c-title);
	font-size: var(--size-title);
}

#main_header p {
	font-size: var(--size-big);
	font-style: italic;
}

#main_body {
	grid-area: body;

	margin: 0;
	padding: 0;
}

#main_body .text {
	padding: var(--text-section-pad);
}

#main_body .text h1 {
	color: var(--c-header);
	font-size: var(--size-header);
}

#main_body .sub {
	background-color: var(--c-subbackground);
	color: var(--c-subtext);

	padding: var(--sub-section-pad);
}

#main_body .sub h1 {
	color: var(--c-subheader);
	font-size: var(--size-subheader);
}

#main_body .subsub {
	background-color: var(--c-subsubbackground);
	color: var(--c-subsubtext);
	padding: var(--subsub-section-pad);
}

#main_body .subsub h1 {
	color: var(--c-subsubheader);
	font-size: var(--size-subsubheader);
}

#main_side {
	grid-area: side;
	margin: 0;
	padding: 0;
}

#main_side p {
	padding: var(--text-section-pad);
}