/* Colors */
:root {
	--bunny-layer: rgba(0, 0, 0, 0);
	--cloud-layer: rgb(255, 255, 255);
  --sky: rgb(204, 239, 255);
	--green-grass: rgb(138, 134, 53);
	--dirt-color: rgb(208, 98, 36);
  --dirt-shadown-color: rgb(174, 67, 30);
  --title-color: rgb(33, 33, 33);
  --title-score-color: rgb(196, 2, 2);
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* Use `rem` instead of `px`. */
  font-size: 62.5%; /* (10/16 * 100) */
  /* 1rem = 10px */
}

body {
  counter-reset: game;
  font-size: 1.6rem;
  font-family: 'Roboto', sans-serif;
  height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
}

a {
  text-decoration: none;
}

img {
  width: 100%;
}

.jump {
	animation: jump 2s ease-in-out infinite;
}

@keyframes jump {
	0% {
		bottom: 0;
	}
	25% {
		bottom: -5.8rem;
	}
	100% {
		bottom: 0;
  }
}

.layer input[type="checkbox"] {
	position: relative;
	cursor: pointer;
	width: 100%;
	height: 8rem;
	z-index: 2;
	appearance: none;
}

.layer input[type="checkbox"]:checked {
	counter-increment: game;
}

.score::after {
	content: counter(game);
}

.title {
  color: var(--title-color);
	font-size: 3rem;
	font-family: cursive;
	text-align: center;
	margin-top: 2rem;
}

.score {
  color: var(--title-score-color);
  text-align: center;
	margin-top: .6rem;
  font-family: cursive;
	font-weight: bold;
	font-size: 2rem;
}

.phone {
  position: relative;
  border: .8rem solid var(--title-color);
  border-radius: 4rem;
  height: 60rem;
  width: 30rem;
  background: var(--sky);
  box-shadow: 0 1.9rem 3.8rem rgba(0, 0, 0, 0.30), 0 1.5rem 1.2rem rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.layer-1 {
  position: absolute;
  z-index: 1;
  width: 8rem;
  height: 45rem;
  bottom: 0;
  right: 5.5rem;
}

.layer-2 {
  position: absolute;
  z-index: 2;
  width: 8rem;
  height: 45rem;
  bottom: 0;
  left: 5.5rem;
}

.layer-3 {
  position: absolute;
  background: var(--dirt-color);
  z-index: 3;
  width: 20rem;
  height: 40rem;
  bottom: 0;
  border-radius: 2rem;
  box-shadow: 0 1.9rem 3.8rem rgba(0, 0, 0, 0.30), 0 1.5rem 1.2rem rgba(0, 0, 0, 0.22);
  /* center element with position: absolute*/
  margin: 0 auto;
  left: 0;
  right: 0;
}

.layer-4 {
  position: absolute;
  z-index: 4;
  width: 8rem;
  height: 30rem;
  bottom: 0;
  left: 3.2rem;
}

.layer-5 {
  position: absolute;
  background: var(--dirt-color);
  z-index: 5;
  border-radius: 2rem 2rem 0 3rem;
  width: 16rem;
  height: 25rem;
  box-shadow: 0 1.9rem 3.8rem rgba(0, 0, 0, 0.30), 0 1.5rem 1.2rem rgba(0, 0, 0, 0.22);
  bottom: 0;
  left: 0;
}

.layer-6 {
  position: absolute;
  z-index: 6;
  width: 8rem;
  height: 16rem;
  bottom: 0;
  right: 3.6rem;
}

.layer-7 {
  position: absolute;
  background: var(--dirt-color);
  z-index: 7;
  border-radius: 2rem 2rem 3rem 0;
  width: 16rem;
  height: 11rem;
  box-shadow: 0 1.9rem 3.8rem rgba(0, 0, 0, 0.30), 0 1.5rem 1.2rem rgba(0, 0, 0, 0.22);
  bottom: 0;
  right: 0;
}

.layer-8 {
  position: absolute;
  background: var(--green-grass);
  z-index: 8;
  border-radius: 50%;
  width: 8rem;
  height: 8rem;
  box-shadow: 0 1.9rem 3.8rem rgba(0, 0, 0, 0.30), 0 1.5rem 1.2rem rgba(0, 0, 0, 0.22);
  bottom: 0;
  margin: 0 auto;
  right: 0;
  left: 0;
}

.layer-9 {
  position: absolute;
  background: rgb(255, 255, 255);
  z-index: 9;
  border-radius: 50%;
  width: 8rem;
  height: 8rem;
  box-shadow: 0 1.9rem 3.8rem rgba(0, 0, 0, 0.30), 0 1.5rem 1.2rem rgba(0, 0, 0, 0.22);
  bottom: 0;
  right: 0;
}

.layer-10 {
  position: absolute;
  background: rgb(255, 255, 255);
  z-index: 9;
  border-radius: 50%;
  width: 8rem;
  height: 8rem;
  box-shadow: 0 1.9rem 3.8rem rgba(0, 0, 0, 0.30), 0 1.5rem 1.2rem rgba(0, 0, 0, 0.22);
  bottom: 0;
  left: 0;
}

.left-ear--outer {
  background: rgb(172, 172, 172);
  width: 2rem;
  height: 5rem;
  border-radius: 90%;
  position: absolute;
  left: 1rem;
  border: .1rem solid black;
}

.left-ear--inner {
  background: rgb(190, 190, 190);
  width: 1.4rem;
  height: 3.8rem;
  border-radius: 90%;
  position: absolute;
  left: 1.3rem;
  top: .7rem;
}

.right-ear--outer {
  background: rgb(172, 172, 172);
  width: 2rem;
  height: 5rem;
  border-radius: 90%;
  position: absolute;
  right: 1rem;
  border: .1rem solid black;
}

.right-ear--inner {
  background: rgb(190, 190, 190);
  width: 1.4rem;
  height: 3.8rem;
  border-radius: 90%;
  position: absolute;
  right: 1.3rem;
  top: .7rem;
}

.head {
  background: rgb(172, 172, 172);
  border-radius: 50%;
  height: 8rem;
  width: 100%;
  position: absolute;
  top: 2.6rem;
  border: .1rem solid black;
}

.head__eye {
  background: black;
  border-radius: 50%;
  width: 1.3rem;
  height: 1.3rem;
  position: absolute;
  top: 1.2rem;
  border: .5rem solid rgb(255, 255, 255);
  animation-name: blink;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

@keyframes blink {
	0% {
		height: 1.3rem;
	}
	5% {
		transform: translate(0, .2rem);
		height: 1rem;
	}
	10% {
		transform: translate(0);
		height: 1.3rem;
	}
}

.head__eye--left {
  left: 1.4rem;
}

.head__eye--right {
  right: 1.4rem;
}

/* wall 1 */
.layer-3::after,
.layer-5::after,
.layer-7::after {
	content: "";
	position: absolute;
	left: -0rem;
	top: 0rem;
	width: 100%;
	height: 4rem;
  border-radius: 2rem;
	background: linear-gradient(135deg, var(--green-grass) 25%, transparent 25%) -5rem
			0,
		linear-gradient(-135deg, var(--green-grass) 25%, transparent 25%) -5rem 0;
	background-size: 4rem 10rem;
}

.layer-3::before,
.layer-5::before,
.layer-7::before {
	content: "";
	position: absolute;
	left: -0rem;
	top: 1.5rem;
	width: 100%;
	height: 4rem;
	background: linear-gradient(135deg, var(--dirt-shadown-color) 25%, transparent 25%) -5rem
			0,
		linear-gradient(-135deg, var(--dirt-shadown-color) 25%, transparent 25%) -5rem 0;
	background-size: 4rem 10rem;
}

/* lawn */
.lawn {
  position: absolute;
  border-radius: 50%;
  background: white;
  width: 6rem;
  height: 9rem;
}

.lawn__green {
  background: var(--green-grass);
}

.lawn--top {
  width: 8rem;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.lawn--top2 {
  position: absolute;
  border-radius: 50%;
  background: white;
  width: 6rem;
  height: 6rem;
  bottom: 4rem;
  left: -6rem;
}

.lawn--top3 {
  position: absolute;
  border-radius: 50%;
  background: white;
  width: 6rem;
  height: 8rem;
  bottom: 4rem;
  right: -6rem;
}

.lawn--left {
  top: 2rem;
  left: -1rem;
  transform: rotate(-90deg);
}

.lawn--right {
  top: 2rem;
  right: -1rem;
  transform: rotate(90deg);
}