@import "style.css";

body
{
	font-family: Fakt,AvenirNext,Segoe UI,sans-serif;
}

h2
{
	margin-bottom: 0;
}

hr
{
	border: none;
	margin-top: 6px;
	height: 3px;
	background-color: #666;
}

#banner
{
	position: fixed;
	top: 0;
	left: 0;
	height: 106px;
	width: 100%;
	background-color: white;
	z-index: 2;
	min-width: 360px;
	opacity: 0.7;
}

#bannerImg
{
	position: fixed;
	top: 0;
	left: 0;
	height: 106px;
	width: 100%;
	object-fit: cover;
	box-shadow: 0 1px 6px #333;
	z-index: 1;
}

#dateWrapper
{
	font-family: "Courier New", Courier, monospace;
	position: fixed;
	top: 54px;
	right: 0;
	padding-right: 5%;
	padding-top: 8px;
	height: 36px;
	z-index: 3;
	color: black;
	font-size: 33px;
}

#bar
{
	/*position: absolute;
	top: 0;*/
	width: 100%;
	height: 3px;
	left: calc(68% - 43px);
	top: 54px;
	background-color: black;
	z-index: 3;
	position: fixed;
}

#logo
{
	position: fixed;
	top: 31px;
  	padding-left: 5%;
  	height: 44px;
  	transform: none;
}

.link
{
	position: fixed;
	padding-right: 0;
	margin: 0;
	top: 21px;
	font-size: 16px;
	color: gray;
	cursor: pointer;
	z-index: 3;
	transform: none;
}

.selectedLink
{
	position: fixed;
	padding-right: 0;
	margin: 0;
	top: 21px;
	font-size: 16px;
	color: black;
	height: 22px;
	z-index: 3;
	transform: none;
}

#content
{
	margin-top: 132px;
}

#moreStories
{
	overflow-x: scroll;
	overflow-y: hidden;
	max-height: 347px;
	padding: 3px;
}

.moreStoriesList
{
	display: grid;
	grid-column-gap: 2%;
	grid-template-columns: repeat(20, 350px);
	grid-row-gap: 20px
}