body {
  background: #243034;
  font-family: "quicksandlight", Arial, Helvetica, sans-serif;
  min-height: 80vh;
}

.penguin * {
  position: absolute;
}

h1,
h2,
h3,
h4 {
  font-family: "comfortaaregular", Arial, Helvetica, sans-serif;
}

:root {
  --penguin-size: 300px;
  --penguin-skin: rgb(19, 19, 19);
  --penguin-belly: white;
  --penguin-beak: orange;
}

.title,
.text {
  text-align: center;
}

.penguin {
  position: relative;
  margin: 5em auto;
  display: block;
  width: var(--penguin-size, 300px);
  height: var(--penguin-size, 300px);
}

.right-cheek {
  top: 15%;
  left: 35%;
  background: var(--penguin-belly, white);
  width: 60%;
  height: 70%;
  border-radius: 70% 70% 60% 60%;
}

.left-cheek {
  top: 15%;
  left: 5%;
  background: var(--penguin-belly, white);
  width: 60%;
  height: 70%;
  border-radius: 70% 70% 60% 60%;
}

.belly {
  top: 60%;
  left: 2.5%;
  background: var(--penguin-belly, white);
  width: 95%;
  height: 100%;
  border-radius: 120% 120% 100% 100%;
}

.penguin-top {
  top: 10%;
  left: 25%;
  background: var(--penguin-skin, gray);
  width: 50%;
  height: 45%;
  border-radius: 70% 70% 60% 60%;
}

.penguin-bottom {
  top: 40%;
  left: 23.5%;
  background: var(--penguin-skin, gray);
  width: 53%;
  height: 45%;
  border-radius: 70% 70% 100% 100%;
}

.right-hand {
  top: 0%;
  left: 16%;
  background: var(--penguin-skin, black);
  width: 30%;
  height: 60%;
  border-radius: 30% 30% 120% 30%;
  -webkit-transform: rotate(50deg);
          transform: rotate(50deg);
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  z-index: -1;
}

.hello {
  top: 5%;
  left: 25%;
  background: var(--penguin-skin, black);
  width: 30%;
  height: 60%;
  border-radius: 30% 30% 120% 30%;
  -webkit-transform: rotate(130deg);
          transform: rotate(130deg);
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  z-index: -1;
  -webkit-animation: 2s wave infinite linear;
          animation: 2s wave infinite linear;
}

@-webkit-keyframes wave {
  10% {
    -webkit-transform: rotate(100deg);
            transform: rotate(100deg);
  }
  20% {
    -webkit-transform: rotate(130deg);
            transform: rotate(130deg);
  }
  30% {
    -webkit-transform: rotate(100deg);
            transform: rotate(100deg);
  }
  40% {
    -webkit-transform: rotate(130deg);
            transform: rotate(130deg);
  }
}

@keyframes wave {
  10% {
    -webkit-transform: rotate(100deg);
            transform: rotate(100deg);
  }
  20% {
    -webkit-transform: rotate(130deg);
            transform: rotate(130deg);
  }
  30% {
    -webkit-transform: rotate(100deg);
            transform: rotate(100deg);
  }
  40% {
    -webkit-transform: rotate(130deg);
            transform: rotate(130deg);
  }
}

.left-hand {
  top: 0%;
  left: 75%;
  background: var(--penguin-skin, gray);
  width: 30%;
  height: 60%;
  border-radius: 30% 30% 30% 120%;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  z-index: -1;
}

.right-feet {
  top: 85%;
  left: 60%;
  background: var(--penguin-beak, orange);
  width: 15%;
  height: 30%;
  border-radius: 50% 50% 50% 50%;
  -webkit-transform: rotate(-80deg);
          transform: rotate(-80deg);
  z-index: -2222;
}

.left-feet {
  top: 85%;
  left: 25%;
  background: var(--penguin-beak, orange);
  width: 15%;
  height: 30%;
  border-radius: 50% 50% 50% 50%;
  -webkit-transform: rotate(80deg);
          transform: rotate(80deg);
  z-index: -2222;
}

.right-eye {
  top: 45%;
  left: 60%;
  background: black;
  width: 15%;
  height: 17%;
  border-radius: 50%;
}

.left-eye {
  top: 45%;
  left: 25%;
  background: black;
  width: 15%;
  height: 17%;
  border-radius: 50%;
}

.sparkle {
  top: 100%;
  left: -23%;
  background: white;
  width: 150%;
  height: 100%;
  border-radius: 50%;
  -webkit-transition: 10s all;
  transition: 10s all;
}

.close-eyes {
  left: -23%;
  background: white;
  width: 150%;
  height: 100%;
  border-radius: 50%;
  -webkit-animation: 400ms move-eyes forwards linear;
          animation: 400ms move-eyes forwards linear;
}

@-webkit-keyframes move-eyes {
  0% {
    top: 100%;
  }
  50% {
    top: 50%;
  }
  100% {
    top: 25%;
  }
}

@keyframes move-eyes {
  0% {
    top: 100%;
  }
  50% {
    top: 50%;
  }
  100% {
    top: 25%;
  }
}

.blush-right {
  top: 65%;
  left: 15%;
  background: pink;
  width: 15%;
  height: 10%;
  border-radius: 50%;
}

.blush-left {
  top: 65%;
  left: 70%;
  background: pink;
  width: 15%;
  height: 10%;
  border-radius: 50%;
}

.beak-top {
  top: 60%;
  left: 40%;
  background: var(--penguin-beak, orange);
  width: 20%;
  height: 10%;
  border-radius: 50%;
}

.beak-bottom {
  top: 65%;
  left: 42%;
  background: var(--penguin-beak, orange);
  width: 16%;
  height: 10%;
  border-radius: 50%;
}

/*Cloud message*/
.cloud {
  top: -7%;
  left: -7%;
  width: 120px;
  height: 64px;
}

.cloud .text {
  display: block;
  font-size: 110px;
  font-family: "inconsolataregular";
  -webkit-transform: translate(8%, 50%);
          transform: translate(8%, 50%);
}

.cloud .letters {
  display: none;
}

.cloud .fill-message {
  fill: white;
}

.cloud .fill-heart {
  display: none;
  fill: red;
}

/*Message after cliking the penguin*/
.click-me {
  top: -7%;
  left: -7%;
  width: 120px;
  height: 64px;
}

.click-me .text {
  display: none;
}

.click-me .letters {
  display: block;
  font-family: "inconsolataregular";
  font-size: 150px;
  fill: black;
}

.click-me .I {
  -webkit-transform: translate(120px, 166px);
          transform: translate(120px, 166px);
}

.click-me .U {
  -webkit-transform: translate(368px, 166px);
          transform: translate(368px, 166px);
}

.click-me .fill-message {
  fill: white;
}

.click-me .fill-heart {
  display: block;
  fill: red;
}

.text_footer {
  text-align: center;
  color: snow;
}

/*Device*/
@media (max-width: 350px) {
  :root {
    --penguin-size: 200px;
    --penguin-skin: black;
  }
}
/*# sourceMappingURL=main.css.map */