body {
  margin: 0;
}

main {
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(skyblue, lavender);
  perspective: 100px;
}

.cat * {
  position: absolute;
  border-radius: 100%;
}

.cat {
  overflow: hidden;
  width: 100vh;
  height: 100vh;
  top: 0%;
  margin: auto;
}

.cat .blur {
  width: 100vh;
  height: 100vh
}

.blur * {
  background-color: mistyrose;
  box-shadow: inset 10px -15px 50px red, inset -10px 15px 80px white;
  filter: blur(25px);
}

.head {
  top: 30%;
  left: 33%;
  width: 40vh;
  height: 35vh;
}

.body {
  bottom: 15%;
  left: 20%;
  width: 55vh;
  height: 40vh;
}

.rug {
  position: absolute;
  bottom: 20%;
  left: 15%;
  width: 70%;
  height: 10%;
  background-color: tomato;
  transform: rotate3d(1, 0, 0, 30deg);
  filter: blur(20px);
}

.earleft {
  top: 23%;
  left: 33%;
  width: 10%;
  height: 15%;
  transform: rotate(-30deg);
}

.earright {
  top: 20%;
  right: 33%;
  width: 10%;
  height: 15%;
  transform: rotate(20deg);
}

.eyeright, .eyeleft {
  top: 40%;
  /* position: absolute; */
  border-radius: 100%;
  width: 3vh;
  height: 6vh;
  background-color: white;
  box-shadow: inset 20px -25px 100px white;
  filter: blur(3px);
}

.eyeleft {
  left: 50%;
}

.eyeright {
  left: 55%
}

.eyeleft div, .eyeright div {
  top: 25%;
  left: 50%;
  width: 50%;
  height: 50%;
  background-color: black;
  border-radius: 100%;
  filter: blur(0px);
  box-shadow: inset 0px -5px 100px black;
}

.pill {
  font-size: 3vh;
  position: absolute;
  top: 5%;
  left: 5%;
  color: white;
  text-shadow: -2px 2px 5px white;
  padding: 2% 4% 2% 4%;
  background-image: linear-gradient(lightcyan, paleturquoise);
  box-shadow: inset 0 -5px 20px seagreen, inset 0 5px 20px white, -8px 5px 25px white;
  border: 0px;
  border-radius: 9999px;
  cursor: pointer;
}

.pill:active {
  padding: 2.2% 4% 1.8% 4%;
  text-shadow: -2px -2px 5px white;
  box-shadow: inset 0 5px 20px teal, inset 0 -5px 20px white, -8px 8px 15px white;
}

.pill2 {
  font-size: 3vh;
  position: absolute;
  top: 5%;
  right: 5%;
  color: white;
  text-shadow: -2px 2px 5px white;
  padding: 2% 4% 2% 4%;
  background-image: linear-gradient(lightcyan, orangered);
  box-shadow: inset 0 -5px 20px brown, inset 0 5px 20px white, -8px 5px 25px white;
  border: 0px;
  border-radius: 9999px;
  cursor: pointer;
}

.pill2:active {
  padding: 2.2% 4% 1.8% 4%;
  text-shadow: -2px -2px 5px white;
  box-shadow: inset 0 5px 20px brown, inset 0 -5px 20px white, -8px 8px 15px white;
}