/*
	Colors
*/
:root {
	/* Primative colours */
	--black:          #000000;
	--darkest-grey:   #080808;
	--darker-grey:    #101010;
	--dark-grey:      #202020;
	--grey:           #404040;
	--light-grey:     #808080;
	--white:          #eeeeee;

	--dark-red: #880000;

	--dark-green: #008800;

	--red:     #c40000;
	--yellow:  #c48800;
	--green:   #00c400;
	--cyan:    #0088c4;
	--blue:    #0000c4;
	--magenta: #8800c4;

	--light-red: #ff0000;
	--light-yellow: #ffff00;
	--light-green: #00ff00;
	--light-cyan: #00ffff;
	--light-blue: #0000ff;
	--light-magenta: #ff00c4;

	/* Colours */
	--accent: var(--red);

	--background: var(--black);
	--background-accent: var(--dark-green);
	--background-nav: var(--darkest-grey);

	--c-title: var(--white);
	--text: var(--white);
	--c-header: var(--red);

	--c-subheader: var(--light-yellow);
	--c-subtext: var(--yellow);
	--c-subbackground: var(--darkest-grey);

	--c-subsubheader: var(--light-green);
	--c-subsubtext: var(--green);
	--c-subsubbackground: var(--black);

	--cborder-nav: var(--blue);

	/* Sizes */
	--border-width: 2px;
	--big-section-pad: 0.2rem 1rem;
	--text-section-pad: 0.2rem 2rem;
	--sub-section-pad: 0.2rem 4rem;
	--subsub-section-pad: 0.2rem 6rem;

	--size-base: 1rem;
	--size-big: 1.25rem;

	--size-title: 2rem;
	--size-header: 1.6rem;
	--size-subheader: 1.4rem;
	--size-subsubheader: 1.2rem;
}

html {
	background-color: var(--background);
	color: var(--text);
}

main {
	background-color: var(--background);
}

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

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

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

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

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

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

#main_body .subsub h1 {
	color: var(--c-subsubheader);
}
/*
	main
*/
html {
	font-family: monospace;
	height: 100vh; /* 100% viewport height */
}

/* navigation */
body {
	display: grid;
	grid-template-areas:
		'nav-area main main main main main main main'
	;

	margin: 0;
	height: 100%;
}

#nav_area {
	grid-area: nav-area;
	width: 16rem;
	height: 100%;
	border: none;
}

#content {
	grid-area: main;
}

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

header {
	padding: var(--big-section-pad);
}

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

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 {
	font-size: var(--size-header);
}

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

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

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

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

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

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