:root {
    --loader-animation-duration: 4.5s;
    
    --color-primary: #3F51B5;
    --color-accent: var(--color-primary);
    --color-accent-light: #c5cae9;
    --color-accent-dark: #303f9f;

    --color-loader-primary: var(--color-accent);
    --color-loader-light: var(--color-accent-light);
    --color-loader-dark: var(--color-accent-dark);
}

#message {
    position: absolute;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
}

#loader {
    width: 42px;
    height: 42px;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#loader-primary {
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: var(--color-loader-primary);
    position: absolute;
    left: 0;
    top: 0;
    animation: loader-animation var(--loader-animation-duration) linear 0.375s infinite;
}

#loader-dark {
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: var(--color-loader-dark);
    position: absolute;
    right: 0;
    top: 0;
    animation: loader-animation-dark var(--loader-animation-duration) linear infinite;
}

#loader-light {
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: var(--color-loader-light);
    position: absolute;
    left: 0;
    bottom: 0;
    animation: loader-animation-light var(--loader-animation-duration) linear 0.75s infinite;
}

@keyframes loader-animation {
    0% {
        transform: translate(0px, 0px) rotateX(0deg) rotateY(0deg);
    }
    8.333% {
        transform: translate(22px, 0px) rotateX(0deg) rotateY(180deg);
    }
    25% {
        transform: translate(22px, 0px) rotateX(0deg) rotateY(180deg);
    }
    33.333% {
        transform: translate(22px, 22px) rotateX(-180deg) rotateY(180deg);
    }
    50% {
        transform: translate(22px, 22px) rotateX(-180deg) rotateY(180deg);
    }
    58.333% {
        transform: translate(0px, 22px) rotateX(-180deg) rotateY(0deg);
    }
    75% {
        transform: translate(0px, 22px) rotateX(-180deg) rotateY(0deg);
    }
    83.333% {
        transform: translate(0px, 0px) rotateX(0deg) rotateY(0deg);
    }
    100% {
        transform: translate(0px, 0px) rotateX(0deg) rotateY(0deg);
    }
}

@keyframes loader-animation-dark {
    0% {
        transform: translate(0px, 0px) rotateX(0deg) rotateY(0deg);
    }
    8.333% {
        transform: translate(0px, 22px) rotateX(-180deg) rotateY(0deg);
    }
    25% {
        transform: translate(0px, 22px) rotateX(-180deg) rotateY(0deg);
    }
    33.333% {
        transform: translate(-22px, 22px) rotateX(-180deg) rotateY(-180deg);
    }
    50% {
        transform: translate(-22px, 22px) rotateX(-180deg) rotateY(-180deg);
    }
    58.333% {
        transform: translate(-22px, 0px) rotateX(0deg) rotateY(-180deg);
    }
    75% {
        transform: translate(-22px, 0px) rotateX(0deg) rotateY(-180deg);
    }
    83.333% {
        transform: translate(0px, 0px) rotateX(0deg) rotateY(0deg);
    }
    100% {
        transform: translate(0px, 0px) rotateX(0deg) rotateY(0deg);
    }
}

@keyframes loader-animation-light {
    0% {
        transform: translate(0px, 0px) rotateX(0deg) rotateY(0deg);
    }
    8.333% {
        transform: translate(0px, -22px) rotateX(180deg) rotateY(0deg);
    }
    25% {
        transform: translate(0px, -22px) rotateX(180deg) rotateY(0deg);
    }
    33.333% {
        transform: translate(22px, -22px) rotateX(180deg) rotateY(180deg);
    }
    50% {
        transform: translate(22px, -22px) rotateX(180deg) rotateY(180deg);
    }
    58.333% {
        transform: translate(22px, 0px) rotateX(0deg) rotateY(180deg);
    }
    75% {
        transform: translate(22px, 0px) rotateX(0deg) rotateY(180deg);
    }
    83.333% {
        transform: translate(0px, 0px) rotateX(0deg) rotateY(0deg);
    }
    100% {
        transform: translate(0px, 0px) rotateX(0deg) rotateY(0deg);
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}