@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400&display=swap');
body {
	font-family: 'IBM Plex Mono', monospace;
	
	padding: 0px;
	margin: 0px;

	background-color: #202020;
	color: white;

	width: 100%;
}

a {
	color: white;
}
.noul, .noul *{
	text-decoration: none;
}
a:hover:not(.neverul){
	text-decoration: underline;
}
footer {
	margin-top: 20px;
	color: #b4b4b4;
}
pre {
	background-color: #101010;
	padding: 12px;
	color: #b4b4b4;
	width: auto;
}
pre, code {
	font-family: 'IBM Plex Mono';
	overflow-x:auto;
	background-color: #303030;
	color: rgb(180, 180, 180);
	margin: 2;
	border-radius: 5px;
}

.error {
	color: red;
}
.tag, .tag::before, .tag::after {
	color:  #b4b4b4;
}
.tag::before { content: "[";}
.tag::after { content: "]";}
.date { color: #b4b4b4; }
.right { float: right;}
.md { font-family: 'IBM Plex Sans'; }
.md > p > *, .md > * {max-width: 100%;}
.h-anchor { visibility: hidden; padding-left: 16px; text-decoration: none !important; font-size: 0.75em;}
h1:hover > .h-anchor, h2:hover > .h-anchor, h3:hover > .h-anchor, h4:hover > .h-anchor, h5:hover > .h-anchor {
	visibility: visible;
}

.nav {
	background: #101010;
	border-bottom: 2px dashed;
}
.navcontent
{
	padding: 15px;
	max-width: 900px;
	margin: auto;
}
.navlinks{
	float: right;
	display: flex;
	flex-direction: row;
	height: 100%;
	align-items: center;
}
.navlinks > a {
	padding: 7px;
	font-size: 20ox;
}

.content
{
	padding: 25px;
	max-width: 850px;
	margin: auto;
}

.post-title
{
	font-size: 24px;
}
.post-info
{
	opacity: 75%;
}

.hlist
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}
.hlist > *
{
	margin: 10px;
}
.bloglist *
{
	width: 400px;
	justify-content: center;
}
.blogpost > .image
{
	aspect-ratio: 3 / 2;
	width: 100%;
	background-size: cover;
}
.blogheader img
{
	width: 100%;
}
.service
{
  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  
  border: solid white 2px;
  padding: 10px;
  width: 200px;
  border-radius: 20px;
  text-align: center;
}
.service > .icon, .service > .icon::before
{
	font-size: 100px;
	height: 128px;
	margin: 10px;
}
.service > .head
{
  font-size: 1.5em;
  font-weight: 600;
}