* { border: 0; padding: 0; margin: 0; }

body {
	height: 100vh;
	width: 100vw;

	display: grid;
	grid-template-columns: repeat(2, 200px);
	grid-template-rows: 200px 70px 60px;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	justify-content: center;
	align-content: center;

	background: linear-gradient(45deg, rgb(98 144 206) 30%, rgb(152 237 214));
}

body, body > * {
	color: rgb(227 237 240);
	font-family: "Helvetica";
}

img {
	grid-column: 1 / span 2;
	height: 100%;
	width: 100%;
	object-fit: contain;
}

input, button {
	font-size: 1.5em;

	background: rgb(0 0 0 / 0.2);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgb(0 0 0 / 0.1);
	backdrop-filter: blur(2.6px);
}

:root {
	--bg-error: rgb(233 30 99 / 30%);
	--bg-ok: rgb(76 175 80 / 50%);
}

input {
	grid-column: 1 / span 2;
	text-align: center;

	&::placeholder { color: rgb(255 255 255 / 25%); }
	&:active, &:focus, &:focus-visible { border: 0; outline: 0; }
	&:not(:placeholder-shown):not(:focus):invalid { border: 4px solid var(--bg-error); }
}

dialog {
	margin: 0 auto;
	padding: 20px;
	border-radius: 10px;
	top: 25vh; /* this is not the best, since it is static... */
	&[error] { background-color: var(--bg-error); }
	&[ok] { background-color: var(--bg-ok); }
}

button:hover {
	background: rgb(0 0 0 / 35%);
	cursor: pointer;
}