@tailwind base;
@tailwind components;
@tailwind utilities;

/* 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:  url('../img/elements/dots-154.png') no-repeat -1% 10%,
                            url('../img/elements/circle-red-left.png') no-repeat 0% 40%
    ;}
.banner{ 
    background: url('../img/elements/dots-154.png') no-repeat 60% 15%,
    url('../img/elements/dots-144.png') no-repeat 25% 80%
    ;}
.banner svg{
    -webkit-filter: drop-shadow( 0px 0px 62px rgba(187, 53, 100, .2));
    filter: drop-shadow( 0px 0px 62px rgba(187, 53, 100, .2));
    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%}
.device-video:before{ content: ''; position: absolute; height: 262px; bottom: 220px; left: 0; width: 100%; 
    background: 
                url('../img/elements/dots-23-top.png') no-repeat 10% 50%,
                url('../img/elements/wave-white.png') no-repeat 90% 20%,
                linear-gradient(178deg, #E7407A 0%, #A42F59 72%);
            }   
.device-video:after{ content: ''; position: absolute; height: 222px; bottom: 0px; left: 0; width: 100%; background: #121929;}

.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; };

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

@keyframes float {
    0%,
    100% { transform: none; }
    50% { transform: translateY(3%) ; }
}

@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%
    ;}
}