@charset "utf-8";
/* CSS Document */
body {
	margin: 0;
	padding: 0;
	background-color: #300000;
	
	
}
a:link{
	color:#F9F017;
}
a:visited{
	color:#F9F017;
}

.grid {
	
	display: grid;
	grid-template-columns: 5% 35% 35% 20% 5%;
	grid-template-rows: minmax(40px max-content);
	grid-template-areas: 
		". header header header ."
		". title title title ."
		". content content sidebar ." 
		". 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;
    text-align: center;
    color: #F4F0B9;
}
.sidebar {
    grid-area: sidebar;
    background-color: #300000;
    color: #F4F0B9;
    border-style: solid;
    border-width: 2px;
    border-color: #F4F0B9;
	padding: 6px;
}

.content{
    grid-area: content;
    background-color: #300000;
    color: #F4F0B9;
}

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

.nested {
    display: grid;
    grid-template-columns: 10% 36% 1% 36% 15%;
    grid-template-rows: minmax(10px max-content);
    grid-template-areas: ". calendar-header calendar-header calendar-header ."
		". calendar-intro calendar-intro calendar-intro ."
		". . . . ."
		". calendar-1 . calendar-2 ." 
		". calendar-3 . calendar-4 ."
		". calendar-5 . calendar-6 .";
    grid-gap: 6px 4px;
	/*border: 0.5px;*/ 
    padding: 4px;
    margin: 0;
   /* border-style: solid;
    border-color: #F4F0B9;*/
}
/*.nested h4 {
    border: 0.5px solid #FDF4BE;
    padding: 4px;
    margin: 0;
}*/
.calendar-header{
    grid-area: calendar-header;
    background-color: #300000;
    text-align: center;
    color: #F4F0B9;
	border-top: 0.5px 
	border-top-style: solid;
    border-color: #FDF4BE;
    padding: 4px;
    margin: 0;
;     	/*border: 1px; 
    padding: 4px;
    margin: 0;
    border-style: solid;
    border-color: #F4F0B9;*/
}
.calendar-intro{
	grid-area: calendar-intro;
    background-color: #300000;
	text-align: justify;
    color: #F4F0B9;	
}
.calendar-1{
	grid-area: calendar-1;
    background-color: #300000;
	text-align: left;
    color: #F4F0B9;
	border: 0.5px solid #FDF4BE;
    padding-left: 8px;
    margin: 0;
}
.calendar-2{
	grid-area: calendar-2;
    background-color: #300000;
	text-align: left;
    color: #F4F0B9;
	border: 0.5px solid #FDF4BE;
    padding-left: 8px;
    margin: 0;
	
}
.calendar-3{
	grid-area: calendar-3;
    background-color: #300000;
	text-align: left;
    color: #F4F0B9;
	border: 0.5px solid #FDF4BE;
    padding-left: 8px;
    margin: 0;
	
}
.calendar-4{
	grid-area: calendar-4;
    background-color: #300000;
	text-align: left;
    color: #F4F0B9;
	border: 0.5px solid #FDF4BE;
    padding-left: 8px;
    margin: 0;

}
.calendar-5{
    grid-area: calendar-5;
    background-color: #300000;
    text-align: left;
    color: #F4F0B9;
    border: 0.5px solid #FDF4BE;
    padding-left: 8px;
    margin: 0;
}
.calendar-6{
    grid-area: calendar-6;
    background-color: #300000;
    text-align: left;
    color: #F4F0B9;
    border: 0.5px solid #FDF4BE;
    padding-left: 8px;
    margin: 0;
}
.calendar-7{
    grid-area: calendar-7;
    background-color: #300000;
    text-align: left;
    color: #F4F0B9;
    border: 0.5px solid #FDF4BE;
    padding-left: 8px;
    margin: 0;
}