:root
{
	--bg: var(--white);
	--page-bg: #d00111;
	--text: var(--black);
	--subtle: var(--pale-gray);
	--accent: var(--red);
	--accent-subtle: var(--coral);
	--accent-strong: var(--dark-red);
	--link: var(--blue);
	--link-subtle: var(--light-blue);
	--link-strong: var(--navy);
}
@media (prefers-color-scheme: dark)
{
	:root
	{
		--bg: var(--black);
		--page-bg: var(--black);
		--text: var(--white);
		--subtle: var(--gray);
		--accent: var(--coral);
		--accent-subtle: var(--dark-red);
		--accent-strong: var(--red);
		--link: var(--light-blue);
		--link-subtle: var(--blue);
		--link-strong: var(--lighter-blue);
	}
}

body
{
	background-color: var(--page-bg);
	background-image: url('/images/pattern-1.jpg');
	background-size: 278px 512px;
	
	color: var(--text);
	position: relative;
}

#background
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: var(--page-bg);
	opacity: 0;
}
	@media (prefers-color-scheme: dark)
	{
		#background
		{
			opacity: .5;	
		}
	}

#mainContainer
{
	background: var(--bg);	
	z-index: 10;	
	
	margin-left: auto;
	margin-right: auto;
	max-width: 60rem;
	
	padding: 1.5em;
}

h1
{
	font-size: 2em;
	font-weight: 700;	
	line-height: 100%;
	letter-spacing: -.03em;
	/* margin-bottom: .5em; */
}
h1 em
{
	font-style: normal;
	font-weight: 700;
	color: var(--accent-strong);
}

h2
{
	font-size: 1.2em;
	line-height: 1;
	font-weight: 700;
	margin-top: 1em;
	margin-bottom: 1em;
	text-transform: uppercase;
	color: var(--accent-strong);
}
h2.new
{
	display: inline-block;
	font-size: 1.2em;
	transform: rotate(-8deg);
	background: var(--accent);
	color: var(--bg);
	padding: .15em .25em;
}

a
{	
	border-bottom: .1em solid var(--subtle);
}

a:hover
{
	color: var(--link);
	border-bottom-color: var(--link-subtle);
}

/* Header */

#topLine
{
	display: grid;
	grid-template-columns: 1fr;
}

/* Nav */

nav ul
{
	list-style: none;
	margin: 0 auto;
	padding-top: 1em;
}
	nav ul li
	{
		display: inline-block;
		text-align: center;	
	}
	nav ul li a
	{
		display: inline-block;
		text-decoration: none;
		border: 0;		
		margin-right: 1em;

		text-transform: uppercase;
		font-weight: bold;		
		color: var(--accent-strong);
	}
		nav ul li a:hover
		{			
			color: var(--accent);
		}
		nav ul li:last-child a
		{
			margin-right: 0;
		}


/* Articles List */

ul.articles
{
	display: grid;
	grid-template-columns: 1;
	gap: 2em;
}

.articles li
{
	
}


.articles li h3
{
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: .25em;
	
}
.articles li h3 time
{
	color: var(--subtle);
	font-size: .8333em;
}
.articles li h3 a
{
	color: var(--link);
	border-color: var(--link-subtle);
}
.articles li h3 a:hover
{
	color: var(--link-strong);
	border-color: var(--link);
}




.articles li p
{
	margin-top: 0;
}


footer
{
	margin-bottom: 0;  
	padding-top: 2em;
	padding-bottom: 2em;
}

@media only screen and (min-width: 700px)
{	
	ul.articles
	{
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Desktop */
@media only screen and (min-width: 920px)
{
	#topLine
	{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1em;
	}
	nav ul
	{
		text-align: right;
	}
	
	header p
	{
		max-width: calc(66% - 1em);
	}
	
	ul.articles
	{
		grid-template-columns: repeat(3, 1fr);
	}
}