html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 100%;
}

/* ====================== */

.cat {
  --color-face: #eebd49;
  --color-deco: #e99b48;
  --color-black: #393939;
  --color-ear: #f0cccb;
  --color-tear: #55aae5;

  --position-ear-x: 5%;
  --position-deco-x: 38%;
  --position-eye-x: 20%;
  --position-mouth-x: 29%;

  --size-eye-x: 15%;

  --angle-ear-z: -30deg;

  position: relative;

  width: 90px;
  height: 80px;
  border-radius: 50%;
}

@keyframes catEarsAnimation {
  100% {
    transform: translateY(0);
  }
}

.catEars {
  position: absolute;

  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  transform: translateY(30%);
  animation: catEarsAnimation 2s forwards;
}

.catEar1,
.catEar2 {
  box-sizing: border-box;
  position: absolute;
  transform-origin: center;

  top: -10%;
  width: 26%;
  height: 60%;
  border-radius: 100%;
  border: 4px solid var(--color-face);

  background-color: var(--color-ear);
}

.catEar1 {
  left: var(--position-ear-x);
  transform: rotateZ(var(--angle-ear-z));
}

.catEar2 {
  right: var(--position-ear-x);
  transform: rotateY(180deg) rotateZ(var(--angle-ear-z));
}

.catFace {
  position: relative;

  width: 100%;
  height: 100%;
  border-radius: 50%;

  background-color: var(--color-face);
}

.catDeco1,
.catDeco2 {
  position: absolute;
  top: 1px;
  width: 6%;
  height: 20%;
  border-radius: 5px;

  background-color: var(--color-deco);
}

.catDeco1 {
  left: var(--position-deco-x);
}

.catDeco2 {
  right: var(--position-deco-x);
}

.catEye1,
.catEye2 {
  position: absolute;

  top: 35%;
  width: var(--size-eye-x);
  height: 18%;
  border-radius: 50%;

  background-color: var(--color-black);
}

.catEye1 {
  left: var(--position-eye-x);
}

.catEye2 {
  right: var(--position-eye-x);
}

.catNose {
  position: absolute;

  top: 55%;
  left: 50%;
  width: 15%;
  height: 10%;
  border-radius: 50%;
  transform: translateX(-50%);

  background-color: var(--color-black);
}

.catMouth1,
.catMouth2 {
  position: absolute;

  top: 55%;
  width: 18%;
  height: 15%;
  border-radius: 50%;
  border: var(--color-black) solid 2px;
  border-top-color: transparent;
  border-left-color: transparent;
}

.catMouth1 {
  left: var(--position-mouth-x);
}

.catMouth2 {
  right: var(--position-mouth-x);
  transform: rotateY(180deg);
}

@keyframes catTearAnimation {
  100% {
    transform: scaleY(1);
  }
}

.catTear1,
.catTear2 {
  position: absolute;
  transform-origin: top;
  display: flex;
  flex-direction: row;
  justify-content: center;

  top: 38%;
  width: var(--size-eye-x);
  height: 50%;

  transform: scaleY(0);
  animation: catTearAnimation 2s 1.2s forwards;
}

.catTear1::after,
.catTear2::after {
  display: block;
  content: "";

  width: 55%;
  height: 100%;
  border-radius: 10px;
  background-color: var(--color-tear);
}

.catTear1 {
  left: var(--position-eye-x);
}

.catTear2 {
  right: var(--position-eye-x);
}