body {
    background-color: black;
    perspective: 800px;
}


.flex-center {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    gap: 2%;
}

.text {
    color: springgreen;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 140%;
}

.loader {
    border: 3px solid springgreen;
    background-color: transparent;
    padding: 5%;
    animation-name: animation;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 10px 0px springgreen;
}

@keyframes animation {
    0% {

    }
    25% {
        rotate: z 180deg;
        translate: 100% 0%;
        
        
    }
    50% {
        rotate: none;
        translate: 0;

    }
    75% {
        rotate: z -180deg;
        translate: -100% 0%;
    }
    100% {
        rotate: none;
        translate: 0;


        

        
    }
}

@keyframes animation2 {

}