:root {
	font-size: 62.5%;
	--sky-color: #a2dbf6;
	--grass-color: #159f3e;
	--bush-color: #2b4e39;
	--earth-color: #6e4c35;
	--dark-earth-color: #623424;
	--bunny-color: #fcaab6;
}

body {
	margin: 0;
	block-size: 100vh;
	inline-size: 100%;
	font-size: 1.6rem;
	overflow: hidden;
}

.wrapper {
	block-size: 100%;
	display: grid;
	place-items: center;
}

.phone {
	position: relative;
	border: 8px solid #000;
	border-radius: 4rem;
	inline-size: 32rem;
	block-size: 62rem;
	background-color: var(--sky-color);
	-webkit-box-shadow: 0 1.9rem 3.8rem rgba(0, 0, 0, 0.3),
		0 1.5rem 1.2rem rgba(0, 0, 0, 0.22);
	box-shadow: 0 1.9rem 3.8rem rgba(0, 0, 0, 0.3),
		0 1.5rem 1.2rem rgba(0, 0, 0, 0.22);
	overflow: hidden;
}

.title-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0;
}

.title {
	color: var(--dark-earth-color);
	font-family: 'Dancing Script', cursive;
	font-size: 3.2rem;
	margin: 2rem;
}

.total-count,
.game-description {
	color: var(--bush-color);
	font-family: 'Fira Sans', sans-serif;
	margin: 0;
	text-align: center;
}

.start-btn {
	-webkit-margin-start: 50%;
	margin: 0.5rem;
	background-color: var(--grass-color);
	padding: 0.8rem 2rem;
	border: none;
	border-radius: 5px;
	-webkit-border-after: 4px solid var(--bush-color);
	border-block-end: 4px solid var(--bush-color);
	font-family: 'Fira Sans', sans-serif;
}

.start-btn:hover {
	cursor: pointer;
}

.start-btn:active {
	-webkit-transform: scale(0.9);
	-ms-transform: scale(0.9);
	transform: scale(0.9);
}

.layer {
	position: absolute;
	border-radius: 1.2rem;
	overflow: hidden;
}

.grass {
	block-size: 1.5rem;
	inline-size: 100%;
	background-color: var(--grass-color);
	position: absolute;
}

.grass-layer {
	background-color: var(--dark-earth-color);
	opacity: 1;
	background-image: -o-linear-gradient(
			315deg,
			var(--grass-color) 25%,
			transparent 25%
		),
		-o-linear-gradient(225deg, var(--grass-color) 25%, transparent 25%),
		-o-linear-gradient(45deg, var(--grass-color) 25%, transparent 25%),
		-o-linear-gradient(135deg, var(--grass-color) 25%, var(--dark-earth-color)
					25%);
	background-image: linear-gradient(
			135deg,
			var(--grass-color) 25%,
			transparent 25%
		),
		linear-gradient(225deg, var(--grass-color) 25%, transparent 25%),
		linear-gradient(45deg, var(--grass-color) 25%, transparent 25%),
		linear-gradient(315deg, var(--grass-color) 25%, var(--dark-earth-color) 25%);
	background-position: 18px 0, 18px 0, 0 0, 0 0;
	background-size: 36px 36px;
	background-repeat: repeat;
	position: absolute;
	block-size: 2rem;
	inline-size: 100%;
	inset-block: 1.4rem;
}

.inner-layer {
	block-size: 1.8rem;
	inline-size: 100%;
	inset-block: 3.3rem;
	position: absolute;
	background-color: var(--earth-color);
	opacity: 1;
	background-image: -o-linear-gradient(
			315deg,
			var(--dark-earth-color) 25%,
			transparent 25%
		),
		-o-linear-gradient(225deg, var(--dark-earth-color) 25%, transparent 25%),
		-o-linear-gradient(45deg, var(--dark-earth-color) 25%, transparent 25%),
		-o-linear-gradient(135deg, var(--dark-earth-color) 25%, var(--earth-color)
					25%);
	background-image: linear-gradient(
			135deg,
			var(--dark-earth-color) 25%,
			transparent 25%
		),
		linear-gradient(225deg, var(--dark-earth-color) 25%, transparent 25%),
		linear-gradient(45deg, var(--dark-earth-color) 25%, transparent 25%),
		linear-gradient(315deg, var(--dark-earth-color) 25%, var(--earth-color) 25%);
	background-position: 18px 0, 18px 0, 0 0, 0 0;
	background-size: 36px 36px;
	background-repeat: repeat;
}

.layer-1 {
	z-index: 1;
	block-size: 45rem;
	inline-size: 8rem;
	inset-block-end: 0;
	inset-inline-end: 70px;

	-webkit-animation: layer 3s ease-in-out infinite;

	animation: layer 3s ease-in-out infinite;
}

.layer-2 {
	z-index: 2;
	block-size: 45rem;
	inline-size: 8rem;
	inset-block-end: 0;
	inset-inline-start: 70px;

	-webkit-animation: layer 1s ease infinite;

	animation: layer 1s ease infinite;
}

.layer-3 {
	z-index: 3;
	inset-inline-start: 0;
	inset-inline-end: 0;
	inset-block-end: 0;
	margin: 0 auto;
	inline-size: 70%;
	block-size: 40rem;
	background-color: var(--earth-color);
	-webkit-box-shadow: 0 1.9rem 3.8rem rgba(0, 0, 0, 0.3),
		0 1.5rem 1.2rem rgba(0, 0, 0, 0.22);
	box-shadow: 0 1.9rem 3.8rem rgba(0, 0, 0, 0.3),
		0 1.5rem 1.2rem rgba(0, 0, 0, 0.22);
}
.layer-4 {
	z-index: 4;
	block-size: 33rem;
	inline-size: 8rem;
	inset-block-end: 0;
	inset-inline-start: 30px;

	-webkit-animation: layer 2s ease-in infinite;

	animation: layer 2s ease-in infinite;
}
.layer-5 {
	z-index: 5;
	inset-inline-start: 0;
	inset-block-end: 0;
	inline-size: 60%;
	block-size: 28rem;
	background-color: var(--earth-color);
	-webkit-box-shadow: 0 1.9rem 3.8rem rgba(0, 0, 0, 0.3),
		0 1.5rem 1.2rem rgba(0, 0, 0, 0.22);
	box-shadow: 0 1.9rem 3.8rem rgba(0, 0, 0, 0.3),
		0 1.5rem 1.2rem rgba(0, 0, 0, 0.22);
}
.layer-6 {
	z-index: 6;
	block-size: 23rem;
	inline-size: 8rem;
	inset-block-end: 0;
	inset-inline-end: 60px;

	-webkit-animation: layer 1.2s ease-out infinite;

	animation: layer 1.2s ease-out infinite;
}
.layer-7 {
	z-index: 7;
	inset-inline-end: 0;
	inset-block-end: 0;
	inline-size: 54%;
	block-size: 18rem;
	background-color: var(--earth-color);
	-webkit-box-shadow: 0 1.9rem 3.8rem rgba(0, 0, 0, 0.3),
		0 1.5rem 1.2rem rgba(0, 0, 0, 0.22);
	box-shadow: 0 1.9rem 3.8rem rgba(0, 0, 0, 0.3),
		0 1.5rem 1.2rem rgba(0, 0, 0, 0.22);
}
.layer-8 {
	z-index: 8;
	inset-inline-start: 0;
	inset-inline-end: 0;
	inset-block-end: 0;
	margin: 0 auto;
	block-size: 6rem;
	inline-size: 70%;
	background-color: var(--bush-color);
	overflow: visible;
}
.layer-9 {
	z-index: 9;
	background-color: whitesmoke;
	inset-inline-start: 0;
	inset-block-end: 0;
	block-size: 6rem;
	inline-size: 6rem;
	overflow: visible;
}
.layer-10 {
	z-index: 10;
	background-color: whitesmoke;
	inset-inline-end: 0;
	inset-block-end: 0;
	block-size: 6rem;
	inline-size: 6rem;
	overflow: visible;
}

.left-ear--outer {
	background-color: white;
	border-radius: 90%;
	inline-size: 2rem;
	block-size: 5rem;
	position: absolute;
	inset-inline-start: 1rem;
}

.left-ear--inner {
	background-color: var(--bunny-color);
	border-radius: 90%;
	inline-size: 1rem;
	block-size: 5rem;
	position: absolute;
	inset-inline-start: 2rem;
	-webkit-transform: translatex(-50%);
	-ms-transform: translatex(-50%);
	transform: translate(-50%, 10%);
}

.right-ear--outer {
	background-color: white;
	border-radius: 90%;
	inline-size: 2rem;
	block-size: 5rem;
	position: absolute;
	inset-inline-end: 1rem;
}

.right-ear--inner {
	background-color: var(--bunny-color);
	border-radius: 90%;
	inline-size: 1rem;
	block-size: 5rem;
	position: absolute;
	inset-inline-end: 2rem;
	-webkit-transform: translatex(50%);
	-ms-transform: translatex(50%);
	transform: translate(50%, 10%);
}

.head {
	background-color: white;
	inline-size: 100%;
	block-size: 6rem;
	border-radius: 50%;
	-webkit-transform: translateY(50%);
	-ms-transform: translateY(50%);
	transform: translateY(50%);
	position: relative;
}

.head__eye {
	inline-size: 4px;
	block-size: 4px;
	border-radius: 50%;
	background-color: #000;
	position: absolute;
	inset-block-start: 1.5rem;

	-webkit-animation-name: blink;
	animation-name: blink;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

@-webkit-keyframes blink {
	0% {
		-webkit-transform: scaleY(1);
		transform: scaleY(1);
	}
	5% {
		-webkit-transform: scaleY(0.2);
		transform: scaleY(0.2);
	}
	15% {
		-webkit-transform: scaleY(1);
		transform: scaleY(1);
	}
}

@keyframes blink {
	0% {
		-webkit-transform: scaleY(1);
		transform: scaleY(1);
	}
	5% {
		-webkit-transform: scaleY(0.2);
		transform: scaleY(0.2);
	}
	15% {
		-webkit-transform: scaleY(1);
		transform: scaleY(1);
	}
}

.head__eye--left {
	inset-inline-start: 32px;
}

.head__eye--right {
	inset-inline-end: 32px;
}

.bush {
	background-color: var(--bush-color);
	position: absolute;
	border-radius: 50%;
	block-size: 9rem;
	inline-size: 9rem;
}

.bush-1 {
	inset-inline-start: 50%;
	-webkit-transform: translate(-50%, -60%);
	-ms-transform: translate(-50%, -60%);
	transform: translate(-50%, -60%);
}

.bush-2 {
	inset-inline-start: 0;
	-webkit-transform: translate(0%, -30%);
	-ms-transform: translate(0%, -30%);
	transform: translate(0%, -30%);
}

.bush-3 {
	inset-inline-end: 0;
	-webkit-transform: translate(0%, -30%);
	-ms-transform: translate(0%, -30%);
	transform: translate(0%, -30%);
}

.cloud {
	background-color: whitesmoke;
	position: absolute;
	border-radius: 50%;
	block-size: 6rem;
	inline-size: 6rem;
}

.cloud--left-1 {
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.cloud--left-2 {
	inset-block-start: 1rem;
	-webkit-transform: translateX(50%);
	-ms-transform: translateX(50%);
	transform: translateX(50%);
}

.cloud--right-1 {
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.cloud--right-2 {
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}

.animation-off {
	animation: none;
}

@-webkit-keyframes layer {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	25% {
		-webkit-transform: translateY(50px);
		transform: translateY(50px);
	}
}

@keyframes layer {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	25% {
		-webkit-transform: translateY(50px);
		transform: translateY(50px);
	}
}

@media screen and (max-width: 320px) {
	.phone {
		border: none;
		border-radius: 0;
		inline-size: 100%;
	}
}

body {
	counter-reset: game;
}

input:checked {
	counter-increment: game;
}

.total-count::after {
	content: counter(game);
}