* {
	margin: 0 auto;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.2rem;
	word-wrap: break-word;
}

body {
	background-color: #e5ffd2;
	margin: 1rem;
	width: 90%;
}

header {
	padding-bottom: 1rem;
	text-align: center;
	transform: scale(1.1);
	transform-origin: top center;
	width: fit-content;
}

main {
	width: fit-content;
}

@media screen and (orientation: portrait) {
	.magnifier {
		position: absolute;
		z-index: 10;
		bottom: 1rem;
		gap: 0.5rem;
		display: inline-flex;
    	flex-direction: row-reverse;
		transform: scale(1.5);
		transform-origin: bottom center;
		left: 35%;
		width: 40%;
	}
	#magnifier {
		width: 70%;
	}
}

@media screen and (orientation: landscape) {
	.magnifier {
		position: absolute;
		z-index: 10;
		right: 1rem;
		display: flex;
		flex-direction: column;
		transform: scale(1.5);
		transform-origin: top right;
		gap: 0.5rem;
	}
	#magnifier {
		appearance: slider-vertical; /* Chrome depr */
		writing-mode: vertical-lr;
		direction: rtl; /* Chrome new */
		width: 2rem;
		height: 30%;
	}
}


.icon {
	width: 1.2rem;
	height: 1.2rem;
}


#winner {
	--showing: none;
	width: 30%;
	height: 30%;
	display: var(--showing);
}

.button {
	background: #4E9CAF;
	padding: 0.1rem;
	text-align: center;
	text-decoration: none;
	border-radius: 0.25rem;
	color: white;
}