@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&family=Roboto+Slab&display=swap');

* {
	font-family: Quicksand, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.navbar-item .icon {
	margin-right: 0.25em;
}

h1, h2, h3 {
	font-family: "Roboto Slab", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.content h1 {
	padding-bottom: 0.5em;
	margin-bottom:  0.5em;
	border-bottom:  2px solid #eee;
}
.content h1.title {
	margin-bottom: 0.5em !important;
	display:       flex;
}

.content h1.title i.logo,
nav i.logo {
	-webkit-mask-size:  cover;
	mask-size:          cover;
	-webkit-mask-image: url(/img/logo.svg);
	mask-image:         url(/img/logo.svg);
}
.content h1.title i.logo {
	height:           1.4em;
	width:            1.4em;
	margin:           -0.1em 0.3em -0.2em -0.2em;
	background-color: rgba(0, 0, 0, 1);
}
nav i.logo {
	height:           2.2em;
	width:            2.2em;
	margin:           0;
	display:          block;
	background-color: rgba(0, 0, 0, 0.85);
}
@media (prefers-color-scheme: dark) {
	h1.title i.logo {
		background-color: rgba(255, 255, 255, 1);
	}
	nav i.logo {
		background-color: hsla(221, 14%, 71%, 0.85);
	}
}

.content h2 {
	padding-bottom: 0.5714em;
	margin-bottom:  0.5714em;
	border-bottom:  1px solid #eee;
}
.content h2:not(:first-child) {
	margin-top: 2em;
}

form {
	margin-top: 0.75em;
}

.content a {
	font-weight: 500;
}