:root {
    --background: #faf3ff;
    --primary: #ff8c00;
    --primary-hover: #d37707;
    --header: #000000;
    --text: #000;
    --text-50: #7a7a7a;
    --layer1: #fff;
    --layer2: #f8f8f8;
    --border1: #e0e0e0;
    --border2: #d0d0d0;
    --layer-transparent: #ffffff09;
}

[data-bs-theme=dark] {
    --background: #0e0a07;
    --header: #f7f3ff;
    --text: #b5b1be;
    --text-50: #8c8992;
    --layer1: #141312;
    --layer2: #201e1b;
    --border1: #221f1d;
    --border2: #2c2926;
}

.pop-up-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000099;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    visibility: hidden;

    l-helix {
        color: var(--primary);
        font-size: calc(2rem + 4vw);
    }

    &.show {
        visibility: visible;
    }
}