body {
  font-family: Inter, sans-serif;
  overflow-y: scroll;
}
header {
  background-image: url("../images/bg-header.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.navbar .nav-link {
  color: #FFF;
}
.navbar .nav-link:hover {
  color: #ddd;
}

/* Loading indicator */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Ripple effect for loading */
.ripple {
  position: relative;
  width: 50px;
  height: 50px;
}
.ripple::before, .ripple::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid #4f1a80;
  opacity: 0;
  animation: ripple 3s infinite;
}
.ripple::after {
  animation-delay: 1.5s;
}

/* Loading ripple */
@keyframes ripple {
  0% {
      transform: scale(0.5);
      opacity: 0;
  }
  25% {
      opacity: 1;
  }
  100% {
      transform: scale(2.5);
      opacity: 0;
  }
}

.error-flash {
  animation: flashRed 1s ease-in-out;
}

/* Optional: To ensure focus highlight is also shown for inputs */
input.error-flash {
  border: 1px solid red; /* Add a red border for input fields */
  animation: flashRed 750ms ease-in-out;
}

@keyframes flashRedAndGrow {
  0% {
      color: #dc3545;
      font-size: 1rem;
  }
  50% {
      color: #dc3545;
      font-size: 1.2rem; /* Slightly larger text */
  }
  100% {
      color: inherit; /* Revert to original color */
      font-size: 1rem; /* Revert to original size */
  }
}
@keyframes flashRed {
  0% {
      color: #dc3545;
      font-size: 1rem;
  }
  50% {
      color: #dc3545;
  }
  100% {
      color: inherit; /* Revert to original color */
  }
}