/*BODY DIV - THE MAIN BOX*/
#body {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"top"
		"header"
		"main"
		"footer"
		"bottom";
}

/*TOPSENTINEL DIV - THE 0 BODY DIV BOX*/
#topSentinel{
	grid-area: top;

	display: block;
}
/*BOTTOMSENTINEL DIV - THE 00 BODY DIV BOX*/
#bottomSentinel{
	grid-area: bottom;

	display: block;
}

/*HEADER HEADER - 1ST BODY DIV BOX*/
#header {	
	grid-area: header;
	
	display: grid;
	grid-template-areas:
		"hgroup button"
		"details details"; 
}
	/*HGROUP - 1ST HEADER BOX*/		
	#header hgroup {
		grid-area: hgroup;
	}
	/*BUTTON -2ND HEADER ELEMENT*/
	#header #detailsBtn {
		grid-area: button;
	}
	/*NAVS - REST OF HEADER BOXES*/		
	#header details {
		grid-area: details;
	}

/*MAIN MAIN - 2ND BODY DIV BOX*/
#main {
	grid-area: main;

	display: block;
}
	/*ROW DIVs - THE MID MAIN BOXES*/
	#main .row {
		display: grid;
		grid-template-areas:
			"animationConten"
			"textContent"; 
	}
	#main .row .textContent {
		grid-area: textContent;
	}
	#main .row .animationConten {
		grid-area: animationConten;
	}

/*FOOTER FOOTER - 3RD BODY DIV BOX*/
#footer {
	grid-area: footer;

	display: block;
}