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


/*
	Web Design Foundations	CTS00700-504O
		CSS GRID Design Project

	CSS stylesheet layout for Grid 3 of 4

	Author:		Peter Brown	~ 0624517619
	Start Date:	2025-01-16
	Due Date:	2025-01-29

	File: 		/Brown_P-CSS_GRID_Design_Project/GridLayout3/gdp-layout-3.css
   	link code: 	<link href="gdp-layout-3.css" rel="stylesheet" />
*/


/* 	Body grid not for assignment design */
body {
	display: grid;
	grid-template-columns: 1fr;
}

/* 	Grid Layout 3 	*/

article#GridLayout {
	color: whitesmoke;
	padding: 0.5em;
	margin: 0 4%;
	grid-column: 1/-1;
	display: grid;
	grid-template-areas:
		"NAVBAR		NAVBAR 		NAVBAR 		NAVBAR"
		"SIDEBAR	MAIN		MAIN		MAIN"
		"SIDEBAR	CONTENT-1	CONTENT-2	CONTENT-3"
		"SIDEBAR	FOOTER		FOOTER		FOOTER";
	background-color: yellow;
}
article#GridLayout > * {
	border-style: solid;
	border-width: 0.5em;
	border-color: lawngreen;
	border-radius: 1em;
	margin: 0.5em;
}

header#gdp-NAVBAR {
	grid-area: NAVBAR;
	background-color: skyblue;
}

aside#gdp-SIDEBAR {
	grid-area: SIDEBAR;
	background-color: deepskyblue;
	padding: 1em;
	line-height: 2em;
}
aside#gdp-SIDEBAR h1 {
	writing-mode: vertical-rl;
	text-orientation: mixed;
}

section#gdp-MAIN {
	grid-area: MAIN;
	background-color: dodgerblue;
}

article#SCROLL-TEXT {
	height: 25vh;
	margin: 0px 0.5em 1em 0px;
	padding: 0px 0.25em 0.5em 0.25em;
	overflow: auto;
}

section#gdp-CONTENT-1 {
	grid-area: CONTENT-1;
	background-color: royalblue;
	height: 35vh;
	overflow: hidden;
}

section#gdp-CONTENT-2 {
	grid-area: CONTENT-2;
	background-color: blue;
	height: 35vh;
	overflow: hidden;
}

section#gdp-CONTENT-3 {
	grid-area: CONTENT-3;
	background-color:mediumblue;
	height: 35vh;
	overflow: hidden;
}


footer#gdp-FOOTER {
	grid-area: FOOTER;
	padding: 0px 10%;
	display: block;
	text-align: center;
	background-color: navy;
}
footer::after {
	clear:both;
	content: "";
	display: table;
}

/*End Grid Layout */