header {
	position: sticky;
	top: 0;
	padding: 1em;
	z-index: 10;
	padding: 0 1em 1em 1em;
	margin: 0 1rem 0 1rem;
	border-radius: 0 0 10px 10px;
	background-color: white;

	@media (prefers-color-scheme: dark) {
		font-size: .9rem;
		background-color: #011611;
		filter: blur(.03em);
		border: 1px solid #0e2e29;
	}
}

.header__intro {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	gap: .5em;
	margin-bottom: .5em;
	padding-top: 1em;

	@media screen and (min-width: 768px) {
		margin-bottom: 0;
	}

	.byline {
		display: flex;
		align-items: center;
		gap: 0.5em;
		font-size: 0.775em;
		border-radius: 40px;
		border-radius: 40px 0 40px 40px;
		font-weight: 400;
		padding: 0 1em 0 0;
		color: rgb(85, 85, 85);

		background-color: rgb(229, 229, 229);
		background-color: rgb(241, 241, 241);

		@media (prefers-color-scheme: dark) {
			background-color: #043a26;
		}

		span {
			display: flex;
			align-items: center;
			gap: 0.5em;
			font-weight: 600;

			@media (prefers-color-scheme: dark) {
				color: rgb(88, 141, 48);

			}
		}

		svg {
			width: 2em;
			height: 2em;

			path {

				@media (prefers-color-scheme: dark) {
					fill: #011611;
				}
			}

			.face {
				@media (prefers-color-scheme: dark) {
					fill: #204c3c;
				}
			}
		}
	}
}

.header__body {
	display: flex;
	flex-direction: column;
	background-color: white;
	padding: 1em;
	border-radius: 10px 0 0 0;

	@media (prefers-color-scheme: dark) {
		background-color: #011611;
		filter: blur(.03em);
		border: 1px solid #0e2e29;
		border-left: 1px solid #154139;
		border-top: 1px solid #154139;
		font-family: monospace;

	}
}

.header__section {
	pre {
		padding: 1rem;
		border-radius: 0 0 10px 10px;
	}
}