@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap");

* {
  box-sizing: border-box;
}

body {
  background-color: #fcf2f5;
}

.container {
  height: 100vh;
  width: 100%;
  display: grid;
  justify-content: center;
  align-content: center;
}

.body__forms {
  display: flex;
  justify-content: center;
  align-items: center;
}

.heads__input {
  position: relative;
}

.heads__input-controls {
  width: 240px;
  height: 48px;
  padding: 0 66px 0 16px;
  border: 3px solid #87213c;
  border-radius: 26px;
  background-color: #f9dde3;
  font-family: "Fredoka One", sans-serif;
  font-size: 20px;
  color: #87213c;
  caret-color: #ff2961;
  transition: background-color 0.5s ease-in-out;
  outline: none;
  z-index: 5;
  transform: translate(16px, 10px);
}

.heads__input-controls:focus {
  border-color: #ff2961;
}

.heads__input-cloudy {
  position: absolute;
  top: 50%;
  left: 55%;
  width: 150%;
  transform: translate(-50%, -50%);
  fill: #fff;
}

.heads__input-lbl {
  position: absolute;
  top: -6%;
  left: 13%;
  font-size: 10px;
  letter-spacing: 0.8px;
  color: #87213c;
  font-family: "Fredoka One", sans-serif;
}

.heads__button {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 8px;
  right: -14px;
  height: 50px;
  width: 50px;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: #fff;
  cursor: pointer;
  transition: 0.4s ease-in-out;
}

.heads__button-star {
  width: 40%;
  overflow: visible;
}

.heads__button-svg {
  fill: currentColor;
  stroke: var(--star-stroke, transparent);
  stroke-width: 3px;
}

.heads__button:focus {
  outline: none;
  color: #ff2961;
}

.heads__button:hover {
  --star-stroke: #87213c;
  transform: scale(1.2);
  color: #fae798;
}

.animation {
  z-index: 5;
  width: 200px;
}

.animation .kirby-star {
  stroke-width: 3px;
  stroke: currentColor;
  fill: #fae798;
}

.animation .kirby-star-split {
  color: #87213c;
}

.animation .kirby-foot {
  fill: #ff2961;
}

.animation .kirby-stroke {
  stroke: #87213c;
  stroke-width: 3px;
  stroke-miterlimit: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.animation .kirby-body {
  fill: #f9dde3;
}

.animation .kirby-mouth-open-inner {
  fill: #87213c;
}

.animation .kirby-mouth-open-tongue {
  fill: #ff2961;
}