:root {
  --bezier-1: 0.42;
  --bezier-2: 0.0;
  --bezier-3: 0.58;
  --bezier-4: 1.0;
  --p1x: 23.94vmin;
  --p1y: 0vmin;
  --p2x: 33.06vmin;
  --p2y: -57vmin;
  --play-area-size: 60vmin;
}

main {
  font-family: monospace;
}
main h1 {
  padding-top: 1em;
  color: #8888ff;
}
main p {
  margin: auto 2em;
}
main article {
  text-align: center;
}
main .ball {
  background-color: red;
  position: absolute;
  width: 3vmin;
  height: 3vmin;
  border-radius: 1.5vmin;
  bottom: 0vmin;
}
main .point {
  display: unset;
  color: rgba(0, 0, 0, 0.8);
  font-size: smaller;
  background-color: rgba(88, 88, 88, 0.5);
  width: 1.5vmin;
  height: 1.5vmin;
  border-radius: 0.75vmin;
  position: absolute;
  bottom: 0.75vmin;
  left: 0.75vmin;
  animation-composition: add;
  visibility: hidden;
}
main #bezier-p1 {
  transform: translate(var(--p1x), var(--p1y));
}
main #bezier-p2 {
  transform: translate(var(--p2x), var(--p2y));
}
main #bezier-p3 {
  transform: translate(57vmin, -57vmin);
}
main .first-order {
  background-color: rgba(55, 55, 255, 0.5);
}
main .second-order {
  background-color: rgba(255, 248, 55, 0.5);
}
main #bezier-p0-p1 {
  animation: move_p0-p1 4s linear 0s infinite alternate;
}
@keyframes move_p0-p1 {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(var(--p1x), var(--p1y));
  }
}
main #bezier-p1-p2 {
  animation: move_p1-p2 4s linear 0s infinite alternate;
}
@keyframes move_p1-p2 {
  from {
    transform: translate(var(--p1x), var(--p1y));
  }
  to {
    transform: translate(var(--p2x), var(--p2y));
  }
}
main #bezier-p2-p3 {
  animation: move_p2-p3 4s linear 0s infinite alternate;
}
@keyframes move_p2-p3 {
  from {
    transform: translate(var(--p2x), var(--p2y));
  }
  to {
    transform: translate(57vmin, -57vmin);
  }
}
main input[type=number] {
  width: 3.2em;
  height: 1.2em;
  text-align: center;
  grid-row: 1;
}
main .input-section label {
  font-size: smaller;
  grid-row: 2;
}
main .bezier.ball {
  animation: marker_x 4s linear 0s infinite alternate, marker_y 4s cubic-bezier(var(--bezier-1), var(--bezier-2), var(--bezier-3), var(--bezier-4)) 0s infinite alternate;
  animation-composition: add;
}
@keyframes marker_x {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(57vmin, 0);
  }
}
@keyframes marker_y {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(0, -57vmin);
  }
}
main .play-container {
  padding: 0.5vmin;
  background-color: #dddddd;
  color: #111111;
  margin: auto;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}
main .play-area {
  width: var(--play-area-size);
  height: var(--play-area-size);
  background-color: lightcyan;
  position: relative;
  margin: auto;
  border: 2px solid darkcyan;
  border-radius: 2px;
}
main .input-section {
  display: flex;
  border: 2px solid #8888aa;
  border-radius: 2px;
  width: var(--play-area-size);
  margin: 0.5vmin;
  flex-direction: column;
  background-color: #ddddff;
  align-content: center;
}
main .input-numbers {
  display: inline-grid;
  align-self: center;
  column-gap: 0.5em;
  margin: 0.5em;
}
main .input-numbers button {
  grid-row: 1;
}
main .input-display {
  margin: 0.5em;
}
main label {
  vertical-align: text-top;
}
main button {
  background-color: #ddffee;
  color: black;
  border-color: #aaddbb;
  margin: 0.2em;
}