body {
    display: flex;
    /* Usando flexbox no body */
    justify-content: center;
    /* Centraliza horizontalmente */
    align-items: center;
    /* Centraliza verticalmente */
    height: 100vh;
    /* Faz com que o body ocupe toda a altura da tela */
    margin: 0;
    /* Remove a margem padrão */
    background-color: #212121;
    /* Cor de fundo fixa */
}

.loader {
    --dim: 3rem;
    width: var(--dim);
    height: var(--dim);
    position: relative;
    animation: spin988 2s linear infinite;
}

.loader .circle {
    --dim: 1.2rem;
    width: var(--dim);
    height: var(--dim);
    border-radius: 50%;
    position: absolute;
}

/* Loader para tema claro */
.loader .circle:nth-child(1) {
    background-color: #28A745;
    /* Verde */
    top: 0;
    left: 0;
}

.loader .circle:nth-child(2) {
    background-color: #000;
    /* Preto */
    top: 0;
    right: 0;
}

.loader .circle:nth-child(3) {
    background-color: #000;
    /* Preto */
    bottom: 0;
    left: 0;
}

.loader .circle:nth-child(4) {
    background-color: #000;
    /* Preto */
    bottom: 0;
    right: 0;
}

/* Adicionando estilos para tema escuro com base na preferência do sistema */
@media (prefers-color-scheme: dark) {

    .loader .circle:nth-child(2),
    .loader .circle:nth-child(3),
    .loader .circle:nth-child(4) {
        background-color: #FFF;
        /* Branco para o tema escuro */
    }
}

@keyframes spin988 {
    0% {
        transform: scale(1) rotate(0);
    }

    20%,
    25% {
        transform: scale(1.3) rotate(90deg);
    }

    45%,
    50% {
        transform: scale(1) rotate(180deg);
    }

    70%,
    75% {
        transform: scale(1.3) rotate(270deg);
    }

    95%,
    100% {
        transform: scale(1) rotate(360deg);
    }
}