* { margin: 0; padding: 0; box-sizing: border-box; line-height: 1.2 }
img { max-width: 100%; height: auto; vertical-align: middle; }

.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }

/* COLOR SCHEME
	logo blue: #02A2DE;
	light blue buttons: #04A1DC;
	dark blue: #071A3E;
	medium blue: #0071BC;
	light grey: #EFF5F8;
	dark red: #CF2E2E;
	red: #FF0000;
*/

/* SIZES
	width: 1280px;
*/

:root {
	--outer-padding: .6rem;
	--inner-padding: 1.2rem;
	--background-color-1: #369;
	--text-color-1: #fff;
	--background-color-2: #693;
	--text-color-2: #fff;
	--background-color-3: #ccc;
	--text-color-3: #000;
	--background-color-4: #ddd;
	--text-color-4: #111;
	--background-color-5: #eee;
	--text-color-5: #111;
	--background-color-6: #777;
	--text-color-6: #fff;
	--background-color-7: #444;
	--text-color-7: #fff;
	--background-color-8: #fff;
	--text-color-8: #222;
	--background-color-body: #EFF5F8;
	--text-color-body: #333;
	--background-color-wrapper: none;
	--text-color-wrapper: none;
	--background-color-item: #fff;
	--text-color-item: #222;
	--background-color-none: none;
	--text-color-none: none;
}

.row {
	display: grid;
	gap: var(--outer-padding);
	margin-bottom: var(--outer-padding);
}
.row:last-child { margin-bottom: 0; }

.cols1 { grid-template-columns: 1fr; }
.cols2 { grid-template-columns: repeat(2, 1fr); }
.cols3 { grid-template-columns: repeat(3, 1fr); }
.cols4 { grid-template-columns: repeat(4, 1fr); }
.cols5 { grid-template-columns: repeat(5, 1fr); }
.cols6 { grid-template-columns: repeat(6, 1fr); }

.cols2-12 { grid-template-columns: 1fr 2fr; }
.cols2-13 { grid-template-columns: 1fr 3fr; }
.cols2-14 { grid-template-columns: 1fr 4fr; }

.cols2-12r { grid-template-columns: 2fr 1fr; }
.cols2-13r { grid-template-columns: 3fr 1fr; }
.cols2-14r { grid-template-columns: 4fr 1fr; }

.cols3-121 { grid-template-columns: 1fr 2fr 1fr; }
.cols3-131 { grid-template-columns: 1fr 3fr 1fr; }
.cols3-141 { grid-template-columns: 1fr 4fr 1fr; }
.cols3-113 { grid-template-columns: repeat(2, 1fr) 3fr; }
.cols3-114 { grid-template-columns: repeat(2, 1fr) 4fr; }

.cols3-113r { grid-template-columns: 3fr repeat(2, 1fr); }
.cols3-114r { grid-template-columns: 4fr repeat(2, 1fr); }

body {
	background-color: var(--background-color-body);
	color: var(--text-color-body);
	font-family: sans-serif;
	font-size: 20px;
	overflow-y: scroll;
}

#wrapper {
	width: 1300px;
	margin: auto;
	background-color: var(--background-color-wrapper);
	color: var(--text-color-wrapper);
	padding: var(--outer-padding);
}

.item {
	background-color: var(--background-color-item);
	color: var(--text-color-item);
	padding: var(--inner-padding);
	border-radius: 3px;
}

.color1 { background-color: var(--background-color-1); color: var(--text-color-1); }
.color2 { background-color: var(--background-color-2); color: var(--text-color-2); }
.color3 { background-color: var(--background-color-3); color: var(--text-color-3); }
.color4 { background-color: var(--background-color-4); color: var(--text-color-4); }
.color5 { background-color: var(--background-color-5); color: var(--text-color-5); }
.color6 { background-color: var(--background-color-6); color: var(--text-color-6); }
.color7 { background-color: var(--background-color-7); color: var(--text-color-7); }
.color8 { background-color: var(--background-color-8); color: var(--text-color-8); }
.nocolor { background-color: var(--background-color-none); color: var(--text-color-none); }
.textcolorwhite { color: #eee; }
.textcolorblack { color: #222; }

#nav a {
	color: #fff;
	text-decoration: none;
	display: block;
}

#nav a:hover { color: #ffa; }

#page {}
#page h1, #page h2, #page h3, #page h4, #page h5, #page h6, #page p { margin-bottom: 20px; }

#side {}

/*** LARGE SCREENS ***/
@media screen and (max-width:1224px){
	#wrapper { width: 100%; }
}

/*** MEDIUM SCREENS ***/
@media screen and (max-width:1024px){
	.cols4 { grid-template-columns: repeat(2, 1fr); }
	.cols6 { grid-template-columns: repeat(3, 1fr); }
}

/*** SMALL SCREENS ***/
@media screen and (max-width:650px){
	.cols6 { grid-template-columns: repeat(2, 1fr); }
	.cols3,.cols5,.cols2-12,.cols2-13,.cols2-14,.cols2-12r,.cols2-13r,.cols2-14r,.cols3-121,.cols3-131,.cols3-141,.cols3-113,.cols3-114,.cols3-113r,.cols3-114r { grid-template-columns: 1fr; }
}

/*** EXTRA SMALL SCREENS ***/
@media screen and (max-width:450px){
	.cols2,.cols4,.cols6 { grid-template-columns: 1fr; }
}