/*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;

	display: grid;
	/*grid-template-areas: 'left' 'right';*/
}
header ul{
	/*grid-area: left;*/
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	/*background-color: var(--matrix);*/
}
header li {
	float: left;
}

li a {
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;  
}

.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;
	gap: 5px;
}
.navigation {
	grid-area: navigation;
	/*width: 30px;*/
	text-align: center;
	border: solid;
	border-color: var(--pink);
	border-width: 4px;
	overflow: hidden;
}
.result  {
	grid-area: result;
	/*width: 500px;*/
	border: solid;
	border-color: var(--silicon);
	border-width: 2px;
}
.news {
	grid-area: news;
	text-align: center;
}
.search-bar {
	grid-area: search-bar;
	text-align: center;
	align: center;
	border: solid;
	border-width: 2px;
	border-color: var(--silicon);
	/*width: 500px;*/
}
footer {
	display: grid;
	grid-area: 'footer';
	grid-template-columns: auto;
}