@charset "utf-8";
/* CSS Document */

body {
    margin: 0;
    padding: 0;
    background-color: #300000;
    font-family: "cutive";
    font-style: lighter;
    font-size: 14px;
    color: #1F9F12;
}

a:link{
	color:#F9F017;
}
a:visited{
	color:#F9F017;
}

.grid {
	display: grid;
	grid-template-columns: 10% 20% 20% 20% 20% 10%;
	grid-template-rows: minmax(40px max-content);
	grid-template-areas: 
		". header header header header ."
		". . title title . ."
		". content content content news ."
		". content content content sidebar ." 
		". footer footer footer footer .";
	grid-gap: 4px 10px;
}
.colors a {
	color: #F9F017;
}
.header {
    grid-area: header;
    background-color: #300000;
    color: #F4F0B9;
    text-align: center;
}

.title {
    grid-area: title;
    background-color: #300000;
	align-content: center;
    text-align: center;
    color: #F4F0B9;
	font-family: cutive;
}
.content{
	grid-area: content;
	background-color: #300000;
	align-content: left;
    text-align: left;
    color: #F4F0B9;
	font-family: "cutive";
	font-size: 1em;
	letter-spacing: 0.25em;
	line-height: 2.25em;
	margin-left: 10px;
	margin-right: 10px;
	
}
.pres {
    grid-area: pres;
    background-color: #300000;
    text-align: left;
    color: #F4F0B9;
	font-family: "cutive";
    font-size: 1em;
	letter-spacing: 0.25em;
	line-height: 2.25em;
}
.news {
    grid-area: news;
	padding: 20px;
    background-color: #160C0B;
    text-align: left;
    color: #F4F0B9; 
	border: 0.5px solid #F4F0B9;
	font-family: "cutive";
    font-size: 1em;
	font-weight: lighter;
	letter-spacing: 0.2em;
	line-height: 2.25em;
}

.sidebar {
    grid-area: sidebar;
    background-color: #300000;
    color: #F4F0B9;
    text-align: center;
/*	align-content: center;*/
    border-style: solid;
    border-width: 1px;
    border-color: #F4F0B9;
    padding: 20px;
	font-family: "cutive";
    font-size: 1.2em;
	font-weight: lighter;
}


.footer {
    grid-area: footer;
    background-color: #300000;
    color: #F5EF91;
    text-align: center;
}

.nested-grid {
    display: grid;
    grid-template-columns: 5% 22.5% 22.5% 22.5% 22.5% 5%;
    grid-template-rows: minmax(14px max-content);
    grid-template-areas: 
		". ng1 ng1 ng2 ng2 ."
		". ng1 ng1 ng2 ng2 ."
		". ng3 ng3 ng3 ng3 ."
		". ng3 ng3 ng3 ng3 ."
		". ng3 ng3 ng3 ng3 ."
		". ng4 ng4 ng4 ng4 ."
		". ng5 . . ng6 ."
		". ng6 ng6 ng6 ng6 ."
		". ng7 ng7 ng7 ng7 ."
		". ng8 ng8 ng8 ng8 .";
    grid-gap: 6px 4px;
    padding: 4px;
    margin: 0;
	font-family: "cutive";
    font-weight: 1em;
	letter-spacing: 0.25em;
	line-height: 2.25em;
}
.ng-1{
    grid-area: ng1;
    background-color: #2A0000;
    text-align: left;
    align-content: left;
    color: #F4F0B9;
    border: 1px solid #16440A;
    margin: 0;
    padding: 4px;
}
.ng-2{
	grid-area: ng2;
    background-color: #300000;
	text-align: left;
    color: #F4F0B9;
	font-size: 1em;
	align-content: left;
/*	width: 100%;*/
}
.ng-3{
	grid-area: ng3;
    background-color: #300000;
	text-align: justify;
    color: #F4F0B9;
	border: 0.5px solid #FDF4BE;
    padding: 4px;
    margin: 0;
}
.ng-4{
	grid-area: ng4;
    background-color: #300000;
	text-align: center;
	align-content: center;
    color: #F4F0B9;
	border: 0.5px solid #FDF4BE;
    padding: 4px;
    margin: 0;
    border-style: solid;
    border-color: #F4F0B9;
}
.ng-5{
	grid-area: ng5;
    background-color: #300000;
	text-align: left;
    color: #F4F0B9;
	/*border: 0.5px solid #FDF4BE;*/
    padding: 4px;
    margin: 0;
}
.ng-6{
	grid-area: ng6;
    background-color: #300000;
	text-align: left;
    color: #F4F0B9;/*border: 0.5px solid #FDF4BE;*/
    padding: 4px;
    margin: 0;
}
.ng-7{
	grid-area: ng7;
    background-color: #300000;
	text-align: left;
    color: #F4F0B9;/*border: 0.5px solid #FDF4BE;*/
    padding: 4px;
    margin: 0;
}
.ng-8{
	grid-area: ng8;
    background-color: #300000;
	text-align: left;
    color: #F4F0B9;/*border: 0.5px solid #FDF4BE;*/
    padding: 4px;
    margin: 0;
}