/* Custom added CSS */
.normalize {
    text-decoration: none;
    color: white;
}

.alert-box {
            background-color: #ffffff;
            width: 60%;
            padding: 24px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            text-align: center;
            border: 1px solid #e0e0e0;
  			
  			position: fixed;
            top: 45%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 6;
  
  			/* ANIMATION SETUP */
            opacity: 0;
            /* Combines centering offset with an initial shrunken scale state */
            transform: translate(-50%, -50%) scale(0.7);
            /* Tells the browser to run the "showAlert" animation */
            animation: showAlert 0.3s ease-out forwards;
            /* Delays the start of the animation by exactly 1 second */
            animation-delay: 1s;
        }

        /* Alert Message Text */
        .alert-message {
            color: #333333;
            font-size: 16px;
            margin-bottom: 24px;
            line-height: 1.4;
        }

 /* Static OK Button */
 .alert-btn {
            background-color: #007bff;
            color: #ffffff;
            border: none;
            padding: 10px 32px;
            font-size: 14px;
            font-weight: bold;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        /* Hover Effect for Button */
        .alert-btn:hover {
            background-color: #0056b3;
        }

.background-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  z-index: 5; /* Below the alert, above other content */
}

@keyframes showAlert {
    to {
          opacity: 1;
          /* Smoothly brings the card back to full size while maintaining center */
          transform: translate(-50%, -50%) scale(1);
        }
}