/* Prevent scrollbars on the entire page */
html, body {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    overflow: hidden; /* Prevent scrollbars */
    width: 100%; /* Ensure the body doesn't exceed the viewport width */
    height: 100%; /* Ensure the body doesn't exceed the viewport height */
}

.landing-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full viewport height */
    background: linear-gradient(135deg, #f0f0f0 30%, #d6d6d6 80%); /* Adjusted gradient stops */
    overflow: hidden; /* Ensure particles stay within the viewport */
    position: relative; /* Required for particle positioning */
}

.logo-container {
    position: absolute;
    top: 46%; /* Move the logo lower for better balance */
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6); /* Scale down the logo further */
    z-index: 2; /* Ensure the logo stays above the particles */
}

.login-button-container {
    position: absolute;
    bottom: 15%; /* Move slightly lower for a distant perspective */
    left: 50%;
    transform: translateX(-50%) scale(0.9); /* Scale up the button slightly */
    z-index: 2; /* Ensure the button stays above the particles */
}

    .login-button-container .btn {
        border: 2px solid darkblue;
        background-color: white;
        color: black;
        font-weight: bold;
        transition: all 0.3s ease;
        padding: 10px 18px; /* Slightly increase padding for a larger button */
        font-size: 1rem; /* Slightly increase font size */
        border-radius: 22px; /* Adjust border radius for a slightly larger button */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    }

        .login-button-container .btn:hover {
            background-color: darkblue;
            color: white;
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
        }

.particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Ensure particles are behind other elements */
    pointer-events: none; /* Prevent particles from blocking interactions */
}