* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #5c1f8c;
}

.container {
  height: 31.25em;
  width: 31.25em;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.ufo {
  height: 16.87em;
  width: 11.25em;
  background: linear-gradient(to bottom, #e6e3f5 90%, #ede544 90%);
  border-radius: 11.25em 11.25em 0 0;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 40%;
  animation: float 3s infinite;
}

@keyframes float {
  50% {
    top: calc(40% + 3.12em);
  }
}

.ufo:before {
  position: absolute;
  content: "";
  width: 11.25em;
  height: 5.62em;
  background-color: #eebb22;
  border-radius: 0 0 5.62em 5.62em;
  bottom: -5.62em;
}

.ufo:after {
  position: absolute;
  content: "";
  height: 1.25em;
  width: 7.5em;
  border: 0.62em solid #eebb22;
  border-radius: 7.5em 7.5em 0 0;
  left: 1.25em;
  border-bottom: none;
  top: 20.62em;
}

.alien {
  position: absolute;
  height: 11.25em;
  width: 8.75em;
  background-color: #40bf60;
  left: 1.25em;
  top: 3.93em;
  border-radius: 8.75em 8.75em 0 0;
}

.alien:before {
  content: "";
  position: absolute;
  height: 5.62em;
  width: 5.62em;
  background-color: #ffffff;
  border-radius: 50%;
  left: 1.56em;
  top: 1.87em;
}

.alien:after {
  position: absolute;
  content: "";
  height: 1.25em;
  width: 2.5em;
  border: 0.5em solid #000000;
  border-bottom: transparent;
  border-radius: 3.75em 3.75em 0 0;
  left: 2.5em;
  top: 3.12em;
}

.mouth {
  position: absolute;
  height: 1.25em;
  width: 2.5em;
  background-color: #118c58;
  border-radius: 0.31em 0.31em 2.5em 2.5em;
  left: 3.12em;
  top: 8.75em;
}

.details,
.details:before {
  height: 1.56em;
  width: 3.12em;
  border: 0.5em solid #40bf60;
  border-bottom: none;
  border-radius: 3.12em 3.12em 0 0;
}

.details {
  transform: rotate(65deg);
}

.details:before {
  position: absolute;
  content: "";
  transform: rotate(-130deg);
  left: 1.87em;
  bottom: 4.68em;
}

.details:after {
  content: "";
  position: absolute;
  height: 1.25em;
  width: 1.25em;
  background-color: #40bf60;
  border-radius: 50%;
  bottom: -0.62em;
  left: -0.93em;
  box-shadow: 3.75em -7.5em #40bf60;
}

@media screen and (min-width: 700px) {
  .container {
    font-size: 20px;
  }
}