@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");

html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: "Nunito", Arial, sans-serif;
  color: #fff;
  text-align: center;
  background: #0b0f1f url("moon.png") center/cover no-repeat fixed;
  overflow: hidden;
}

.container {
  position: relative;
  width: 700px;
  height: 420px;
  margin: 8px auto 0;
  overflow: visible;
  background: transparent;
}

#cow {
  position: absolute;
  width: 140px;
  top: 0;
  left: 0;
  offset-rotate: 0deg;
  offset-path: path(
    "M 105 330 A 240 240 0 1 1 585 330 A 240 240 0 1 1 105 330"
  );
}

.leap {
  animation: orbitOnce 3s linear;
}
.fail {
  animation: tryAndFall 1.2s ease-in-out;
}

@keyframes orbitOnce {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}
@keyframes tryAndFall {
  0% {
    offset-distance: 0%;
  }
  35% {
    offset-distance: 6.25%;
  }
  100% {
    offset-distance: 0%;
  }
}

form {
  position: fixed;
  left: 50%;
  bottom: 35vh;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  margin: 0;
}
input,
button {
  font-size: 16px;
  padding: 12px 14px;
  border: none;
  outline: none;
  border-radius: 999px;
}
#year {
  width: 9ch;
  text-align: center;
  background: #ffffffea;
  color: #222;
}
button {
  background: #ffb3c7;
  color: #2b1a1f;
  font-weight: 700;
  cursor: pointer;
}
#result {
  display: none;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 28vh;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  margin: 0;
  color: #fff;
  font-weight: 700;
}
#result.show {
  display: inline-block;
}

@media (max-width: 900px) and (min-width: 601px) {
  .container {
    width: 560px;
    height: 336px;
    margin: 8vh auto 0;
  }
  #cow {
    width: 120px;
    offset-path: path(
      "M 86 300 A 190 190 0 1 1 466 300 A 190 190 0 1 1 86 300"
    );
  }
  form {
    bottom: 40vh;
  }
  #result {
    bottom: 34vh;
  }
}

@media (max-width: 600px) {
  .container {
    width: 360px;
    height: 216px;
    margin: 14vh auto 0;
  }
  #cow {
    width: 100px;

    offset-path: path(
      "M 30 240 A 150 150 0 1 1 330 240 A 150 150 0 1 1 30 240"
    );
  }
  form {
    bottom: 42vh;
  }
  #result {
    bottom: 36vh;
  }
}