/* determine grid areas */
header { grid-area: header;}
nav {grid-area: nav;}
article {grid-area: main;}
aside {grid-area: right;}
footer {grid-area: footer;}

/* set up grid container layout */
.grid-container {
	display: grid;
	grid-template-areas:
	'logo header header header header header header header header'
	'nav main main main main main main main right'
	'footer footer footer footer footer footer footer footer footer';
	gap: 10px;
	background-color: #d6762d7b;
	padding: 20px;
	
}

/* set up aspects inside grid containers */
.grid-container > div, nav, main, aside, footer, header, article {
	background-color: rgb(255, 231, 180);
	text-align: left;
	padding: 20px ;
	font-size: 15px;
    color: rgb(41, 13, 8)

}

/* make sure the nav buttons are properly aligned */
nav > .nav_button{
    display:flex;
    justify-content: center; /* Centers items horizontally */
    align-items: center; /* Centers items vertically */
    height: 30px;
    width: 100px;
    margin: 0;
    background-color: #fff8e3;
    border: none;
}
/* change button color when hovered */
nav > :hover {
    background-color: rgb(255, 195, 116);
}

/* remove text decor */

a {
    text-decoration: none;
    color: rgba(129, 11, 11, 0.587);
}


/* set up background color */
body {
    background-color: antiquewhite;
}