document.addEventListener("mousemove", eyeball);

function eyeball() {
  const eye = document.querySelector(".eye");
  let x = eye.getBoundingClientRect().left + eye.clientWidth / 2;
  let y = eye.getBoundingClientRect().top + eye.clientHeight / 2;
  let radian = Math.atan2(event.clientX - x, event.clientY - y);
  // EDIT
  // eye.style.transform = `rotate(${rot}deg)`;

  // EDIT
  const pupil = document.querySelector(".pupil");
  let newX = Math.sin( radian - (Math.PI/4) ) * 25
  let newY = Math.cos( radian - (Math.PI/4) ) * 10
  pupil.style.left = newX + 30 + "px"
  pupil.style.top = newY + 15 + "px"
}

h1 {
  margin-top: 100px;
  text-align: center;
  color: white;
}
.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}
body {
  background-color: black;
}
label {
  color: white;
}
h2 {
  color: white;
}
.eye-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* EDIT Don't rotate, it breaks the position from Javascript */
  /* transform: rotate(45deg); */
  margin-top: 50px;
}
.eye {
  background-color: white;
  /* EDIT Change width and border shape, since we aren't rotating */
  width: 80px;
  height: 50px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  position: relative;
}
/* EDIT No longer using :before */
/* .eye:before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} */

/* EDIT - add pupil settings (simmilar to .eye:before) */
.pupil {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
  /* top and left will be set by Javascript */
  top: 10px;
  left: 10px;
}

        <div class="eye-container">
          <div class="eye">
            <div class="pupil"></div>
          </div>
        </div>

        <div class="container">
          <label for="lat">Latitude</label>
          <input id="lat" type="text" placeholder="<%= lat %>" name="Latitude" />
          <label for="lon">Longitude</label>
          <input id="lon" type="text" placeholder="<%= lon %>" name="Longitude" />

          <h2>Click the link below to see where it is now on a map</h2>
          <a href="https://www.google.com/maps/search/?api=1&query=<%= lat %>,<%= lon %>">Current ISS Location</a>
        </div>