@import"https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght@400;500;600;700;800&family=Cabin+Sketch&family=Kanit:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400&display=swap";
@keyframes moveBanner{
    from{
        opacity:0;
        transform:translateY(5rem) rotateY(-30deg)
    }
    to{
        transform:translateY(0);opacity:1
    }
}
@keyframes moveBanner-2{
    from{
        opacity:0;transform:translateX(-10rem)}
        to{
            transform:translateX(0);opacity:.8
        }
    }
@keyframes imageOpacity{
    from{
        opacity:0;transform:scale(0)
    }
    to{
        transform:scale(1);opacity:1
    }
}
@keyframes slideDown{
    from{
        opacity:0;max-height:0
    }
to{
    opacity:1;max-height:500px
}
}

.js .js-scroll-toUp,.js .js-scroll-toRight,.js .js-scroll-toLeft,.js .js-scroll-opacity{
    opacity:0;
    transition:all .8s ease-in-out
}
.js .js-scroll-toUp{
    transform:translate3d(0, 5rem, 0) rotateY(-30deg)
}
.js .js-scroll-toUp.active{
    transform:translate3d(0, 0, 0);
    opacity:1
}
.js .js-scroll-toRight{
    transform:translate3d(-5rem, 0, 0)
}
.js .js-scroll-toRight.active{
    opacity:1;
    transform:translate3d(0, 0, 0)
}
.js .js-scroll-toLeft{
    transform:translate3d(5rem, 0, 0)
}
.js .js-scroll-toLeft.active{
    opacity:1;
    transform:translate3d(0, 0, 0)
}
.js .js-scroll-opacity.active{
    transition-delay:.2s;
    opacity:1
}

.about{
    width:100%;
    background:#0b0a17;
    padding:40px 20px 100px 20px
}
.about .about-container{
    max-width:1200px;
    margin:0 auto
}
.about .about-container h1{
    color:#fafafa;
    text-align:center;
    margin-bottom:40px;
    position:relative;
    font-size:2.5em;font-weight:600
}
.about .about-container h1::before{
    content:"";
    position:absolute;
    bottom:0;width:48px;
    height:3px;background:#4829a6
}
.about .about-container p{
    color:#ccc;
    text-align:center;
    font-size:1.25em;
    margin-bottom:80px
}
.about .about-container p::before,.about .about-container p::after{
    content:"*";
    color:#4829a6
}
.about .about-container .about-content{
    max-width:740px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    flex-direction:row-reverse
}
.about .about-container .about-content .dl-about{
    width:420px
}
.about .about-container .about-content .dl-about .text{
    color:#ccc;
    margin-bottom:40px
}
.about .about-container .about-content .dl-about .text:last-child{
    margin-bottom:0
}
.about .about-container .about-content .dl-about dt{
    margin-top:-10px;
    margin-bottom:5px;
    font-size:1.25em;
    font-weight:600
}
.about .about-container .about-content .dl-about dt i{
    font-size:1em;
    margin-right:.5em;
    cursor:pointer;
    transition:all .3s ease-in-out
}
.about .about-container .about-content .dl-about dt.active i{
    transform:rotateZ(90deg)
}
.about .about-container .about-content .dl-about dd{
    font-size:1.125em;
    font-weight:300;
    margin-left:1.1em;
    display:none;
    animation:slideDown 1s forwards
}
.about .about-container .about-content .dl-about dd.active{
    display:block
}
.about .about-container .about-content .dl-about dd a{
    font-weight:600;color:#4829a6
}
.about .about-container .about-content .dl-about dd a:hover{
    text-decoration:underline
}
.about .about-container .about-content .img img{
    width:200px;
    height:200px;
    border:1px solid #4829a6;
    border-radius:50%;
    padding:8px
}


@media screen and (max-width: 768px){
        .about .about-container p{
            display:none
        }
.about .about-container .about-content{
    flex-direction:column-reverse;
    align-items:center}
.about .about-container .about-content .dl-about{
    max-width:100%;text-align:center
}
.about .about-container .about-content .dl-about dd{
    margin-left:0
}
.about .about-container .about-content .img{
    margin-bottom:40px
}
}

@media screen and (max-width: 390px){
    .about .about-container .about-content .dl-about dt{
        font-size:1.125em
    }
    .about .about-container .about-content .dl-about dd{
        font-size:1em
    }
    .about .about-container .about-content .img img{
        width:170px;height:170px
    }
}



    .skills{
        width:100%;background:#080713;padding:40px 20px 100px 20px
    }
    .skills .skills-container{
        max-width:1200px;margin:0 auto
    }
    .skills .skills-container h1{
        font-size:2.5em;
        font-weight:600;
        color:#fafafa;
        text-align:center;
        margin-bottom:40px;
        position:relative
    }
    .skills .skills-container h1::before{
        content:"";
        position:absolute;
        bottom:0;
        width:48px;
        height:3px;
        background:#4829a6
    }
    .skills .skills-container p{
        color:#ccc;
        text-align:center;
        margin-bottom:80px;
        font-size:1.25em
    }
.skills .skills-container .skills-content .cards-container{
        max-width:500px;
        margin:0 auto;
        display:flex;
        justify-content:center;
        flex-wrap:wrap;gap:40px
}
.skills .skills-container .skills-content .cards-container .card{
        width:140px;
        height:140px;
        background:#0e0d1e;
        display:flex;
        justify-content:center;
        align-items:center;
        flex-direction:column;
        border:1px solid rgba(0,0,0,0);
        border-radius:2px;
        transition:all .5s ease-in-out;
        position:relative
}

.skills .skills-container .skills-content .cards-container .card:hover{
    transform:scale(1.1);
    border:1px solid #4829a6
}
.skills .skills-container .skills-content .cards-container .card i{
    font-size:70px;color:#4829a6
}
.skills .skills-container .skills-content .cards-container .html:hover:before,
.skills .skills-container .skills-content .cards-container .css:hover:before,
.skills .skills-container .skills-content .cards-container .js:hover:before,
.skills .skills-container .skills-content .cards-container .sass:hover:before,
.skills .skills-container .skills-content .cards-container .linux:hover:before,
.skills .skills-container .skills-content .cards-container .git:hover:before,

.skills .skills-container .skills-content .cards-container .windows:hover:before,
.skills .skills-container .skills-content .cards-container .apple:hover:before,
.skills .skills-container .skills-content .cards-container .lang-java:hover:before,
.skills .skills-container .skills-content .cards-container .android:hover:before,
.skills .skills-container .skills-content .cards-container .googleplay:hover:before,
.skills .skills-container .skills-content .cards-container .github:hover:before,
.skills .skills-container .skills-content .cards-container .unity:hover:before,
.skills .skills-container .skills-content .cards-container .lang-c:hover:before,
.skills .skills-container .skills-content .cards-container .lang-c-pp:hover:before,
.skills .skills-container .skills-content .cards-container .lang-c-sharp:hover:before,
.skills .skills-container .skills-content .cards-container .lang-php:hover:before
{
    position:absolute;
    color:#fafafa;
    background:#0e0d1e;
    width:140px;
    height:30px;
    text-align:center;
    line-height:30px;
    border-radius:2px
}
.skills .skills-container .skills-content .cards-container .html::after,
.skills .skills-container .skills-content .cards-container .css::after,
.skills .skills-container .skills-content .cards-container .js::after,
.skills .skills-container .skills-content .cards-container .sass::after,
.skills .skills-container .skills-content .cards-container .linux::after,
.skills .skills-container .skills-content .cards-container .git::after,
/*Adicionei*/
.skills .skills-container .skills-content .cards-container .windows::after,
.skills .skills-container .skills-content .cards-container .apple::after,
.skills .skills-container .skills-content .cards-container .lang-java::after,
.skills .skills-container .skills-content .cards-container .android::after,
.skills .skills-container .skills-content .cards-container .googleplay::after,
.skills .skills-container .skills-content .cards-container .github::after,
.skills .skills-container .skills-content .cards-container .unity::after,
.skills .skills-container .skills-content .cards-container .lang-c::after,
.skills .skills-container .skills-content .cards-container .lang-c-pp::after,
.skills .skills-container .skills-content .cards-container .lang-c-sharp::after,
.skills .skills-container .skills-content .cards-container .lang-php::after
{
    position:absolute;
    bottom:0;
    font-weight:600;
    background:#0b0a17;
    width:100%;
    text-align:center;
    padding:2px 0
}
.skills .skills-container .skills-content .cards-container .html:hover::before,
.skills .skills-container .skills-content .cards-container .css:hover::before,
.skills .skills-container .skills-content .cards-container .js:hover::before
{
    top:-40px
}
.skills .skills-container .skills-content .cards-container .sass:hover::before,
.skills .skills-container .skills-content .cards-container .linux:hover::before,
.skills .skills-container .skills-content .cards-container .git:hover::before,
/*Adicionei*/
.skills .skills-container .skills-content .cards-container .windows:hover::before,
.skills .skills-container .skills-content .cards-container .apple:hover:before,
.skills .skills-container .skills-content .cards-container .lang-java:hover:before,
.skills .skills-container .skills-content .cards-container .android:hover:before,
.skills .skills-container .skills-content .cards-container .googleplay:hover:before,
.skills .skills-container .skills-content .cards-container .github:hover:before,
.skills .skills-container .skills-content .cards-container .unity:hover:before,
.skills .skills-container .skills-content .cards-container .lang-c:hover:before,
.skills .skills-container .skills-content .cards-container .lang-c-pp:hover:before,
.skills .skills-container .skills-content .cards-container .lang-c-sharp:hover:before,
.skills .skills-container .skills-content .cards-container .lang-php:hover:before
{
    bottom:-40px
}
.skills .skills-container .skills-content .cards-container .html:hover::before{
     content:"HTML"
}
.skills .skills-container .skills-content .cards-container .html::after{
    content:"HTML"
}
.skills .skills-container .skills-content .cards-container .css:hover::before{
    content:"CSS"
}
.skills .skills-container .skills-content .cards-container .css::after{
    content:"CSS"
}
.skills .skills-container .skills-content .cards-container .js:hover::before{
    content:"JavaScript"
}
.skills .skills-container .skills-content .cards-container .js::after{
    content:"JavaScript"
}
.skills .skills-container .skills-content .cards-container .sass:hover::before{
    content:"Sass"
}
.skills .skills-container .skills-content .cards-container .sass::after{
    content:"Sass"
}
.skills .skills-container .skills-content .cards-container .linux:hover::before{
    content:"Linux"
}
.skills .skills-container .skills-content .cards-container .linux::after{
    content:"Linux"
}
.skills .skills-container .skills-content .cards-container .git:hover::before{
   content:"Git"
}
.skills .skills-container .skills-content .cards-container .git::after{
    content:"Git"
}

/*Adicionei*/
.skills .skills-container .skills-content .cards-container .windows:hover::before{
    content:"Windows"
 }
 .skills .skills-container .skills-content .cards-container .windows::after{
     content:"Windows"
 }
 .skills .skills-container .skills-content .cards-container .apple:hover::before{
    content:"Apple"
 }
 .skills .skills-container .skills-content .cards-container .apple::after{
     content:"Apple"
 }
 .skills .skills-container .skills-content .cards-container .lang-java:hover::before{
    content:"Java"
 }
 .skills .skills-container .skills-content .cards-container .lang-java::after{
     content:"Java"
 }

 .skills .skills-container .skills-content .cards-container .android:hover::before{
    content:"Android"
 }
 .skills .skills-container .skills-content .cards-container .android::after{
     content:"Android"
 }
 .skills .skills-container .skills-content .cards-container .googleplay:hover::before{
    content:"Google Play"
 }
 .skills .skills-container .skills-content .cards-container .googleplay::after{
     content:"Google Play"
 }
 .skills .skills-container .skills-content .cards-container .github:hover::before{
    content:"GitHub"
 }
 .skills .skills-container .skills-content .cards-container .github::after{
     content:"GitHub"
 }
 .skills .skills-container .skills-content .cards-container .unity:hover::before{
    content:"Unity"
 }
 .skills .skills-container .skills-content .cards-container .unity::after{
     content:"Unity"
 }
 .skills .skills-container .skills-content .cards-container .lang-c:hover::before{
    content:"C"
 }
 .skills .skills-container .skills-content .cards-container .lang-c::after{
     content:"C"
 }
 .skills .skills-container .skills-content .cards-container .lang-c-pp:hover::before{
    content:"C++"
 }
 .skills .skills-container .skills-content .cards-container .lang-c-pp::after{
     content:"C++"
 }
 .skills .skills-container .skills-content .cards-container .lang-c-sharp:hover::before{
    content:"C#"
 }
 .skills .skills-container .skills-content .cards-container .lang-c-sharp::after{
     content:"C#"
 }
 .skills .skills-container .skills-content .cards-container .lang-php:hover::before{
    content:"PHP"
 }
 .skills .skills-container .skills-content .cards-container .lang-php::after{
     content:"PHP"
 }







/*Desativa o display com os nomes dos itens*/
.skills .skills-container .skills-content .cards-container .html::after,
.skills .skills-container .skills-content .cards-container .css::after,
.skills .skills-container .skills-content .cards-container .js::after,
.skills .skills-container .skills-content .cards-container .sass::after,
.skills .skills-container .skills-content .cards-container .linux::after,
.skills .skills-container .skills-content .cards-container .git::after,
/*Adicionei*/
.skills .skills-container .skills-content .cards-container .windows::after,
.skills .skills-container .skills-content .cards-container .apple::after,
.skills .skills-container .skills-content .cards-container .lang-java::after,
.skills .skills-container .skills-content .cards-container .android::after,
.skills .skills-container .skills-content .cards-container .googleplay::after,
.skills .skills-container .skills-content .cards-container .github::after,
.skills .skills-container .skills-content .cards-container .unity::after,
.skills .skills-container .skills-content .cards-container .lang-c::after,
.skills .skills-container .skills-content .cards-container .lang-c-pp::after,
.skills .skills-container .skills-content .cards-container .lang-c-sharp::after,
.skills .skills-container .skills-content .cards-container .lang-php::after
{
    display:none
}

@media screen and (max-width: 768px){
    .skills .skills-container .skills-content .cards-container .card{
                    padding-bottom:24px
                }
                .skills .skills-container .skills-content .cards-container .html:hover::before,
                .skills .skills-container .skills-content .cards-container .css:hover::before,
                .skills .skills-container .skills-content .cards-container .js:hover::before,
                .skills .skills-container .skills-content .cards-container .sass:hover::before,
                .skills .skills-container .skills-content .cards-container .linux:hover::before,
                .skills .skills-container .skills-content .cards-container .git:hover::before,
                /*Adicionei*/
                .skills .skills-container .skills-content .cards-container .windows:hover::before,
                .skills .skills-container .skills-content .cards-container .apple:hover:before,
.skills .skills-container .skills-content .cards-container .lang-java:hover:before,
.skills .skills-container .skills-content .cards-container .android:hover:before,
.skills .skills-container .skills-content .cards-container .googleplay:hover:before,
.skills .skills-container .skills-content .cards-container .github:hover:before,
.skills .skills-container .skills-content .cards-container .unity:hover:before,
.skills .skills-container .skills-content .cards-container .lang-c:hover:before,
.skills .skills-container .skills-content .cards-container .lang-c-pp:hover:before,
.skills .skills-container .skills-content .cards-container .lang-c-sharp:hover:before,
.skills .skills-container .skills-content .cards-container .lang-php:hover:before
                {
                    display:none
                }
                .skills .skills-container .skills-content .cards-container .html::after,
                .skills .skills-container .skills-content .cards-container .css::after,
                .skills .skills-container .skills-content .cards-container .js::after,
                .skills .skills-container .skills-content .cards-container .sass::after,
                .skills .skills-container .skills-content .cards-container .linux::after,
                .skills .skills-container .skills-content .cards-container .git::after,
                /*Adicionei*/
                .skills .skills-container .skills-content .cards-container .windows::after,
                .skills .skills-container .skills-content .cards-container .apple::after,
.skills .skills-container .skills-content .cards-container .lang-java::after,
.skills .skills-container .skills-content .cards-container .android::after,
.skills .skills-container .skills-content .cards-container .googleplay::after,
.skills .skills-container .skills-content .cards-container .github::after,
.skills .skills-container .skills-content .cards-container .unity::after,
.skills .skills-container .skills-content .cards-container .lang-c::after,
.skills .skills-container .skills-content .cards-container .lang-c-pp::after,
.skills .skills-container .skills-content .cards-container .lang-c-sharp::after,
.skills .skills-container .skills-content .cards-container .lang-php::after
                {
                    display:block;
                    color:#ccc
                }
}

                .projects{
                    width:100%;
                    background:#0b0a17;
                    padding:40px 20px 140px 20px;
                    overflow-x:hidden
                }
                .projects .projects-container{
                max-width:1200px;
                margin:0 auto
            }
                .projects .projects-container h1{
                    font-size:2.5em;
                    font-weight:600;
                    color:#fafafa;
                    margin-bottom:80px;
                    text-align:center;
                    position:relative
                }
                .projects .projects-container h1::before{
                    content:"";
                    position:absolute;
                    bottom:0;
                    width:48px;
                    height:3px;
                    background:#4829a6
                }
                .projects .projects-container .cards-container{
                    display:flex;
                    justify-content:center;
                    align-items:center;
                    flex-wrap:wrap;gap:40px
                }
                .projects .projects-container .cards-container .card{
                    width:300px;
                    height:200px;
                    text-align:center;
                    line-height:200px;
                    background:#0e0d1e;
                    border-radius:2px;
                    border:1px solid rgba(0,0,0,0);
                    transition:all .5s ease-in-out
                }
                .projects .projects-container .cards-container .card:hover{
                    border:1px solid #4829a6;
                    transform:scale(1.1)
                }
                .projects .projects-container .cards-container .card:hover p{
                    opacity:1
                }
                .projects .projects-container .cards-container .card p{
                    font-style:italic;
                    font-size:1.5em;
                    color:#fafafa;
                    opacity:.8;
                    transition:all .5s ease-in-out
                }

                .contact{
                    width:100%;
                    background:#080713;
                    padding:40px 20px 100px 20px;
                    overflow-x:hidden
                }
                .contact .contact-container{
                    max-width:1200px;margin:0 auto
                }
                .contact .contact-container h1{
                    font-size:2.5em;
                    font-weight:600;
                    color:#fafafa;
                    margin-bottom:40px;
                    position:relative
                }
                .contact .contact-container h1::before{
                    content:"";
                    position:absolute;
                    bottom:0;
                    width:48px;
                    height:3px;
                    background:#4829a6
                }
                .contact .contact-container .contact-content{
                    display:flex;
                    justify-content:space-between
                }
                .contact .contact-container .contact-content .networks{
                    margin-top:80px
                }
                .contact .contact-container .contact-content .networks .ul-networks{
                    list-style:none;
                    border-radius:2px
                }
                .contact .contact-container .contact-content .networks .ul-networks li a{
                    color:#fafafa;
                    display:block;
                    padding:15px 20px;
                    text-align:center;
                    border-radius:2px;
                    font-size:1.125em;
                    transition:all .3s ease-in-out;
                    opacity:.8
                }
                .contact .contact-container .contact-content .networks .ul-networks li a:hover{
                    opacity:1;
                    background:#4829a6
                }
                .contact .contact-container .contact-content .form{
                    width:500px}
                .contact .contact-container .contact-content .form .spacer-input{
                    margin-bottom:1em
                    }
                .contact .contact-container .contact-content .form .spacer-input label{
                    display:block;
                    margin-bottom:.125em;
                    font-size:1.125em;
                    color:#ccc
                }
                .contact .contact-container .contact-content .form .spacer-input label::after{
                    content:" *";
                    color:#4829a6
                }
                .contact .contact-container .contact-content .form .spacer-input input,.contact .contact-container .contact-content .form .spacer-input textarea{
                    background:#0e0d1e;
                    color:#ccc;
                    font-size:1em;
                    border:none;
                    outline:none;
                    border-radius:2px;
                    width:100%;
                    padding:.8em;
                    border:1px solid rgba(0,0,0,0)
                }
                .contact .contact-container .contact-content .form .spacer-input input:focus,
                .contact .contact-container .contact-content .form .spacer-input textarea:focus{
                    border:1px solid #4829a6
                }
                .contact .contact-container .contact-content .form .spacer-input textarea{
                    resize:vertical;
                    height:180px
                }
                .contact .contact-container .contact-content .form button{
                    width:150px;
                    height:50px;
                    border-radius:2px;
                    border:none;
                    outline:none;
                    color:#fafafa;
                    background:#4829a6;
                    background:-moz-linear-gradient(to right, #4829a6, #251554);
                    background:-webkit-linear-gradient(to right, #4829a6, #251554);
                    background:linear-gradient(to right, #4829a6, #251554);
                    cursor:pointer;
                    transition:all .5s ease-in-out;
                    font-size:1.125em;
                    font-weight:600}
                .contact .contact-container .contact-content .form button:hover{
                    width:180px
                }
                    @media screen and (max-width: 768px){
                    .contact .contact-container h1{
                        text-align:center
                    }
                    .contact .contact-container .contact-content{
                        flex-direction:column;
                        align-items:center;gap:80px
                    }
                    .contact .contact-container .contact-content .networks{
                        margin-top:0
                    }
                    .contact .contact-container .contact-content .networks .ul-networks{
                        display:flex;flex-direction:row
                    }
                    .contact .contact-container .contact-content .form{
                        width:100%;margin:0 auto
                    }
                    .contact .contact-container .contact-content .form button{
                        width:100%;transition:all .3s ease-in-out
                    }
                    .contact .contact-container .contact-content .form button:hover{
                        width:100%;
                        box-shadow:0 0 10px #4829a6
                    }
                    }
                    .thanks{
                        width:100%;height:100vh;
                        background:#080713;
                        padding:80px 20px}
                    .thanks .thanks-container{
                        max-width:1200px;
                        height:100%;
                        margin:0 auto;
                        display:flex;
                        flex-direction:column;
                        align-items:center;
                        justify-content:center
                    }
                    .thanks .thanks-container .img{
                        margin-bottom:20px
                    }
                    .thanks .thanks-container .img img{
                        width:200px;
                        height:200px;
                        border:1px solid #4829a6;
                        border-radius:50%;
                        padding:8px;opacity:0;
                        animation:moveBanner-2 1.5s .2s forwards
                    }
                    .thanks .thanks-container h1{
                        color:#4829a6;
                        line-height:1;
                        opacity:0;
                        animation:moveBanner 1.5s .4s forwards;
                        font-size:2.5em;
                        font-weight:600
                    }
                    .thanks .thanks-container h2{
                        color:#ccc;
                        margin-bottom:40px;
                        opacity:0;
                        animation:moveBanner 1.5s .6s forwards;
                        font-size:2em;
                        font-weight:600
                    }
                    .thanks .thanks-container h2::after{
                        content:" :)";color:#4829a6
                    }
                    .thanks .thanks-container a{
                        display:block;
                        color:#fafafa;
                        background:#4829a6;
                        padding:10px 20px;
                        text-align:center;
                        border-radius:2px;
                        font-size:1.125em;
                        transition:all .5s ease-in-out;
                        opacity:0;
                        animation:moveBanner 1.5s .8s forwards
                    }
                    .thanks .thanks-container a:hover{
                        transform:scaleX(1.1);box-shadow:0 0 10px #4829a6
                    }
                    .thanks .thanks-container a::before{
                        content:"🡨";
                        margin-right:15px
                    }
                    @media screen and (max-width: 536px){
                        .thanks .thanks-container .img img{
                            transform:scale(0.8)
                        }
                        .thanks .thanks-container h1,.thanks .thanks-container h2{
                            text-align:center
                        }
                        .thanks .thanks-container h1{
                            font-size:2em
                        }
                        .thanks .thanks-container h2{
                            font-size:1.5em
                        }
                    }
                        @media screen and (max-height: 430px){
                            .thanks{
                                height:100%
                            }
                        }
                            *{
                                margin:0;
                                padding:0;
                                box-sizing:border-box;
                                -moz-box-sizing:border-box;
                                -webkit-box-sizing:border-box;
                                font-family:"Kanit",Arial,Helvetica,sans-serif
                            }
                            a{
                                text-decoration:none
                            }
                            body{
                                background:#fafafa;
                                font-size:1em;
                                -webkit-font-smoothing:antialiased
                            }
                            body::-webkit-scrollbar{
                                width:8px;background:#0b0a1a
                            }
                            body::-webkit-scrollbar-thumb{
                                background:#4829a6;
                                background:-moz-linear-gradient(to bottom, #4829a6, #251554);
                                background:-webkit-linear-gradient(to bottom, #4829a6, #251554);
                                background:linear-gradient(to bottom, #4829a6, #251554);
                                border-radius:5px
                            }
                                .header{
                                    width:100%;
                                    height:80px;
                                    position:fixed;
                                    top:0;
                                    padding:0 20px;
                                    background:#0b0a1a;
                                    border-bottom:1px solid rgba(114,114,126,.2);
                                    z-index:1
                                }
                                    .header .header-container{
                                    max-width:1200px;
                                    margin:0 auto;
                                    height:100%;
                                    display:flex;
                                    justify-content:space-between;
                                    align-items:center
                                }
                                .header .header-container .logo a{
                                    color:#fafafa;
                                    font-size:1.5em;
                                    font-family:"Cabin Sketch",Arial,Helvetica,sans-serif;
                                    font-weight:bold
                                }
                                .header .header-container .logo a::before{
                                    content:"<";
                                    color:#4829a6
                                }
                                .header .header-container .logo a::after{
                                    content:"/>";
                                    color:#4829a6
                                }
                                .header .header-container #btn-menu-mobile{display:none
                                }
                                .header .header-container .ul-menu{
                                    display:flex;gap:40px;list-style:none
                                }
                                    .header .header-container .ul-menu li:first-child a{
                                        background:#4829a6;
                                        opacity:1;
                                        padding:4px 10px;
                                        border-radius:2px
                                    }
                                        .header .header-container .ul-menu li:first-child a::after{
                                            display:none
                                        }
                                        .header .header-container .ul-menu a{
                                            font-size:1.125em;
                                            color:#fafafa;opacity:.8;
                                            transition:all .3s ease-in-out;
                                            position:relative
                                        }

                                        .header .header-container .ul-menu a::after{
                                            content:"";
                                            width:0%;
                                            height:2px;
                                            background:#4829a6;
                                            position:absolute;
                                            left:0;bottom:0;
                                            transition:all .3s ease-in-out
                                        }
                                        .header .header-container .ul-menu a:hover{
                                            opacity:1
                                        }
                                        .header .header-container .ul-menu a:hover::after{
                                            width:100%
                                        }
                                        @media screen and (max-width: 768px){
                                            .header{
                                                position:absolute
                                            }
                                            .header .header-container .ul-menu{
                                                display:block;
                                                position:absolute;
                                                top:80px;right:0;
                                                width:100%;
                                                height:0;
                                                text-align:center;
                                                background:#0b0a1a;
                                                z-index:1000;
                                                transition:all .5s ease-in-out;
                                                visibility:hidden;
                                                overflow-y:hidden}
                                                .header .header-container .ul-menu li:first-child a{
                                                    background:none;
                                                    opacity:.8;
                                                    width:100%;
                                                    padding:1.25em;
                                                    border:0;
                                                    border-radius:0;
                                                    box-shadow:none
                                                }
                                                .header .header-container .ul-menu li:first-child a:hover{
                                                    background:none;
                                                    background:-moz-linear-gradient(160deg, transparent, #100e26, transparent);
                                                    background:-webkit-linear-gradient(160deg, transparent, #100e26, transparent);
                                                    background:linear-gradient(160deg, transparent, #100e26, transparent);
                                                    opacity:1
                                                }
                                                .header .header-container .ul-menu li:first-child a::after{
                                                    display:block
                                                }
                                                .header .menu-navigation.active .ul-menu{
                                                    visibility:visible;
                                                    height:calc(100vh - 80px);
                                                    overflow-y:auto
                                                }
                                                .header .header-container .menu-navigation a{
                                                    display:block;
                                                    padding:1.25em
                                                }
                                                .header .header-container .menu-navigation a:hover{
                                                    opacity:1;
                                                    background:#100e26;
                                                    background:-moz-linear-gradient(160deg, transparent, #100e26, transparent);
                                                    background:-webkit-linear-gradient(160deg, transparent, #100e26, transparent);
                                                    background:linear-gradient(160deg, transparent, #100e26, transparent)
                                                }
                                                .header .header-container .menu-navigation a::after{
                                                    transition:all .5s linear
                                                }
                                                .header .menu-navigation #btn-menu-mobile{
                                                    display:flex;
                                                    justify-content:center;
                                                    align-items:center;
                                                    cursor:pointer;
                                                    width:45px;
                                                    height:45px;
                                                    border:0;
                                                    border-radius:50%;
                                                    background:#4829a6
                                                }
                                                .header .menu-navigation #btn-menu-mobile #menu-hamburguer{
                                                    color:#fafafa;
                                                    border-top:3px solid;
                                                    width:25px
                                                }
                                                .header .menu-navigation #btn-menu-mobile #menu-hamburguer::before,.header .menu-navigation #btn-menu-mobile #menu-hamburguer::after{
                                                    content:"";
                                                    display:block;
                                                    width:25px;
                                                    height:3px;
                                                    background:currentColor;
                                                    margin-top:6px;
                                                    transition:all .5s;
                                                    position:relative
                                                }
                                                    .header .menu-navigation.active #btn-menu-mobile #menu-hamburguer{
                                                        border-top-color:rgba(0,0,0,0)
                                                    }
                                                .header .menu-navigation.active #btn-menu-mobile #menu-hamburguer::before{
                                                    transform:rotate(135deg)
                                                }
                                                .header .menu-navigation.active #btn-menu-mobile #menu-hamburguer::after{
                                                    transform:rotate(-135deg);top:-9px
                                                }
                                            }
                                                @media screen and (max-height: 376px){
                                                    .header{
                                                        height:60px
                                                    }
                                                    .header .header-container .ul-menu{
                                                        top:60px
                                                    }
                                                .header .menu-navigation.active .ul-menu{
                                                    height:calc(100vh - 60px)
                                                }
                                            }
                                                .main{
                                                    width:100%;
                                                    height:100vh;
                                                    display:flex;
                                                    align-items:center;
                                                    background:#080713;
                                                    background:-moz-linear-gradient(120deg, #080713, #100e26);
                                                    background:-webkit-linear-gradient(120deg, #080713, #100e26);
                                                    background:linear-gradient(120deg, #080713, #100e26);
                                                    padding:80px 20px 20px 20px
                                                }
                                                    .main .main-container{
                                                        width:1200px;
                                                        margin:0 auto;
                                                        display:flex;
                                                        justify-content:space-between;
                                                        align-items:center}
                                                    .main .main-container .sec-content{
                                                        display:flex;
                                                        align-items:center;
                                                        gap:40px
                                                    }
                                                    .main .main-container .sec-content .network-navigation ul{
                                                        list-style:none
                                                    }
                                                    .main .main-container .sec-content .network-navigation ul li:first-child a{
                                                        animation:moveBanner-2 1s .2s forwards
                                                    }
                                                    .main .main-container .sec-content .network-navigation ul li:last-child a{
                                                        animation:moveBanner-2 1s .6s forwards
                                                    }
                                                    .main .main-container .sec-content .network-navigation ul li a{
                                                        color:#fafafa;
                                                        display:block;
                                                        padding:15px 20px;text-align:center;
                                                        border-radius:2px;
                                                        font-size:1.125em;
                                                        opacity:0;
                                                        transition:all .3s ease-in-out;
                                                        animation:moveBanner-2 1s .4s forwards
                                                    }
                                                    .main .main-container .sec-content .network-navigation ul li a:hover{
                                                        opacity:1 !important;
                                                        background:#4829a6
                                                    }
                                                    .main .main-container .sec-content .content{max-width:400px}
                                                    .main .main-container .sec-content .content h1{
                                                        color:#fafafa;
                                                        animation:moveBanner 1s .2s forwards;
                                                        opacity:0;font-size:3em;
                                                        font-weight:600
                                                    }
                                                    .main .main-container .sec-content .content h1::after{
                                                        content:"👋";
                                                        font-size:.92em
                                                    }
                                                    .main .main-container .sec-content .content strong{
                                                        color:#ccc;display:block;
                                                        margin-bottom:15px;opacity:0;
                                                        animation:moveBanner 1s .4s forwards;
                                                        font-size:1.25em;font-weight:600
                                                    }
                                                    .main .main-container .sec-content .content p{
                                                        max-width:380px;color:#ccc;
                                                        font-size:1.125em;font-weight:300;
                                                        opacity:0;animation:moveBanner 1s .6s forwards
                                                    }
.main .main-container .sec-content .content a{
    display:block;
    max-width:150px;
    height:50px;
    text-align:center;
    line-height:50px;
    border-radius:2px;
    font-size:1.125em;
    color:#fafafa;
    background:#4829a6;
    background:-webkit-linear-gradient(to right, #4829a6, #251554);
    background:-moz-linear-gradient(to right, #4829a6, #251554);
    background:linear-gradient(to right, #4829a6, #251554);
    margin-top:40px;transition:all .5s ease-in-out;opacity:0;
    animation:moveBanner 1s .8s forwards
}
.main .main-container .sec-content .content a:hover{
    max-width:180px
}
.main .main-container .sec-content .content a i{
    margin-left:10px
}
.main .main-container .isometric{
    background:none;
    background:-moz-linear-gradient(to top, #251554, transparent 50%);
    background:-webkit-linear-gradient(to top, #251554, transparent 50%);
    background:linear-gradient(to top, #251554, transparent 50%);
    border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
    opacity:0;
    animation:imageOpacity 1.5s .2s forwards
}
.main .main-container .isometric img{
    width:240px;padding:0 10px 20px 10px
}

@media screen and (max-width: 768px){
    .main .main-container .isometric,.network-navigation{
        display:none
    }
    .main .main-container .sec-content .content h1{
        font-size:2.5em
    }
}
    @media screen and (max-width: 390px){
        .main .main-container .sec-content .content{
            max-width:300px
        }
    .main .main-container .sec-content .content h1{
        font-size:1.85em
    }
    .main .main-container .sec-content .content strong,.main .main-container .sec-content .content p,.main .main-container .sec-content .content a{
        font-size:1em
    }
}
    @media screen and (max-height: 376px){
        .main{
            height:100%;
            padding:80px 20px
        }
    }
    @media screen and (max-width: 285px){
        .main .main-container .sec-content .content{
            max-width:220px
        }
        .main .main-container .sec-content .content h1::after{
            display:none
        }
    }

    /*Radapé*/
.footer{
    width:100%;
    /*height:120px;*/
    height:120px;
    background:#080713;
    padding:0 20px
}
.footer .footer-container{
    max-width:1200px;
    margin:0 auto;
    height:100%;
    border-top:1px solid rgba(114,114,126,.2);
    display:flex;
    justify-content:space-between;
    align-items:center
}
.footer .footer-container div p:first-child{
    text-decoration:line-through
}
.footer .footer-container p{
    font-size:1.125em;color:#ccc;line-height:1.3
}
.footer .footer-container p a{
    color:#fafafa;
    font-family:"Cabin Sketch",Arial,Helvetica,sans-serif;
    font-weight:bold
}

.footer .footer-container p a::before{
    content:"<";
    color:#4829a6
}
.footer .footer-container p a::after{
    content:"/>";
    color:#4829a6
}
    @media screen and (max-width: 768px){
        .footer{
            height:150px
        }
        .footer .footer-container{
            flex-direction:column;
            justify-content:center;
            gap:30px
        }
            .footer .footer-container div{
                text-align:center
            }
}/*# sourceMappingURL=styles.css.map */





/***/




/*.divFilho, .projects2, .skills, .aboutMe{*//*a class .skills vai formar uma bara de rolagem horinzontal no radapé*/
.projects2, .aboutMe{
    display: inline-block;
    margin: 50px;
}


.projects2{
    opacity: 1;
    background-color: #0e0d1e;
    width: 300px;
    padding: 10px;
    border-radius: 8px;

    font-style:italic;
    font-size:1.5em;
    color:#fafafa;
    
    opacity:.8;
    transition:all .5s ease-in-out
    
}

.projects2 > p{
    font-size: 18px;
    color:#fafafa;
}
.projects2 > a {
    font-size: 16px;
    color: black;
    /*background-color: white;*/
    background-image: linear-gradient(to right, #9340FF, #FF3C5F);
    border-radius: 8px;
    padding: 5px;
    float: left;
    margin-bottom: 10px;
}
.projects2 > a:hover{
   background-color: #101728;
   color: white;
   
    
}
button > a{
    text-decoration: none;
}
.reveal{
    margin-top: 5%;
    transform: translateY(144px);
    opacity: 0;
    transition: 2s all ease;
}
.reveal.active{
    transform: translateY(0);
    opacity: 1;
}



.aboutMe > img{
    border-radius: 300px;
    opacity: 0.8;
}
.aboutMe > h2{
    color: #daa000;
}
.aboutMe > a{
    margin: 10px;
    float: left;
    color: #daa000;
    text-decoration: none;
}
.aboutMe > a:hover{
    color: #FF3C5F;
    text-decoration: underline;
}


.myStory{
    min-width: 200px;
    max-width: 500px;
}
.myStory > p{
    text-align: justify;
    opacity: 0.6;
    font-size: 16px;
}
#line{
    margin-top: 30px;
    margin-bottom: 30px;
    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, transparent,#ff3c607a, transparent); 
}
#seta{
margin-bottom: 60px;
margin-right: 10px;
float: right;
background-color: #FF3C5F;
border-radius: 80px;
padding: 10px;
cursor: pointer;
}


footer{
background-color: #260E69;
/*padding: 5px;*/
padding: 0px;
text-align: center;
width: 100%;
/*position: fixed;*/
bottom: 0;

}
footer > a{
/*margin: 10px;*/
margin: 10px;
align-items: center;

}

button{
    background-image: linear-gradient(to right, #9340FF, #FF3C5F);
    padding: 10px;
    font-size: 15px;
    border-style: none;
    border-radius: 8px;
    
}
button > a{
    color: black;
    font-family: 'Spectral SC', serif;
}
button > a{
    text-decoration: none;
}

.projects3 {
    font-size:2.5em;
    font-weight:600;
    color:#fafafa;
    margin-bottom:80px;
    text-align:center;
    position:relative
}