/*--------------------------------------------------------------
# Standard
--------------------------------------------------------------*/

:root {
    /*Infinite*/
    --color-white: #ffffff;
    --shadow-light: 1px 1px 6px rgba(0, 0, 0, 0.25);
    --color-dark: #070710;
    --color-primary: #7064e9; /*112, 100, 233*/
    --color-primary-light: #35316f;
    --color-primary-alt: #35316f;
    --color-secondary: #410093;
    --color-tertiary: #F2CD25;
    --border-width: 2px;
    --radius: 10px;
    /*Main*/
    --clr: #f5f5f5; /*#f5f5f5;*/ /*#222327;*/
    --txt-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    --bg-clr: rgba(255, 255, 255, 0.2);
    --box-clr: rgba(0, 0, 0, 0.1);
    --brd-clr: rgba(255, 255, 255, 0.3);
    --act-bg-clr: rgba(255, 255, 255, 0.2); /*rgba(255, 255, 255, 0.3);*/
    --act-blur-clr-1: color-mix(in srgb, #7064e9 0%, #7064e9);
    --act-blur-clr-2: color-mix(in srgb, #7064e9 25%, #7064e9);
    --act-blur-clr-3: color-mix(in srgb, #7064e9 50%, #7064e9);
    --act-blur-clr-4: color-mix(in srgb, #7064e9 75%, #7064e9);
    --act-blur-clr-5: color-mix(in srgb, #7064e9 100%, #7064e9);
}

/*--------------------------------------------------------------
# Stars background
--------------------------------------------------------------*/
#stars {
/*    background-color: rgba(255, 1, 207, 0.3);
    background: radial-gradient(ellipse at center, rgba(112, 100, 233, 0.7) 0%, rgba(40, 11, 41, 0.85) 100%);*/
    opacity: 0.5;
    display: flex;
    position: absolute;
    width: 100%;
    height: 16rem;
    height: 100vh;
    z-index: 0;
}

/*--------------------------------------------------------------
# PreLoader
--------------------------------------------------------------*/
.preloader {
    background: var(--color-dark);
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 9999999;
    top: 0;
    left: 0;
}

@keyframes bgg {
    0% {
        background: var(--color-primary-light);
    }

    50% {
        background: var(--color-primary);
    }

    100% {
        background: var(--color-primary);
    }
}

.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 70px;
    height: 70px;
    margin: auto;
}

    .loader .circle {
        position: absolute;
        width: 50px;
        height: 50px;
        opacity: 0;
        transform: rotate(225deg);
        animation-iteration-count: infinite;
        animation-name: orbit;
        animation-duration: 5.5s;
        left: 3px;
        top: -5px;
    }

        .loader .circle:after {
            content: "";
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 100%;
            animation: bgg 1500ms ease-in alternate infinite;
        }

        .loader .circle:nth-child(2) {
            animation-delay: 240ms;
        }

        .loader .circle:nth-child(3) {
            animation-delay: 480ms;
        }

        .loader .circle:nth-child(4) {
            animation-delay: 720ms;
        }

        .loader .circle:nth-child(5) {
            animation-delay: 960ms;
        }

@keyframes orbit {
    0% {
        transform: rotate(225deg);
        opacity: 1;
        animation-timing-function: ease-out;
    }

    7% {
        transform: rotate(345deg);
        animation-timing-function: linear;
    }

    30% {
        transform: rotate(455deg);
        animation-timing-function: ease-in-out;
    }

    39% {
        transform: rotate(690deg);
        animation-timing-function: linear;
    }

    70% {
        transform: rotate(815deg);
        opacity: 1;
        animation-timing-function: ease-out;
    }

    75% {
        transform: rotate(945deg);
        animation-timing-function: ease-out;
    }

    76% {
        transform: rotate(945deg);
        opacity: 0;
    }

    100% {
        transform: rotate(945deg);
        opacity: 0;
    }
}

/*--------------------------------------------------------------
# Blob Assistant
--------------------------------------------------------------*/
.avatarVideoContent {
    width: 100%;
    height: 100%;
    background-color: transparent;
    align-content: center;
    transition: all 1.5s ease;
    padding: 2px;
}

.avatarVideoRound {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    margin: auto;
    transition: all 1.5s ease;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 2px;
}