<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>Dress to Impress: Surprise Downtime?</title>
		<style type="text/css">
			body {
				background-color: #fff;
				color: #666;
				font-family: arial, sans-serif;
				padding: 2em 1em;
			}

			main {
				border: 1px solid #ccc;
				margin-inline: auto;
				padding: 1em;
				max-width: 600px;

				display: grid;
				grid-template-areas: "illustration body";
				grid-template-columns: auto 1fr;
				column-gap: 1em;
			}

			h1 {
				font-size: 1.5em;
				margin: 0;
				margin-bottom: 0.5em;
			}

			p {
				margin-bottom: 0.5em;
			}
		</style>
	</head>
	<body>
		<main>
			<img
				width="100"
				height="100"
				alt="Distressed Grundo programmer"
				src="/images/error-grundo.png"
			/>
			<div>
				<h1>DTI is down for the count?!</h1>
				<p>
					Hrm, it looks like the DTI application has crashed all the
					way into the ground?? 😬
				</p>
				<p>
					This can happen when our system gets overloaded, or when the
					team is working on something and we hit the wrong button 😓
				</p>
				<p>
					We'll be notified of this outage, and we'll do our best to
					be back up soon! 💖
				</p>
			</div>
		</main>
	</body>
</html>