*,
::before,
::after {
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}
/* CREATE ACCOUNT */
.create-account{position: relative;}
.create-account:before{content: ''; position: absolute;  width: 50%; height: 100vh; 
    background: url('../img/elements/circle-black.png') no-repeat 0 bottom,
    url('../img/elements/wave-white.png') no-repeat center 85%
    ; 
    background-color: #121929;
    right: 0; }
.create-account:after{content: ''; position: absolute;  width: 50%; height: 100vh; 
    background: url('../img/elements/circle-red-right.png') no-repeat right 80%, 
    url('../img/elements/dots-802.png') no-repeat right 0%,
    url('../img/elements/dots-802.png') no-repeat -80px 40%
    ; 
    left: 0; 
}

@media (max-width: 768px) {
    .create-account:before{display: none;}
    .create-account:after{ width: 100%; 
        background: url('../img/elements/circle-red-right.png') no-repeat right 160%, 
        url('../img/elements/dots-802.png') no-repeat 120% 0%, 
        url('../img/elements/dots-802.png') no-repeat -80px 15%;}
}


/* LANDING */
.section.main{ 
    background-image: url('../img/elements/bg-header.png');
    background-repeat: no-repeat ; 
    background-position: top center;
    background-size: cover;
}

.banner{ 
    background: url('../img/elements/dots-154.png') no-repeat 60% 15%,
    url('../img/elements/dots-144.png') no-repeat 25% 80%
    ;}

@media (max-width: 768px) {
    .main-mobile{ 
        background-image: url('../img/elements/scene-metabird-three.png');
        background-repeat: no-repeat ; 
        background-position: top center;
        background-size: cover;
    }
    .banner{ 
        background: 
        url('../img/elements/dots-154.png') no-repeat 120% 22%,
        url('../img/elements/dots-144.png') no-repeat 25% 50%;
    }
}

.movement{
    /* -webkit-filter: drop-shadow( 0px 0px 80px rgba(225, 24, 183, .8)); */
    /* filter: drop-shadow( 0px 0px 80px rgba(225, 24, 183, .8)); */
    animation: 
    /* transform 50s ease-in-out infinite both alternate, */
    movement 20s ease-in-out infinite both;
}
.banner img{
    animation: 
    /* transform 50s ease-in-out infinite both alternate, */
    float 5s ease-in-out infinite both;
}

.device-video{background: url('../img/elements/blur-blue.png') no-repeat 50% 50%}

.notebook{ background:  url('../img/elements/dots-154.png') no-repeat -1% 10%,
                        url('../img/elements/dots-154.png') no-repeat 100% 80%
                    }
                    
.bg-phone{background: url('../img/landing/mockup-phone3.png') ;}
.bg-device{ background: url('../img/landing/device-video.png') no-repeat calc(50% - -5px) center; }
.bg-notbook{ background: url('../img/landing/not.png') no-repeat -80px 0; };

@media (max-width: 768px) {
    .device-video:before{display: none;}
    .bg-device,
    .bg-notbook{ background: no-repeat;}
    .notebook{ background:  url('../img/elements/dots-154.png') no-repeat -1% -1%,
                            url('../img/elements/dots-154.png') no-repeat 100% 100%
                        }
    .banner{  background:   url('../img/elements/dots-154.png') no-repeat 140% 10%,
        url('../img/elements/dots-144.png') no-repeat 25% 80%
    ;}
    
    .section.main{ background:  url('../img/elements/dots-154.png') no-repeat -1% 13%,
                                url('../img/elements/circle-red-left.png') no-repeat 0% 40%
    ;}

    .float10{
        animation: float10 5s ease-in-out infinite both;
    }
    
}

@keyframes movement {
    0%,
    100% { transform: none; }
    50% { transform: rotate3d(2, 0, 1, 30deg); }
}

@keyframes float {
    0%,
    100% { transform: none; }
    50% { transform: translateY(3%) ; }
}
@keyframes float10 {
    0%,
    100% { transform: translateX(-60%); }
    50% { transform: translateY(10%) translateX(30%) ; }
}