.main__wrapper {
    background: var(--bg-color-primary);
    backdrop-filter: blur(15px);
    position: sticky;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 4rem;
    padding-bottom: 2rem;
    box-shadow: rgba(0, 0, 0, .08) 0px -2px 8px;
    border: 1px solid var(--border-color-05);
}

.hero {
    background-image: -o-linear-gradient(bottom, var(--bg-color-primary) 22%, var(--bg-viol) 100%),-o-radial-gradient(0% 50%, 75% 75%, var(--bg-cyan) 0%, #ffffff00 83%),-o-radial-gradient(100% 50%, 75% 75%, var(--bg-yellow) 0%, #FFFFFF00 99%);
    background-image: linear-gradient(0deg, var(--bg-color-primary) 22%, var(--bg-viol) 100%),radial-gradient(75% 75% at 0% 50%, var(--bg-cyan) 0%, #ffffff00 83%),radial-gradient(75% 75% at 100% 50%, var(--bg-yellow) 0%, #FFFFFF00 99%);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-attachment: fixed;
    
}

.hero.full-screen {
    min-height: 100vh;
}

.area{
    background: var(--bg-color-primary);
    position: fixed;
    width: 100%;
    min-height: 95vh;
    z-index: -1;
    
   
}
.hero .hero__area {
    position: fixed;
    background: none;
    z-index: 0;

    
    min-height: 100vh
}

.circles .area__svg {
    position: absolute;
    display: block;
    list-style: none;


    animation: animate 15s linear infinite;
    bottom: -19vw;

}

@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;

        
    }

    100%{
        transform: translateY(calc(-100vh - 19vw)) rotate(720deg);
        opacity: 0;

        
    }

}

.area__svg {
    fill: var(--border-color-20);
    width: 19vw;
    max-width: 7rem;
    transition: fill .15s linear;
}

.special .area__svg {
    fill: var(--accent-color-40);
}

.special.colored .area__svg {
    fill: var(--tg-color-60);
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 2.5vw;
    height: 2.5vw;
    max-width: 20px;
    max-height: 20px;
    background: var(--border-color-20);
    animation: animate 10s linear infinite;
    bottom: -150px;
    border-radius: 1rem;
    
}

.special .circles li {
    background: var(--accent-color-40);
}

.special.colored .circles li {
    background: var(--tg-color-60)
}
.circles .c-1 {
    left: 25%;

    animation-delay: 3s;
    animation-duration: 8s;
}
.circles .c-2 {
    left: 80%;

    animation-delay: 0s;
    animation-duration: 6s;
}
.circles .c-3 {
    left: 55%;

    animation-delay: 2s;
    animation-duration: 7s;
}
.circles .c-4 {
    left: 95%;

    animation-delay: 4.5s;
    animation-duration: 5s;
}
.circles .c-5 {
    left: 5%;

    animation-delay: .5s;
    animation-duration: 9s;
}
.circles .c-6 {
    left: 17%;

    animation-delay: 3s;
    animation-duration: 7s;
}
.circles .c-7 {
    left: 40%;

    animation-delay: 6s;
    animation-duration: 7s;
}
.circles .c-8 {
    left: 70%;

    animation-delay: 3.5s;
    animation-duration: 5.5s;
}
.circles .c-9 {
    left: 60%;

    animation-delay: 5.5s;
    animation-duration: 7.5s;
}
.circles .c-10 {
    left: 7%;

    animation-delay: 7s;
    animation-duration: 8s;
}
.area__svg:nth-child(1) {
    left: 5%;

    animation-delay: 0s;
    
}

.area__svg:nth-child(2) {
    left: 20%;

    animation-delay: 6s;
    
}

.area__svg:nth-child(3) {
    left: 36%;

    animation-delay: 3s;
    
}

.area__svg:nth-child(4) {
    left: 55%;

    animation-delay: 8s;
    
}

.area__svg:nth-child(5) {
    left: 65%;

    animation-delay: 1.5s;
    
}

.area__svg:nth-child(6) {
    left: 85%;

    animation-delay: 4.5s;
    
}
.area__svg:nth-child(7) {
    left: 10%;

    animation-delay: 10s;
    
}
.area__svg:nth-child(8) {
    left: 87%;

    animation-delay: 12.5s;
    
}
.area__svg:nth-child(9) {
    left: 42%;

    animation-delay: 13.5s;
    
}

@media (min-width: 1000px) {

        .hero:not(.full-screen) .area {
            min-height: 60% !important;
        }
    }