* {
	box-sizing: border-box;
}

html {
	background-color: rgb(35, 47, 140);
	color: rgb(11, 74, 156);
	font-family: "Quantico", sans-serif;
}

.message{
	font-size: 50px;
}

.output {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

img {
	width: 100%;
	max-width: 400px;
	margin: auto;
	opacity: 0;
	animation-name: fadeIn;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}

.controls {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 20px;
}

.controls-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
	width: 100%;
	max-width: 400px;
	margin: auto;
}

button[name="submit"] {
	grid-column: span 3;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}