/*BODY DIV - THE MAIN BOX*/
#body {	
	display: grid;
    grid-template-columns: 15% 1fr;
    grid-template-areas:
        "top top"			
        "header main"
        "header footer"
        "bottom 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: block;
}

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

	display: block;
}
	/*ROW DIVs - THE MID MAIN BOXES*/
	#main .row {
		display: grid;
        grid-template-columns: 30vw 1fr;
		grid-template-areas:
			"textContent animationConten"; 
	}
	#main .row .cell {
		display: grid;
		place-items: center;
	}
	#main .row .textContent {
		grid-area: textContent;
	}
	#main .row .animationConten {
		grid-area: animationConten;
	}

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

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1em;
}