/* Shared styles — frontpage and blog */

*
{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	font-size: 1em;
	line-height: 1.5em;
	font-optical-sizing: auto;
	-webkit-tap-highlight-color: transparent;
}

html
{
	-webkit-text-size-adjust: 100%;
}

header
{
	margin: 0 0 1em 0;
}

h1
{
	font-size: 2em;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.25em;
	margin-bottom: .25em;
}
h1 *
{
	font-weight: 700;
	line-height: inherit;
}
h1 em
{
	font-style: normal;
	color: var(--accent-strong);
}
h1 a
{
	color: inherit;
	text-decoration: none;
	border: none;
}

h2
{
	font-size: 1.2em;
	line-height: 1;
	font-weight: 700;
	margin-top: 1em;
	margin-bottom: 1em;
	text-transform: uppercase;
	color: var(--accent-strong);
}

b, strong
{
	font-weight: bold;
}

p
{
	margin: 1em 0;
}
p:last-child
{
	margin-bottom: 0;
}

ul
{
	list-style-type: none;
	padding: 0;
}

a,
a:active,
a:hover
{
	color: inherit;
	text-decoration: none;
	outline: 0;
}

body
{
	margin: 0;
	padding: 1.5em;
	background-color: var(--page-bg);	
	color: var(--text);
}


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

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

/* Nav */

nav ul
{
	list-style: none;
	margin: 0 auto;
}
nav ul li
{
	display: inline-block;
}
nav ul li.indexLink
{

}

nav ul li.sectionLink
{
	padding-top: 1em;
}
nav ul li.sectionLink a
{
	display: inline-block;
	text-decoration: none;
	border: 0;
	margin-right: 1em;
	text-transform: uppercase;
	font-weight: bold;
	color: var(--nav-link);
}
nav ul li.sectionLink:last-child a
{
	margin-right: 0;
}
nav ul li a:hover,
nav ul li a:hover *
{
	color: var(--nav-link-hover);
}

@media only screen and (min-width: 920px)
{
	nav ul
	{
		display: grid;
		grid-template-columns: 1fr repeat(4, auto);
		
	}
}

.moreLink a,
a.moreLink
{
	color: var(--accent-strong);
	border-color: var(--accent-subtle);
}


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

p.signature
{
	text-indent: -99999px;
	color: transparent;
	height: 2em;
	margin-top: 2em;
	background: var(--text);
	mask: url('../images/signature.png') right top no-repeat;
	mask-size: contain;
}