:root {
	--info-fill: #f7f8ff;
	--info-border: #a4d0ff;
	--info-text: #899199;

	--error-fill: #fff8f8;
	--error-border: #f1a8a8;
	--error-text: #b75d5d;
}

.alert {
	display: none;
	border-radius: 3px;
	position: fixed;
	left: 50%;
	top: 0;
	transform: translate(-50%, 35vh);
	box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
	width: min(90%, 43em);
}

.alert span {
	display: flex;
	min-height: 3em;
	padding: 0.5em 1em;
	justify-content: center;
	align-items: center;
	font-size: 1.1rem;
	text-transform: lowercase;
	font-weight: 600;
	text-align: center;
}

.alert.info {
	background-color: var(--info-fill);
	border: 3px solid var(--info-border);
	color: var(--info-text);
}

.alert.error {
	background-color: var(--error-fill);
	border: 3px solid var(--error-border);
	color: var(--error-text);
}