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


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

	CSS stylesheet layout for Grid 4 of 4

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

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


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

/* 	Grid Layout 4 	*/

article#GridLayout {
	color: whitesmoke;
	padding: 1em;
	margin: 0 4%;
	grid-column: 1/-1;
	display: grid;
	grid-template-columns: 7em 1fr 1fr;
	background-color: grey;
	grid-gap: 0.5em;
}
article#GridLayout > * {
	border-style: solid;
	border-width: 0.25em;
	border-color: black;
	border-radius: 0.5em;
}

header#gdp-HEADER {
/*	grid-column: 1 / -1;
*/	grid-area: 1 / 1 / 2 / -1;
	background-color: indigo;
}

aside#gdp-SIDEBAR {
/*	grid-row: 2/4;
*/	grid-area: 2 / 1 / 4 / 2;
	line-height: 1.3em;
	background-color: darkcyan;
}

section#gdp-CONTENT-1 {
/*	grid-column: span 2;
*/	grid-area: 2 / 2 / 3 / -1;
	background-color: darkblue;
	height: 34vh;
	overflow: hidden;
}
article#SCROLL-TEXT {
	height: 25vh;
	margin: 0px 0.5em 1em 0px;
	padding: 0px 0.25em 0.5em 0.25em;
	overflow: auto;
}

section#gdp-CONTENT-2, section#gdp-CONTENT-3 {
	background-color: blue;
	height: 33vh;
	overflow: hidden;
}
section#gdp-CONTENT-2 {
	grid-area: 3/2/4/3;
}
section#gdp-CONTENT-3 {
	grid-area: 3/3/4/4;
}

footer#gdp-FOOTER {
/*	grid-column: 1/-1;
*/	grid-area: 4 / 1 / 5 / -1;
	background-color: purple;
	display: block;
	text-align: center;
}

/*End Grid Layout */