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


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

	CSS stylesheet layout for Grid 1 of 4

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

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

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

/* 	Grid Layout 1 	*/

article#GridLayout {
	color: whitesmoke;
	padding: 0.5em;
	margin: 0 4%;
	grid-column: 1/-1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background-color: lightblue;
}
article#GridLayout > * {
	border-style: solid;
	border-width: 0.5em;
	border-color: lightblue;
	border-radius: 1em;
}

header#gdp-NAVBAR {
	grid-column: 1/-1;
	background-color: hotpink;
}

section#gdp-CONTENT-1 {
	background-color: deeppink;
}

section {
	height: 50vh;
	overflow: hidden;
}

section#gdp-CONTENT-2 {
	background-color: mediumvioletred;
}

section#gdp-CONTENT-3 {
	background-color: hotpink;
}

section#gdp-CONTENT-4 {
	background-color: deeppink;
}

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

/*End Grid Layout */