@font-face {
	font-family: 'Geist';
	src: url('fonts/Geist[wght].woff2') format('woff2-variations'),
		 url('fonts/Geist[wght].woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap; /* Prevents invisible text while loading */
}

body {
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 16px;

	background: #fafafa;

	color: #2b2b2b;

	margin: 0 7em;
	margin-inline: auto;

	padding-inline: 20px;

	max-width: 80ch;
	width: 100%;
}
header {
	text-align: center;
}
h1 {
	font-family: 'Geist', sans-serif;
	font-weight: 900;
	font-size: 5em;

	margin-block-end: 0.15em;
}
h2 {
	font-family: 'Geist', sans-serif;
	font-weight: 700;
}
h3 {
	font-family: 'Geist', sans-serif;
	font-weight: 600;
}
h4 {
	font-family: 'Geist', sans-serif;
	font-weight: 300;
}
h5 {
	font-family: 'Geist', sans-serif;
	font-weight: 100;
}
nav {
	text-align: center;
	margin: 30px 0;
}
nav p span.nav-link {
	font-weight: 100px;
	margin: 0px 25px;
}
nav p span.nav-link a {
	color: #111111;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	padding: 2px 5px;
	border-radius: 5px 5px 0 0;
	transition: all 0.2s ease;
}
nav p span.nav-link a:hover {
	border-color: #666666;
	background: #efefef;
}
footer {
	text-align: center;
}
h4#subtitle {
	font-weight: 200;
	font-size: 1.8em;

	color: #8c8c8c;

	margin-block-start: 0.25em;
}
span.tag {
    font-size: x-small;
    background: #e2e2e2;
	color: #555555;
    padding: 3px 8px;
    border-radius: 4px;
    margin: 3px;
}
li.blog-item {
    display: flex;
    justify-content: space-between;
}
a {
  color: #111111;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: all 0.2s ease;
}

a:hover {
  color: #666666;
  text-decoration-color: #666666;
}