* {
	box-sizing: border-box;
}

body {
	display: flex;
	min-height: 100dvh;
	margin: 0;
	padding: 20px;

	align-items: center;
	justify-content: center;

	font-family: 'IBM Plex Sans', serif;
	font-size: 11pt;
	color: #14315d;
}

section.welcome {
	display: grid;
	min-height: 300px;
	margin: auto;
	flex: 0 1 500px;

	grid-template-columns: 1fr 1fr;

	background-color: #ffffff;
	box-shadow: 5px 5px 0 0 #bec6d0;

	border: 1px solid #14315d;
}

section.welcome > aside {
	background-image: url('/lifeboat.png');
	background-position: -275px -300px;
	image-rendering: pixelated;

	border: solid #14315d;
	border-width: 0 1px 0 0;
}

section.welcome > div {
	display: flex;
	padding: 10px;

	flex-direction: column;
	align-items: stretch;
	justify-content: center;

	text-align: center;
}

section.welcome > div > h1 {
	margin: 0;
	font-family: 'IBM Plex Serif', serif;
	font-size: 12pt;
	font-weight: normal;
}

@media (width <= 500px) {
	section.welcome {
		grid-template-columns: unset;
		grid-template-rows: 1fr auto;
	}

	section.welcome > aside {
		height: 75dvh;
		max-height: 600px;

		background-position: center center;

		border-width: 0 0 1px 0;
	}
}