@charset "utf-8";
/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 3
   Tutorial Case
   
   Style Sheet for Grids used in the Pandaisia Chocolates website
   Author: Rahamatullah Matin
   Date: 10/04/2025  
   
   Filename: pc_grids.css

*/


/* Grid Styles for Page Body */

body {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-areas: "header  header"
	                     "intro    faq"
                         "articles  faq"
		                 "footer    footer";
    grid-column-gap: 15px;
}
body > header {
	grid-row: 1;
	grid-column: 1/-1;
}

body > article { grid-area: intro; }
body > aside { grid-area: faq; }
body > section { grid-area: articles; }
body > footer { grid-area: footer; }



/* Grid Styles for Nested Grid */
section {
        display: grid;
		grid-template-columns: repeat(2, 1fr);
}
section > h1, h2 {
	grid-area: 1/1/2/3;
}

 /* Heading Styles */
h1, h2, h3 {
	text-indent: 1em;
}
h1 {
	font-size: 2.4em;
	line-height: 2.4em;
	font-family: champagen, cursive;
	letter-spacing: 0.3em;
	font-weight: normal;
	color: rgb(234, 229, 211)
}

h2, h3 {
    font-family: palatino Linotype, Book Antiqua, palatino, serif;
	padding: 0.5em 0;
}
h2 {
	font-size: 1.3em;
	background-color: rgb(102, 72, 38);
	color: black;
	text-align: center;
}
h3 {
	font-size: 1.1em;
}