.message {
	margin: var( --content-gap );
	margin: 1em;
	position: fixed;
	transform: scale( 0, 0 );
	transition: transform 0.375s ease-in-out;
	z-index: 7;
}

.message.form {
	align-items: center;
	bottom: 0;
	display: grid;
	justify-items: center;
	left: 0;
	right: 0;
	top: 0;
	transform-origin: center;
}

.message.show {
	transform: scale( 1, 1 );
}

	.message > .window {
		background-color: var( --color-red );
		border: var( --border );
		color: white;
		width: 18em;
		padding: var( --content-gap );
		text-align: right;
	}

	@media screen and ( min-width: 400px ) {

		.message > .window {

			width: 20em;
		}

	}

		.message > .window > .content {
			text-align: left;
			margin-bottom: var( --content-gap );
		}

		.message > .window > .content > a {
			font-weight: 800;
			text-decoration: underline;
		}

		.message > .window > button {
			border: 0;
			background-color: white;
			color: var( --color-red );
			display: inline-block;
			font-family: inherit;
			font-size: inherit;
			font-weight: 800;
			padding: calc( var( --content-gap ) * 0.5 );
		}

#cookies-message {
	bottom: 0;
	right: 0;
	transform-origin: right bottom;
	z-index: 4;
}

@media screen and ( min-width: 400px ) {

	#cookies-message {
		bottom: 0;
		right: 4em;
		transform-origin: right bottom;
		z-index: 4;
	}

}

	#form-message.correct > .window {
		background-color: var( --color-red-oposition );
	}

		#form-message.correct > .window > button {
			background-color: var( --orange );
		}