@font-face {font-family: departuremono; src: url(assets/fonts/departure_mono.woff2); size-adjust: 80%}
@keyframes spin {0% {content: "|"} 25% {content: "/"} 50% {content: "-"} 75% {content: "\\"}}
@keyframes scroll {from {background-position-x: 600px} to {background-position-x: 0}}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #68293f;
	font-family: sans-serif;
	background: linear-gradient(to bottom, #63d8e580, transparent calc(50% + 72px)) #eeede7;
	min-height: 100vh;
	box-sizing: border-box;
	padding: 2em;
	overflow: hidden auto;
	image-rendering: pixelated;

	&::before {
		content: "";
		background: url(assets/vapor.png);
		opacity: 0.25;
		position: fixed;
		inset: 0;
		pointer-events: none;
		animation: scroll 30s linear infinite;
	}
}

#wrapper {
	display: flex;
	align-items: end;
	flex-basis: 400px;
}

#content {
	padding-right: 96px;
	align-self: end;
	flex: 1;
	z-index: 1;
}

hgroup {
	display: flex;
	font-family: departuremono;
	white-space: nowrap;
}

h1 {
	font-size: 1em;
	font-weight: normal;
}

#sblurb {
	text-overflow: ellipsis;
	overflow: hidden;
	flex: 1;
	contain: inline-size;

	&::before {
		content: "|";
		margin-inline: 0.5em;
		animation: spin 1s infinite;
	}
}

a {
	text-decoration: underline;
}

#sign {
	background: url(assets/sign.png) center / cover;
	margin-inline: -196px -150px;
}

#trail {
	margin-top: 0;
}