div.notification {
	--notification-font-red: #c00;
	--notification-background-red: #fcc;
	--notification-font-green: #529b20;
	--notification-background-green: #d2eeca;
	--notification-font-yellow: #898432;
	--notification-background-yellow: #fff776;

	font-family: var(--sans-font);
	font-size: 1.3rem;
	font-weight: normal;
	position: fixed;
	top: 30vh;
	max-width: 60vw;
	display: flex;
	column-gap: 0.5em;
	align-items: baseline;
	padding: 1em;
	border-bottom: 5px solid;
	box-shadow: 0.3rem 0.3rem 1rem #00000080;
	cursor: default;
	z-index: var(--z-index-topmost);
	animation-name: popin-flyout;
	animation-duration: 4s;

	&.green {
		border-color: var(--notification-font-green);
		background-color: var(--notification-background-green);
		color: var(--notification-font-green);
	}
	&.yellow {
		border-color: var(--notification-font-yellow);
		background-color: var(--notification-background-yellow);
		color: var(--notification-font-yellow);
	}
	&.red {
		border-color: var(--notification-font-red);
		background-color: var(--notification-background-red);
		color: var(--notification-font-red);
	}

	span {
		flex: 1;
	}
}

@keyframes popin-flyout {
	0% {
		opacity: 0;
	}
	5% {
		transform: scale(1.2);
	}
	10% {
		transform: scale(1);
		opacity: 1;
	}
	75% {
		opacity: 1;
		transform: translate(0px, 0);
	}
	100% {
		opacity: 0;
		transform: translate(0px, -25vh);
	}
}