@keyframes spin {
            0% { transform: rotate(0deg); filter: blur(1px);}
            100% { transform: rotate(360deg); filter: blur(1px);}
        }

        @keyframes flash {
           0%, 100% { opacity: 0; filter: blur(6px); }
            5% { opacity: 1; filter: blur(6px); }
            10% { opacity: 1; filter: blur(6px); }
        }

        @keyframes moveSpark {
            0% { transform: rotate(0deg) translateY(-26px); opacity: 1; }
            100% { transform: rotate(360deg) translateY(-26px); opacity: 0; }
        }

        .loader {
            width: 50px;
            height: 50px;
            border: 1px solid rgba(255, 255, 255, 0.0);
            border-top: 3px solid #fff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            position: relative;
        }

        .spark {
            position: absolute;
            width: 20px;
            height:20px;
            background-color: #fff;
            box-shadow: 0 0 20px #fff;
            border-radius: 50%;
            animation: moveSpark 1s linear infinite, flash 0.1s linear infinite;
            top: 30%;
            left: 30%;
            transform-origin: center;
        }
.loader_strony {
    height: 100vh;
    width: 100%;
    background-color: black;
    z-index: 1;
    position: absolute;
    opacity: 1;
    transition: opacity 1s ease-out;
    top: 50%; /* Ustawiamy element na 50% wysokości ekranu */
    left: 50%; /* Ustawiamy element na 50% szerokości ekranu */
    transform: translate(-50%, -50%); 
}
        .spin_loader {
            
            
            z-index: 1;
            background-color: black;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .loader-container {
            position: relative;
        }
.hidden {
    opacity: 0;
}
.display_none {
    display: none;
}