@import url(https://fonts.googleapis.com/css?family=Pacifico);
body {
  background-color: #ffd989;
  height: 100%;
}

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

.title {
  color: #f16542;
  font-size: 80px;
  font-family: 'Pacifico';
  margin: 0 0 0 5%;
}

.egg {
  width: 160px;
  background-color: #f16542;
  height: 200px;
  margin-top: 75px;
  border: 4px solid #ffd989;
  border-radius: 50%/60% 60% 40% 40%;
  position: relative;
}

.eggConteiner {
  animation: eggAnimation .75s linear infinite alternate;
}

@keyframes eggAnimation {
  0% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}
.ear {
  width: 40px;
  background-color: #ffc1f7;
  height: 160px;
  border: 7px solid #f16542;
  box-sizing: border-box;
  border-radius: 50%/60% 60% 40% 40%;
  position: absolute;
  z-index: -1;
  top: -75px;
}
.ear__right {
  left: 100px;
  animation: rightEarAnimation 3s linear infinite alternate;
}
.ear__left {
  left: 20px;
  animation: leftEarAnimation 3s linear infinite alternate;
}

@keyframes leftEarAnimation {
  0% {
    transform: translateX(42px) translateY(84px) rotate(-35deg);
  }
  70% {
    transform: translateX(0px) translateY(0px) rotate(-35deg);
  }
}
@keyframes rightEarAnimation {
  0% {
    transform: translateX(-42px) translateY(84px) rotate(35deg);
  }
  70% {
    transform: translateX(0px) translateY(0px) rotate(35deg);
  }
}
.dot {
  height: 25px;
  width: 25px;
  background-color: #ffd989;
  border-radius: 25px;
  position: absolute;
  top: 30px;
}
.dot__eyeLeft {
  left: 40px;
}
.dot__eyeRight {
  left: 90px;
}
.dot::before {
  content: '';
  height: 25px;
  width: 25px;
  background-color: #ffd989;
  border-radius: 25px;
  position: absolute;
  top: 45px;
  left: 35px;
}
.dot__dot1 {
  top: 75px;
  left: 20px;
}
.dot__dot2 {
  top: 120px;
  left: 105px;
}
.dot__dot3 {
  top: 165px;
  left: 90px;
}
.dot__dot4 {
  top: 120px;
  left: 5px;
}

.pupil {
  position: absolute;
  background-color: black;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  top: 9px;
  left: 8px;
  animation: pupilAnimation 3s infinite;
}

@keyframes pupilAnimation {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  85% {
    opacity: 0;
  }
}
@media (max-width: 840px) {
  .conteiner {
    flex-direction: column;
  }

  .egg {
    margin: 75px auto 0;
  }

  .title {
    text-align: center;
    margin-top: 10px;
  }
}