/* body-wide font choice and stuff */
body {
	color: white;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.header {
	text-align: center;
	justify-content: center;
}

.title {
	text-align: center;
	display: inline-block;
	/* dumb little hack to get this to render properly on mobile */
	padding: 0 0.75em;
}

.avatar {
	display: inline-block;

	border: 4px solid black;
	width: 200px;
	height: auto;
}

.content {
	background-color: rgba(0, 0, 0, 0.5);

	/* essentially equivalent to `margin: auto;`
	 * except it has a minimum value of 1em to make it
	 * look nice on mobile
	*/
	margin-inline: max(1em, 50% - 46.88em/2);

	margin-top: 1em;
	padding: 1em 1.5em;
}

/* generic drop shadows that I heavily use in... everything,
 * so having them as their own classes is pretty nice :)
*/
.drop-shadow-text {
	text-shadow: 0.125em 0.125em 0.125em rgba(0, 0, 0, 0.5);
}

.drop-shadow-box {
	box-shadow: 0.125em 0.125em 0.625em rgba(0, 0, 0, 0.5);
}