.login-button {
  position: relative;
  overflow: hidden; /* Hides the line when it is outside the button boundaries */
  cursor: pointer;
}

/* Creating the white line container */
.login-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%; /* Starts completely hidden on the left */
  width: 50%;
  height: 100%;
  
  /* Creates the angled white login line gradient */
  background: linear-gradient(
    90deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.4) 50%, 
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg); /* Angles the vertical line */
  
  /* Tells the animation to play forever */
  animation: login-loop 3s infinite linear;
}

/* The loop animation rules */
@keyframes login-loop {
  0% {
    left: -150%; /* Start position on the left */
  }
  50% {
    left: 150%;  /* End position on the right */
  }
  100% {
    left: 150%; /* Stays on the right to create a pause before restarting */
  }
}
.gold-glow-button {
  /* Dimensions and styling for the button shape */
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background-color: rgba(212, 175, 55, 0.15); /* Semi-transparent gold inside */
  border: 2px solid rgba(212, 175, 55, 0.4);   /* Soft gold border outline */
  
  /* Text styling for the letter inside */
  color: #d4af37; /* Metallic gold text color */
  font-size: 32px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;

  /* The outer gold glow effect */
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.6);
}