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


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

	CSS stylesheet layout for Grid 2 of 4

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

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

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

/* 	Grid Layout 2 	*/

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

article#gdp-MAIN {
	grid-column: span 3;
	background-color: hsla(255,100%,50%,0.30);
}

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

article h1 {
	text-align: center;
	margin: 0.5em auto 0px;
}

section#gdp-CONTENT-1 {
	background-color: hsla(255,100%,50%,0.45);
}

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

section#gdp-CONTENT-2 {
	background-color: hsla(255,100%,50%,0.60);
}

section#gdp-CONTENT-3 {
	background-color: hsla(255,100%,50%,0.75);
}

footer#gdp-FOOTER {
	padding: 0px 10%;
	grid-column: span 3;
	display: block;
	text-align: center;
	background-color: hsla(255,100%,50%,0.90);
}
footer::after {
	clear:both;
	content: "";
	display: table;
}

/*End Grid Layout */