html, body {
	margin: 0;
	height: 100%;
	overflow: hidden;
}
body {
	font-family: Barlow, Helvetica, Arial, sans-serif;
}
.bgimg {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
p {
	margin: 0;
}
a, a:visited {
	color: inherit;
}
.rtl {
	direction: rtl;
}
	main {
		position: absolute;
		right: 1.5rem;
		top: 1.5rem;
		color: var(--text-trans-color);
	}
	main > * {
		display: block;
	}
		.avatar {
			width: 8rem;
			height: 8rem;
			filter: opacity(70%);
		}
		.motto {
			font-size: 2rem;
			color: var(--text-trans-color);
		}
		.motto::before {
			font-size: 1rem;
			font-family: fontello;
			vertical-align: top;
			content: '\f10d'; /* '' */
		}
		.motto::after {
			font-size: 1rem;
			font-family: fontello;
			vertical-align: bottom;
			content: '\f10e'; /* '' */
		}
		.links {
			margin-top: 1em;
			font-size: 1.5rem;
			vertical-align: middle;
		}
		.key {
			line-height: 2em;
			user-select: all;
			text-decoration: none;
			border-bottom: solid 1px var(--text-trans-color);
		}
	.name {
		position: fixed;
		left: .75rem;
		bottom: .75rem;
		width: 3.5em;
		line-height: .8em;
		color: rgb(0, 0, 0, .7);
		font-size: 10em;
		font-weight: bold;
		text-transform: uppercase;
	}
		.name span {
			width: .7em;
			display: inline-block;
			text-align: center;
		}
		.name .underline {
			border-bottom: solid 1rem var(--text-trans-color);
		}
	.courtesy {
		position: absolute;
		right: 0;
		bottom: 0;
		color: lightgrey;
		font-size: .9rem;
	}
@media screen and (max-width: 1024px) {
	.name {
		font-size: 5em;
	}
	.name .underline {
		border-bottom: solid .7rem var(--text-trans-color);
	}
	.motto {
		font-size: 1.75rem;
	}
	.courtesy {
		color: transparent; /* oops. */
	}
}
@media screen {
	.sr-only {
		display: none;
	}
}