.message {
	width: 100%;
}

.info {
	align-self: center;
	position: fixed;
	bottom: 0;
	margin: .5em;
	padding: .5em 1em;
	color: white;
	font-weight: bold;
	border-radius: .5em;
	user-select: none;
	outline: solid .25em #88888855;
	transform: translateY(calc(100% + .75em));
	animation: info 5s ease-in-out 1;
}

.info-green {
	background-color: green;
}

.info-red {
	background-color: darkred;
}

@media (min-width: 220px) {

	.cooker-wrapper {
		/* aspect ratio hack */
		position: relative;
		width: 100%;
		padding-top: 145.6%;
	}

	.cooker {
		/* aspect ratio hack */
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/* ----- */
		background-image: url('/img/trouba/trouba.webp');
		background-size: contain;
		font-size: 16px;
	}

	.message {
		position: absolute;
		inset: 22.3% 8% 13% 7%;
		width: 85%;
		height: 64.7%;
		background-color: white;
		border: none;
		outline: none;
		overflow-y: scroll;
		resize: none;
	}

	.cooker-active .message {
		animation-name: heat;
		animation-duration: 1s;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in;
	}

	.send {
		position: absolute;
		inset: 6.7% 5.5% 85.3% 60%;
		width: 34.5%;
		height: 8%;
		border-radius: 0;
		border: .25em solid black !important;
		outline: none;
	}

	.send:focus {
		outline: 5px dotted blue;
	}

	.send-inner {
		position: absolute;
		inset: 0;
		display: grid;
		place-content: center;
		background-color: white;
		color: black;
	}

	.send:hover .send-inner {
		filter: invert(1);
	}

	.send-inner::after {
		content: '';
		position: absolute;
		inset: 0;
		display: block;
		background-image: url('/img/trouba/odeslat.webp');
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
	}

	.cooker-button {
		position: absolute;
		display: grid;
		place-content: center;
		color: black;
	}

	.cooker-active .cooker-button {
		animation-name: rotation;
		animation-duration: 1s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}

	.cooker-button::after {
		content: '';
		position: absolute;
		inset: 0;
		background-image: url('/img/trouba/trouba-cudl.webp');
		background-size: contain;
		border-radius: 40%;
		background-color: white;
	}

	.cooker-button-1 {
		top: 6.96%;
		left: 6%;
		width: 11%;
		height: 7.554%;
		animation-direction: alternate;
	}

	.cooker-button-2 {
		top: 7%;
		left: 18.6%;
		width: 10.5%;
		height: 7.211%;
	}

	.cooker-button-3 {
		top: 6.8%;
		left: 30.6%;
		width: 10%;
		height: 6.868%;
		animation-direction: alternate-reverse;
	}

	.cooker-button-4 {
		top: 6.6%;
		left: 42.6%;
		width: 11%;
		height: 7.554%;
		animation-direction: reverse;
	}

}

@media (min-width: 400px) {

	.cooker {
		font-size: 20px;
	}

}

@media (min-width: 550px) {

	.cooker {
		font-size: 30px;
	}

}

@keyframes rotation {
	0% {transform: rotate(0);}
	100% {transform: rotate(1turn);}
}

@keyframes heat {
	0% {background-color: white;}
	40% {background-color: orange;}
	60% {background-color: orangered;}
	100% {background-color: white;}
}

@keyframes info {
	0% {transform: translateY(calc(100% + .75em));}
	10% {transform: translateY(0);}
	90% {transform: translateY(0);}
	100% {transform: translateY(calc(100% + .75em));}
}