body {
  font-family: Arial, sans-serif;
  padding: 40px;
  max-width: 500px;
  margin: auto;
  background: #f9f9f9;
}

h2 {
  text-align: center;
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

input {
  padding: 10px;
  font-size: 16px;
}

button {
  padding: 10px;
  background-color: #0066cc;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #004999;
}

a {
  text-decoration: none;
  color: #0066cc;
}


.spinner {
    display: none;
   width: 11.2px;
   height: 11.2px;
   animation: spinner-o824ag 1s infinite linear;


}

.spinner div {
   position: absolute;
   width: 100%;
   height: 100%;
   /* border: 1px solid; */
   background: #474bff;
   border-radius: 50%;
   animation: spinner-vse6n7 1.25s infinite ease;
}

.spinner div:nth-child(1) {
   --rotation: 90;
}

.spinner div:nth-child(2) {
   --rotation: 180;
}

.spinner div:nth-child(3) {
   --rotation: 270;
}

.spinner div:nth-child(4) {
   --rotation: 360;
}

@keyframes spinner-vse6n7 {
   0%, 100% {
      transform: rotate(calc(var(--rotation) * 1deg)) translateY(0);
   }

   50% {
      transform: rotate(calc(var(--rotation) * 1deg)) translateY(300%);
   }
}

@keyframes spinner-o824ag {
   to {
      transform: rotate(360deg);
   }
}