/* ***** GLOBAL ***** */

:root {
  --bg: black;
  --fg: white;
  --link: gold;
  --header: red;

}

body {
	background-color: #4682B4;
}

.container {
	display:grid;
	grid-template-columns: 180px auto 180px;
	grid-template-rows: 80px auto;
	grid-template-areas:
		'top top top'
		'left content right';
	padding: 0;
	margin:0;
	grid-row-gap: 0px;
	grid-column-gap: 0px;
}

a {
	font-style: Verdana;
	font-size: 14pt;
	font-weight: bold;
	color: var(--link);
	text-decoration: none;
}

/* ***** TOP ***** */

.top {
	grid-area: top;
	top: 0;
	padding-left: 5;
	padding-top: 0;
	padding-right: 5;
	margin: 0;
	background-color: var(--bg);
	color: var(--fg);
	font-style: Verdana;
	font-size: 12pt;
}

.top .item {
	font-style: Verdana;
	font-size: 18pt;
	font-weight: bold;
}

.top .subitem {
	font-style: Verdana;
	font-size: 16pt;
	font-weight: bold;
}

.top .navbar {
	display: grid;
	grid-template-columns: 20% 20% 20% 20% 20% 20%;
	grid-template-areas: '1 2 3 4 5';
}

/* ***** LEFT ***** */

.left {
	grid-area: left;
	padding-left: 10px;
	padding-right: 5px;
	padding-top: 10px;
	top: 130px;
	min-width: 175px;
	min-height: 84vh;
	background-color: var(--bg);
	color: var(--fg);
	font-style: Verdana;
	font-size: 12pt;
}

.left .item {
	font-style: Verdana;
	font-size: 14pt;
	font-weight: bold;
	color: var(--fg);
	margin-top: 10px;
}

.left .subitem {
	font-style: Verdana;
	font-size: 14pt;
	margin-left: 10px;
	color: white;
}

.left ul {
	margin-left: -5;
	margin-top: 0;
	margin-bottom: 5;
}

.left li {
	margin-left: -25;
	list-style-type: none;
}

/* ***** CONTENT ***** */

.content {
	grid-area: content;
	padding: 10px;
	min-height: 84vh;
	font-family: Verdana;
	font-size: 12pt;
	background-color: var(--fg);
	color: var(--bg);
	border: black 2px solid;
	font-style: Verdana;
	font-size: 12pt;
}

.content .box {
	display: inline-block;
	float: right;
	min-width: 200;
	max-width: 200;
	padding: 10 10 10 10;
	margin: 0 5 10 10;
	border: 2px solid black;
	border-radius: 20px;
	background-color: var(--bg);
	color: var(--fg);
}

.content .title {
	font-family: Franklin Gothic Book;
	font-size: 16pt;
	font-weight: bold;
	color: var(--content-fg);
}

.content .item {
	font-size: 12pt;
	font-weight: bold;
	color: var(--header);
}

.content .subitem {
	font-size: 12pt;
	margin-left: 20px;
	margin-right: 10px;
}

.content ul {
	margin-left: -5;
	margin-top: 0;
	margin-bottom: 5;
}

.content li {
	margin-left: -20;
	list-style-type: circle;
}

.content .lii {
	background-image: url('images/dot.png');
	background-repeat: no-repeat;
	background-position-y: center;
	padding-left: 20px;
	display: black;
}

.content .i20 {
	margin-left: 25px;
}

.box li {
	margin-left: -25;
	list-style-type: none;
}

.content a {
	font-style: Verdana;
	font-size: 12pt;
	font-weight: bold;
	color: var(--link);
	text-decoration: none; 
}

/* ***** RIGHT ***** */

.right {
	padding-left: 10px;
	padding-right: 0px;
	padding-top: 10px;
	grid-area: right;
	min-height: 84vh;
	background-color: var(--bg);
	color: var(--fg);
	font-style: Verdana;
	font-size: 12pt;
}

.right .item {
	font-style: Verdana;
	font-size: 14pt;
	font-weight: bold;
	color: var(--fg);
	margin-top: 10px;
}

.right .subitem {
	font-style: Verdana;
	font-size: 14pt;
	margin-left: 10px;
	color: var(--fg);;
}

.right ul {
	margin-left: -5;
	margin-top: 0;
	margin-bottom: 5;
}

.right li {
	margin-left: -25;
	list-style-type: none;
}