body {
    background-color: #252525;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    transition: background-image 0.3s ease;
}
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.login-button {
    color: white;
    position: relative;
    font-family: "Segoe UI";
    cursor: pointer;
}

.logo-container {
    width: 500px;
    position: relative;
    animation: glowdarkmode 4s ease-in-out infinite;
    transform: translateX(3%);
}

.logo-container svg {
    width: 100%;
    height: auto;
    transition: filter 0.3s ease;
}

.logo-container path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 4s ease-in-out infinite;
    stroke-width: 3;
    transition: stroke 0.3s ease, fill 0.3s ease;
}

@keyframes draw {
    0% {
        stroke-dashoffset: 1000;
        fill-opacity: 0;
    }
    40% {
        stroke-dashoffset: 0;
        fill-opacity: 0;
    }
    45% {
        stroke-dashoffset: 0;
        fill-opacity: 1;
    }
    85% {
        stroke-dashoffset: 0;
        fill-opacity: 1;
    }
    100% {
        stroke-dashoffset: 1000;
        fill-opacity: 0;
    }
}

@keyframes glowdarkmode {
    0% {
        filter: drop-shadow(0 0 10px rgba(117, 251, 191, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(117, 251, 191, 0.6));
    }
    100% {
        filter: drop-shadow(0 0 10px rgba(117, 251, 191, 0.3));
    }
}

@keyframes glowlightmode {
    0% {
        filter: drop-shadow(0 0 10px rgba(37, 37, 37, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(37, 37, 37, 0.6));
    }
    100% {
        filter: drop-shadow(0 0 10px rgba(37, 37, 37, 0.3));
    }
}

/* You can remove the old loader class since we're replacing it with the new animation */
.loader {
    display: none;
}