* {
	margin: 0;
	padding: 0;
}

img {
	width: 128px;
	height: 128px;
	border-radius: 8px;
}

h1,
h2 {
	width: fit-content;
	background: linear-gradient(120deg, #20880c 0, #6fcf6f 37.5%, #20880c 100%);
	background-clip: text;
	color: transparent;
}

body {
	max-width: 720px;
	min-height: 100vh;
	margin: 0 auto;
	padding: 0 20px;
	background: #111;
	color: white;
	display: grid;
	grid-template-rows: auto 1fr auto;
}

nav ul {
	list-style: none;
	display: flex;
	gap: 8px;
}

nav a {
	text-decoration: none;
	display: block;
	color: #555;
}

nav a.active {
	color: #6fcf6f;
	font-weight: bold;
}

small {
	color: #555;
}

main {
	padding: 96px 0;
}

footer {
	padding-bottom: 20px;
}

header {
	padding-top: 20px;
}

mark {
  	color: white;
  	margin: 0 -0.4em;
  	padding: 0.1em 0.4em;
  	border-radius: 0.8em 0.3em;
  	background: transparent;
  	background-image: linear-gradient(to right, rgba(32, 136, 12, 0.1), rgba(32, 136, 12, 0.7) 4%, rgba(32, 136, 12, 0.3));
  	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

mark a {
	color: white;
}

.cursor {
	display: inline-block;
	width: 12px;
	height: 20px;
	background: white;
	border-radius: 1px;
	animation: cursor 1s infinite;
}

@keyframes cursor {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.gray {
	color: #555;
}

.hint {
	font-size: 10px;
	vertical-align: super;
	text-decoration: none;
}

.horizontal-pair {
	display: flex;
	flex-direction: row;
	gap: 16px;
}

.vertical-pair {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vertical-pair-md {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.vertical-pair-lg {
	display: flex;
	flex-direction: column;
	gap: 24px;
}