:root
{
    /*--tw-bg-opacity: 1;
    --chakra: rgb(17 24 39 / var(--tw-bg-opacity));*/

    --chakra: #1A202C;
    --chakra-body-bg: var(--chakra);
    --color-bg-hsl: 232,11%,15%;
    --color-bg: hsl(var(--color-bg-hsl));
    --inner-content-max-width: 1600px;
}

/* loader */
.loader {
    position: relative;
}
.loader::after,
    .loader::before {
        content: '';
    width: 96px;
    height: 96px;
    border: 3px solid #FFF;
    position: fixed;
    box-sizing: border-box;
    animation: rotation 1.5s ease-in-out infinite;

    top: 10%; 
    left: 4%; 
    color: white; 
    text-align: center;
    z-index: 99999;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .loader::after,
    .loader::before {
        top: 15%; 
        left: 40%; 
    }
}

.loader::after {
    border-color: #ecb306;
    animation-delay: .5s;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}