DunderMifflin/style.css

/*Style Sheet*/
:root {
    --silicon: #aeb8d9;
    --copper: #e3ad30;
    --matrix: #5e865e;
    --oxide: #a65f18;
    --carbon: #472c19;
    --phantom: #18100b;

    --yellow: #ffb200;
    --orange: #eb5b00;
    --pink: #d91656;
    --purple: #640d5f;
}
html {
	margin: 0px;
	padding: 0px;
}
body {
  background-color: var(--phantom);
  color: var(--yellow);
}
header {
	grid-area: header;
	color: var(--matrix);
	background-color: var(--copper);
	border-color: var(--copper);

	margin: 0px;
	position: sticky;
	font-size: 20px;
	text-align: center;
	border: 0px;
	top: 0px;
	padding: 0px;

}
.container {
	display: grid;
	grid-template-areas: 'header header' 'news news' 'navigation search-bar' 'navigation result' 'footer footer';
	width: 80vw;
	min-width: 600px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	row-gap: 5px;
}
.navigation {
	grid-area: navigation;
}
.result  {
	grid-area: result;
}
.news {
	grid-area: news;
}
.search-bar {
	grid-area: search-bar;
footer {
	display: grid;
	grid-area: 'footer';
	grid-template-columns: auto;
}