#alert, #error, #warn {

	overflow: hidden;

	border-radius: 0.3vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.6vw;
	margin: 0.6vw;
	height: 2vw;
	width: 30vw;
	position: fixed;
	right: -50%;
	animation: alert-move 4s forwards;
	backdrop-filter: blur(1vw);
	font-family: Arial, Helvetica, sans-serif;
	z-index: 3;
}
#alert-text, #error-text, #warn-text {
	flex-direction: column;
	justify-content: center;
	flex: 1;
}
#alert-text, #error-text, #warn-text {
	flex: 1;
	font-size: 1vw;
	font-weight: bold;
}
#alert-text p, #error-text p, #warn-text p {
	flex: 1;
	font-size: 0.9vw;
}
#alert-text span,
#alert-text p,
#alert-text button,
#error-text span,
#error-text p,
#warn-text span,
#warn-text p {
	padding: 0;
	margin: 0;
}
#alert {
	background-color: rgba(0, 255, 0, 0.479);
}
#alert-text span {
	color: white;
}
#alert-text p {
	color: lightgrey;
}
#alert button {
	font-size: 1.1vw;
	color: gray;
	border: 0.2vw solid #2b2b2e;
	background-color: #252625;
}
#alert button:hover {
	animation: button-hover 0.3s forwards;
}
#alert button:active {
	animation: button-active 0.2s forwards;
}
#error {
	background-color: rgba(255, 0, 0, 0.479);
}
#error-text span {
	color: #ffffff;
}
#error-text p {
	color: lightgrey;
}
#error-text span span {
	color: red;
}
#warn {
	background-color: rgba(255, 208, 0, 0.479);
}
#warn-text span {
	color: #ffffff;
}
#warn-text p {
	color: lightgrey;
}
#warn-text span span {
	color: #ffd000;
}

@media screen and (min-width: 1457px) {
  	#alert, #error, #warn {

		border-radius: 0.4vw;

		padding: 0.8vw;
		margin: 0.8vw;
		height: 2vw;
		width: 33vw;
	}
	#alert-text, #error-text, #warn-text {
		flex: 1;
	}
	#alert-text, #error-text, #warn-text {
		font-size: 1.2vw;
	}
	#alert-text p, #error-text p, #warn-text p {
		font-size: 1.1vw;
	}
	#alert {
		background-color: rgba(0, 255, 0, 0.479);
	}
	#alert button {
		font-size: 1.2vw;
		border: 0.3vw solid #2b2b2e;
	}
}

@media screen and (max-width: 784px) {
  	#alert {

		display: none;

	}
	#error {
		display: none;
	}
	#warn {
		display: none;
	}
}

@keyframes alert-move {

	from {

		right: -50%;
	} to {
		right: 0;
	}

}