.splash-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    background-color: #f8fafc;
}

.splash-loader {
    width: 40px;
    height: 40px;
    position: relative;
}

.splash-loader > div {
    width: 45%;
    height: 45%;
    display: inline-block;
    position: absolute;
    background-color: #6366f1;
    animation: splash-cubemove 1.8s infinite ease-in-out;
}

.splash-cube1 { top: 0; left: 0; }
.splash-cube2 { top: 0; right: 0; animation-delay: -0.9s; }
.splash-cube3 { bottom: 0; right: 0; animation-delay: -1.8s; }
.splash-cube4 { bottom: 0; left: 0; animation-delay: -2.7s; }

@keyframes splash-cubemove {
    25%  { transform: translateX(100%) rotate(-90deg) scale(0.5); }
    50%  { transform: translateX(100%) translateY(100%) rotate(-180deg); }
    75%  { transform: translateX(0) translateY(100%) rotate(-270deg) scale(0.5); }
    100% { transform: rotate(-360deg); }
}