@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}


body {
    font-family: sans-serif;
    transition: 2s ease;
}

.dark body {
    color: #ffffff;
}

/*------------HEADER------------*/
header {
    transition: 1s;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100px;
    padding: 0.1rem 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10000;
    animation: headerAnimation linear;
    animation-timeline: scroll();

    .logos {
        .logoBgBlack {
            opacity: 0;
            position: absolute;
            z-index: -1;

            transition: .5s;

            &:hover {
                cursor: pointer;
                transform: scale(1.1);
                filter: drop-shadow(-2px 1px 5px #ffffffbd);
            }
        }

        .logoBgWhite {
            transition: .5s;

            &:hover {
                cursor: pointer;
                transform: scale(1.1);

            }
        }
    }

    /*------------menu nav------------*/
    nav {
        /* width: 400px;
        height: 30px;
        display: flex;
        justify-content: space-between; */

        .menu-list {
            /* background-color: #244c2b; */
            display: flex;
            gap: 2rem;

            a {
                color: black;
                text-decoration: none;
                font-size: 23px;
                display: flex;
                flex-direction: column;
                align-items: center;

                .line {
                    width: 0%;
                    height: 2px;
                    background-color: #000000;
                    transition: .5s;
                }

                &:hover {
                    .line {
                        width: 100%;
                    }
                }

            }

            li {
                list-style: none;
            }
        }

    }

    #menu-btn {
        display: none;
    }

    /*------------menu nav------------*/

    .dark-btn {
        input[type="checkbox"] {
            display: none;
        }

        font-size: 35px;

        .icon-darkmode {
            transition: 0.5s;
            width: 40px;
            position: absolute;
            z-index: 20;

            &:hover {
                cursor: pointer;
                transform: scale(1.1);
            }

            &:active {
                transform: scale(1) rotateZ(360deg);
            }

        }

        .icon-lightmode {
            transition: 0.5s;
            opacity: 0;
            width: 45px;

            &:hover {
                filter: drop-shadow(1px 1px 5px #ffffff);
                cursor: pointer;
                transform: scale(1.1);
            }

            &:active {
                transform: scale(1) rotateZ(360deg);
            }
        }
    }
}

.dark header {
    color: #ffffff;
    animation: darkHeaderAnimation linear;
    animation-timeline: scroll();


    .logos {
        .logoBgBlack {
            opacity: 1;
            z-index: 2;
        }

        .logoBgWhite {
            opacity: 0;
        }
    }

    nav {
        a {
            color: white;


            .line {
                width: 0%;
                height: 2px;
                background-color: #ffffff;
                box-shadow: 1px 1px 20px #ffffff,
                    -2px 2px 40px #ffffffb3;
                transition: .5s;
            }

            &:hover {
                text-shadow: 1px 1px 20px #ffffff,
                    -2px 2px 40px #ffffffb3;

                .line {
                    width: 100%;
                }
            }

        }
    }

    .dark-btn {
        .icon-darkmode {
            display: none;
        }

        .icon-lightmode {
            opacity: 1;
        }
    }
}

/*header para dispositivos moveis*/
@media all and (max-width: 880px) {
    header {

        nav .menu-list {
            background-color: #244c2b;
            width: auto;
            height: auto;
            display: flex;
            justify-content: center;
            align-items: left;
            flex-direction: column;
            gap: 0;



            li {
                list-style: none;
                margin: 0;

                background-color: #ffffff;
                padding: 2rem;

                &:hover {
                    background-color: #a6a6a6;
                }
            }
        }

        #menu {
            display: none;
            position: absolute;
            z-index: 100;
            top: 100px;
            left: 0;
            background-color: #ffffff;
            width: 100%;
            height: 100vh;
        }

        #menu-btn {
            display: contents;
            font-size: 27px;
            order: 1;

            &:hover {
                cursor: pointer;

                p {
                    background-color: #a6a6a65d;
                    color: black;

                }
            }

            p {
                transition: .5s;
                font-weight: bold;
                font-size: 15px;
                background-color: black;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
            }
        }

        .logos {
            order: 2;
        }

        .dark-btn {
            order: 3;
        }
    }

    .dark header {
        .menu-list {
            background-color: #244c2b;
            width: auto;
            height: auto;
            display: flex;
            justify-content: center;
            align-items: left;
            flex-direction: column;
            gap: 0rem;

            a {
                /* color: black;
                text-decoration: none;
                font-size: 23px; */

                &:hover {
                    border-bottom: none;
                }

            }

            li {
                list-style: none;
                margin: 0;

                background-color: #141414;
                padding: 2rem;

                &:hover {
                    background-color: #040000;
                }
            }
        }

        #menu {
            display: none;
            position: absolute;
            z-index: 100;
            background-color: #141414;
            width: 100%;
            height: 100vh;
        }

        #menu-btn {
            p {
                border: solid 1px #ffffff;
            }
        }
    }
}

/*------------/HEADER------------*/



/*------------MAIN------------*/
main {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding-bottom: 8rem;


    .intro {
        margin-top: 3rem;
        width: 40%;
        padding: 1rem;
        display: grid;
        gap: 1rem;


        h1 {
            font-size: 40px;
            margin-bottom: 1rem;
        }

        p {
            font-size: 20px;
        }

        hr {
            width: 100%;
        }

        .icons {
            display: flex;
            flex-direction: row-reverse;
            justify-content: left;
            align-items: center;
            gap: 1rem;

            img {
                width: 90px;
                transition: 1s ease;

                &:hover {
                    transform: scale(1.05);
                    color: #a6a6a6;
                }

            }

            .linkedin {
                border: solid white 5px;
                border-radius: 10px;
            }

            .github {
                border: solid black 5px;
                border-radius: 10px;
            }
        }
    }

    .elements {
        animation: motionMain linear;
        animation-timeline: scroll();

        .spin {
            position: absolute;
            z-index: 10;
            right: 8%;
            width: 400px;

            animation: disc 15s linear infinite;
        }



        .perfil {
            position: absolute;
            z-index: 11;
            top: 23%;
            right: 12%;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            overflow: hidden;
            background-color: #00470d;

            img {
                width: 300px;
                transform: translate(0,0);

            }
        }
    }
}

@keyframes colorChange {
    from {
        box-shadow: 8px 8px 30px #68ff8e;
    }

    to {
        box-shadow: 8px 8px 30px green;
    }
}

.dark main {
    color: #ffffff;

    .intro .icons {
        font-size: 35px;

        i {
            color: #ffffff;
            transition: ease;

            &:hover {
                transform: scale(1.1);
                text-shadow: 1px 1px 20px #fffffff6,
                    -2px 2px 40px #ffffffb3
            }
        }
    }

    .elements {
        .spin {
            opacity: 30%;
        }

        .perfil {
            animation: colorChange alternate infinite 5s linear;
        }
    }
}

/*mainpara dispositivos moveis*/
@media all and (max-width: 880px) {
    main {
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;

        .intro {
            margin-top: 5rem;
            width: 80%;
            padding: 30px;
            display: grid;
            gap: 0rem;


            h1 {
                font-size: 40px;
                margin-bottom: 0.5rem;
            }

            p {
                font-size: 20px;
                margin-bottom: 1rem;
            }

            hr {
                width: 100%;
                margin-bottom: 1rem;
            }

            .icons {
                font-size: 35px;

                i {
                    color: #000000;
                    transition: ease;

                    &:hover {
                        transform: scale(1.1);
                        color: #a6a6a6;
                    }
                }
            }
        }

        .elements {

            overflow: hidden;

            .spin {
                position: static;
                right: 0%;
                width: 250px;
                animation: disc 15s linear infinite;
            }



            .perfil {
                position: absolute;
                top: 24%;
                right: 23%;
                width: 250px;
                height: 250px;
                border-radius: 50%;
                overflow: hidden;
                background-color: #00470d;

                img {
                    width: 300px;
                    transform: translate(-7%, -8%);
                }
            }
        }
    }
}

/*------------/MAIN------------*/



/*------------SOBRE-MIM------------*/
.sobre {
    display: flex;
    justify-content: right;
    align-items: center;
    background-color: #00470d;
    background-image: url(https://gradient.page/_next/image?url=%2Fcdn%2Fgreen-glory%2Fgreen-glory-003.jpg&w=1920&q=75);
    width: 100%;
    height: 400px;


    .stacked-carousel-container {
        width: 700px;
        height: 500px;
        margin: 0 auto;
        position: absolute;
        transform: translate(-500px, -40px);
        overflow: hidden;
        z-index: 1;

        .stacked-carousel {
            width: 100%;
            height: 100%;
            position: relative;

            .stacked-item {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) rotate(20deg);
                transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
                width: 350px;
                height: 350px;
                object-fit: cover;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
                border-radius: 8px;
                opacity: 0;

                .stacked-item:nth-child(1) {
                    z-index: 5;
                    opacity: 1;
                    transform: translate(-50%, -50%) rotate(0deg);
                }

                .stacked-item:nth-child(2) {
                    z-index: 4;
                    opacity: 0.8;
                    transform: translate(-60%, -50%) rotate(-10deg);
                }

                .stacked-item:nth-child(3) {
                    z-index: 3;
                    opacity: 0.6;
                    transform: translate(-70%, -50%) rotate(-20deg);
                }

                .stacked-item:nth-child(n+4) {
                    z-index: 2;
                    opacity: 0.4;
                    transform: translate(-80%, -50%) rotate(-30deg);
                }
            }
        }
    }

    .background-gradient {
        position: absolute;
        width: 100%;
        height: 500px;
        background: linear-gradient(to top, black, #ffffff00);
    }

    .text {
        color: #fff;
        width: 450px;
        height: auto;
        transform: translate(-130px);
        position: absolute;
        z-index: 1;

        h3 {
            margin: 1rem 0;
            font-size: 25px;
        }

        ul {
            display: grid;
            gap: 5px;
            list-style: none;

            li strong {
                color: #7eff96;
            }
        }

    }
}

/*sobre mim para dispositivos moveis*/
@media all and (max-width: 880px) {
    .sobre {
        display: flex;
        flex-direction: column;
        height: 1040px;

        .stacked-carousel-container {
            position: absolute;
            transform: translate(0px, -150px);
            width: 100%;
            height: 500px;
        }

        .text {
            position: absolute;
            transform: translate(0px, 340px);
            width: 80%;


            ul {
                text-align: left;
                font-size: 18px;
                width: 100%;
            }
        }

        .background-gradient {
            background-size: cover;
            background-position: center;
            height: 1040px;
            width: 100%;
        }
    }
}

/*------------/SOBRE-MIM------------*/



/*------------COMPETÊNCIAS------------*/
.competencias {
    color: white;
    height: auto;
    width: 100%;
    padding-bottom: 16rem;
    background-color: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: solid 13px #4d4d4d;

    /*-----titulo (competencias)-----*/
    h2 {
        margin: 3rem 0;
    }

    .carousel-container {
        width: 80%;
        /* background-color: #0c0c0c; */
        overflow: hidden;
        position: relative;
        display: flex;


        .sombra {
            width: 100px;
            transform: translate(-10px) rotateZ(90deg);
            position: relative;
            z-index: 20;
        }

        .sombra2 {
            width: 200px;
            transform: translate(923px) rotateZ(-90deg);
            position: absolute;
        }

        .carousel {
            display: flex;
            margin-left: 5rem;
            transform: translate(0px);
            animation: scroll-loop 105s linear infinite;

            .carousel-item {
                min-width: 100px;
                margin: 0 10px;
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                    width: 80px;
                    height: auto;
                }
            }
        }
    }


}

/*carrossel infinito*/
@keyframes scroll-loop {
    0% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(-9810.5px);
    }
}


/*competencias para dispositivos moveis*/
@media all and (max-width: 880px) {
    .competencias {
        height: auto;
        width: 100%;
        padding-bottom: 14rem;
        background-color: #000000;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-top: solid 10px #1d1d1d;
        border-bottom: solid 10px #4d4d4d;

        /*-----titulo (competencias)-----*/
        h2 {
            font-size: 30px;
            margin: 3rem 0;
        }

        .ferramentas {
            width: auto;

            display: grid;
            grid-template-columns: 120px 120px;
            justify-content: center;
            align-items: center;
            gap: 2rem;

            /* i:nth-child(4) {
                display: none;
            } */

            i {
                font-size: 120px;
                transition: .7s;

                &:hover {
                    transform: scale(0.7);
                }

            }

        }
    }
}

/*------------/COMPETÊNCIAS-----------*/


/*------------COISAS_Q_GOSTO-----------*/
.coisas_que_gosto {
    width: 80%;
    height: auto;

    background-image: url(https://gradient.page/_next/image?url=%2Fcdn%2Fgreen-glory%2Fgreen-glory-003.jpg&w=1920&q=75);
    background-size: cover;
    background-position: center;
    border-radius: 40px;
    background-position: 50;
    background-attachment: fixed;

    box-shadow: 5px 5px 35px #00000030;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;

    padding: 3rem 0;

    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);

    h2 {
        color: #ffffff;
    }

    section {
        display: flex;
        gap: 3rem;
        backdrop-filter: blur(5px);

        div {
            background-color: white;
            width: 250px;
            height: 270px;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            justify-content: first baseline;
            align-items: center;
            gap: 1rem;
            padding-top: 30px;
            box-shadow: 5px 5px 35px #00000030;

            hr {
                width: 30%;
                color: #000000;
                border: 2px solid;
            }

            p {
                width: 80%;
                text-align: center;
            }
        }
    }
}

/*coisas q gosto para dispositvos moveis*/
@media all and (max-width: 880px) {
    .coisas_que_gosto {
        width: 80%;
        height: auto;
        border-radius: 40px;

        box-shadow: 5px 5px 35px #00000030;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;

        padding: 3rem 0;

        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);

        h2 {
            color: #ffffff;
        }

        section {
            display: flex;

            gap: 0rem;

            div {
                transform: rotateZ(-5deg);
                background-color: white;
                width: 130px;
                height: 170px;
                border-radius: 20px;
                display: flex;
                flex-direction: column;
                justify-content: first baseline;
                align-items: center;
                gap: 1rem;
                padding-top: 30px;
                box-shadow: 5px 5px 35px #00000030;

                img {
                    width: 60px;
                }



                hr {
                    width: 30%;
                    color: #000000;
                    border: 2px solid;
                }

                p {
                    width: 80%;
                    font-size: 12px;
                    text-align: center;
                }
            }

            div:nth-child(1) {
                transform: rotateZ(-5deg) translate(10px, 15px);
            }

            div:nth-child(2) {
                transform: rotateZ(0deg);
            }

            div:nth-child(3) {
                transform: rotateZ(5deg) translate(-10px, 15px);
            }
        }
    }

}

/*------------/COISAS_Q_GOSTO-----------*/


/*------------SOFT-SKILLS------------*/
.softSkills {
    border-top: solid 10px #bcbcbc;
    border-bottom: solid 13px #d4d4d4;
    background-color: #cacaca;
    background-image: url(/images/background_gradient.png);
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 14rem;

    h2 {
        margin: 3rem 0;
    }

    ul {
        display: flex;
        gap: 4rem;
        font-size: 25px;
        list-style: none;
        margin-bottom: 3rem;

        li {
            color: #343434;
            transition: .5s;

            &:hover {
                cursor: default;
            }
        }
    }
}

.dark .softSkills {
    border-top: solid 10px #191919;
    border-bottom: solid 1px #151515;
    background-image: none;
    background-color: #000000;

    color: white;

    li {
        color: #cacaca;
    }
}

/*softskil para dispositivos moveis*/
@media all and (max-width: 880px) {

    .softSkills {
        padding-top: 12rem;
    }

    ul {
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 4rem;
        font-size: 25px;
        list-style: none;
        margin-bottom: 3rem;
    }
}

/*------------/SOFT-SKILLS------------*/



/*------------PORTIFOLIO------------*/
#portifolio {
    border-top: solid 8px #f0f0f0;
    height: auto;
    background-color: #fff;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 3rem;

    h2 {
        margin: 3rem 0;
    }

    /*--------------BOARD--------------*/

    .board {
        display: grid;
        grid-template-columns: 300px 300px 300px;
        gap: 3rem;
        margin-bottom: 3rem;

        .card {
            width: 300px;
            height: 250px;
            background-color: #ffffff;
            box-shadow: -2px 8px 30px #24242448;
            border-radius: 20px;
            display: grid;
            justify-content: center;
            padding: 10px;
            overflow: hidden;


            &:hover {
                .preview {
                    height: 185px;
                    margin-bottom: 0;

                    h3 {
                        transform: translateY(-125px);
                        background: linear-gradient(to bottom, #ffffff00, #ffffff);
                        padding: 12px;
                    }

                    img {
                        transform: scale(1.1);
                    }
                }

            }

            .preview {
                background-color: #757575;
                border-radius: 20px;
                width: 300px;
                height: 250px;
                margin-bottom: 30px;
                transition: 1s ease;
                overflow: hidden;

                img {
                    transition: 2s;
                }


                h3 {
                    font-size: 30px;
                    width: 300px;
                    transition: 1s;

                }


            }

            .btns {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 1rem;

                margin-top: 15px;



                .btn1 {

                    background-color: #181818;
                    color: #fff;
                    border-radius: 10px;
                    width: auto;
                    height: 40px;
                    padding: 10px;

                    &:hover {
                        color: #a1a1a1;
                        cursor: pointer;
                    }
                }

                .btn2 {
                    border: solid 1px #000000;
                    background-color: #ffffff;
                    border-radius: 10px;
                    width: auto;
                    height: 40px;
                    padding: 10px;

                    &:hover {
                        background-color: #181818;
                        color: #fff;
                        cursor: pointer;
                    }
                }

            }
        }
    }


    /*--------------/BOARD--------------*/

    button {
        padding: 15px;
        border-radius: 15px;
        border: none;

        &:hover {
            background-color: #181818;
            color: white;
            cursor: pointer;
        }

        &:active {
            span {
                margin-left: 3px;
            }
        }
    }
}


.dark #portifolio {
    border-top: solid 10px #111111;
    background-color: #00000000;
    color: #ffffff;

    .card {
        background-color: #000;
        box-shadow: -5px 5px 40px #34df001f,
            5px -5px 50px #0ea20939;

        &:hover {
            .preview {
                height: 185px;
                margin-bottom: 0;

                h3 {
                    transform: translateY(-125px);
                    background: linear-gradient(to bottom, #00000000, #000000);
                    padding: 12px;
                }

                img {
                    transform: scale(1.1);
                }
            }

        }


        .btns .btn1 {
            border: solid 1px #000000;
            background-color: #2e2e2e;
            color: #fff;
            border-radius: 10px;
            width: auto;
            height: 40px;
            padding: 10px;

            &:hover {
                color: #a1a1a1;
                cursor: pointer;
            }
        }

        .btns .btn2 {
            border: solid 1px #ffffff;
            background-color: #000000;
            color: #fff;
            border-radius: 10px;
            width: auto;
            height: 40px;
            padding: 10px;

            &:hover {
                background-color: #ffffff;
                color: #000000;
                cursor: pointer;
            }
        }
    }

    button {
        padding: 15px;
        border-radius: 15px;
        border: none;
        background-color: #181818;
        color: white;

        &:hover {
            color: #a8a8a8;
            cursor: pointer;
        }

        &:active {
            span {
                margin-left: 7px;
            }
        }
    }
}





/*portifolio para dispositivos moveis*/
@media all and (max-width: 880px) {
    #portifolio .board {
        display: flex;
        flex-direction: column;

        gap: 2rem;

        .card {
            height: 290px;

            .preview {
                height: 185px;
                margin-bottom: 0;

                h3 {
                    transform: translateY(-125px);
                    background: linear-gradient(to bottom, #ffffff00, #ffffff);
                    padding: 12px;
                }

                img {
                    transform: scale(1.1);
                }
            }
        }

    }

    #portifolio {
        button {
            padding: 20px;
            border-radius: 15px;
            border: none;
            font-size: 18px;
        }
    }
}

/*------------/PORTIFOLIO------------*/



/*--------------FOOTER--------------*/
footer {
    border: none;

    background-color: #000;
    color: aliceblue;

    width: 100%;

    /* margin-right: -5%; */

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 3rem;

    p {
        margin-top: 30px;
        color: #a6a6a6;
    }

    h2 {
        margin-bottom: 2rem;
    }

    h3 {
        padding: 2rem 0rem 1rem 0rem;
    }

    hr {
        width: 90%;
        margin-bottom: 30px;
    }

    .container {
        display: flex;
        justify-content: space-around;

        /*--------------links--------------*/
        a {
            text-decoration: none;
            color: aliceblue;

            &:hover {
                color: #a6a6a6;
            }
        }

        /*--------------/links--------------*/

        /*--------------LINKS_RAPIDOS--------------*/
        .linksRapidos {
            margin-right: 50px;

            nav {
                display: flex;
                flex-direction: column;
                gap: 1rem;
            }
        }

        /*--------------/LINKS_RAPIDOS--------------*/

        /*--------------CONTATO--------------*/
        .contato nav {
            display: flex;
            flex-direction: column;

            gap: 1rem;
        }

        /*--------------/CONTATO--------------*/

        /*--------------REDES_SOCIAIS--------------*/
        .redesSociais {
            margin-left: 50px;

            .icons2 {
                padding-top: 1rem;
                text-align: right;
                font-size: 2rem;

            }
        }

        /*--------------/REDES_SOCIAIS--------------*/
    }

    .logoFooter {
        margin-top: 3rem;
        width: 10%;
    }
}

/*footer para dispositivos moveis*/
@media all and (max-width: 880px) {
    footer {
        border: none;

        font-size: 18px;
        background-color: #000;
        color: aliceblue;

        width: 100%;

        /* margin-right: -5%; */

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 3rem;

        text-align: center;

        p {
            text-align: center;
            margin-top: 2rem;
            color: #a6a6a6;
            width: 80%;
        }

        h2 {
            margin-bottom: 2rem;
        }

        h3 {
            text-align: center;
            font-size: 15px;
            padding: 2rem 0;
            width: 80%;
        }

        hr {
            width: 90%;
            margin-bottom: 30px;
        }

        .container {
            display: flex;
            flex-direction: column;
            gap: 3rem;
            justify-content: center;
            font-size: 18px;

            nav {
                align-items: center;

                span {
                    text-align: center;
                }
            }

            /*--------------links--------------*/
            a {
                text-decoration: none;
                color: aliceblue;

                &:hover {
                    color: #a6a6a6;
                }
            }

            /*--------------/links--------------*/

            /*--------------LINKS_RAPIDOS--------------*/
            .linksRapidos {
                margin-right: 0px;

                nav {
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;
                }
            }

            /*--------------/LINKS_RAPIDOS--------------*/

            /*--------------CONTATO--------------*/
            .contato nav {
                display: flex;
                flex-direction: column;

                gap: 1rem;
            }

            /*--------------/CONTATO--------------*/

            /*--------------REDES_SOCIAIS--------------*/
            .redesSociais {
                margin-left: 0px;

                .icons2 {
                    padding-top: 1rem;
                    text-align: center;
                    font-size: 2rem;

                }
            }

            /*--------------/REDES_SOCIAIS--------------*/
        }

        .logoFooter {
            margin-top: 3rem;
            width: 10%;
        }
    }
}

/*--------------/FOOTER--------------*/






/*------------bibiliotéca de ANIMAÇÕES------------*/
@keyframes disc {
    to {
        transform: rotate(360deg)
    }
}



/*header*/
@keyframes headerAnimation {
    to {
        background-color: #ffffffd9;
        backdrop-filter: blur(10px);
    }
}

@keyframes darkHeaderAnimation {
    to {
        background-color: #1c1c1cc2;
        backdrop-filter: blur(10px);
    }
}

/*-----------------BACKGROUND-----------------*/
@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.background {
    position: fixed;
    z-index: -100;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: #ffffff;
    overflow: hidden;
}

.background span {
    width: 2vmin;
    height: 2vmin;
    border-radius: 2vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 27;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.background span:nth-child(0) {
    color: #244c2b;
    top: 63%;
    left: 28%;
    animation-duration: 169s;
    animation-delay: -199s;
    transform-origin: 9vw 8vh;
    box-shadow: -4vmin 0 1.218422858293371vmin currentColor;
}

.background span:nth-child(1) {
    color: #525252;
    top: 52%;
    left: 58%;
    animation-duration: 81s;
    animation-delay: -27s;
    transform-origin: -3vw -9vh;
    box-shadow: 4vmin 0 1.3249862119962639vmin currentColor;
}

.background span:nth-child(2) {
    color: #525252;
    top: 42%;
    left: 50%;
    animation-duration: 51s;
    animation-delay: -47s;
    transform-origin: 22vw 23vh;
    box-shadow: 4vmin 0 0.8578360393505975vmin currentColor;
}

.background span:nth-child(3) {
    color: #525252;
    top: 86%;
    left: 2%;
    animation-duration: 95s;
    animation-delay: -79s;
    transform-origin: -18vw -17vh;
    box-shadow: 4vmin 0 0.576048385899167vmin currentColor;
}

.background span:nth-child(4) {
    color: #525252;
    top: 29%;
    left: 51%;
    animation-duration: 141s;
    animation-delay: -153s;
    transform-origin: -9vw 16vh;
    box-shadow: -4vmin 0 0.5831142120238912vmin currentColor;
}

.background span:nth-child(5) {
    color: #244c2b;
    top: 86%;
    left: 93%;
    animation-duration: 233s;
    animation-delay: -32s;
    transform-origin: 19vw -4vh;
    box-shadow: 4vmin 0 1.4423470830777982vmin currentColor;
}

.background span:nth-child(6) {
    color: #a6a6a6;
    top: 85%;
    left: 79%;
    animation-duration: 205s;
    animation-delay: -170s;
    transform-origin: -2vw 18vh;
    box-shadow: -4vmin 0 1.499181429699516vmin currentColor;
}

.background span:nth-child(7) {
    color: #a6a6a6;
    top: 85%;
    left: 97%;
    animation-duration: 100s;
    animation-delay: -37s;
    transform-origin: -6vw 6vh;
    box-shadow: 4vmin 0 0.9964799547829628vmin currentColor;
}

.background span:nth-child(8) {
    color: #a6a6a6;
    top: 29%;
    left: 5%;
    animation-duration: 77s;
    animation-delay: -75s;
    transform-origin: -11vw -12vh;
    box-shadow: -4vmin 0 0.8684619823890254vmin currentColor;
}

.background span:nth-child(9) {
    color: #525252;
    top: 72%;
    left: 21%;
    animation-duration: 41s;
    animation-delay: -187s;
    transform-origin: 4vw 24vh;
    box-shadow: -4vmin 0 1.3730321802956735vmin currentColor;
}

.background span:nth-child(10) {
    color: #525252;
    top: 13%;
    left: 65%;
    animation-duration: 37s;
    animation-delay: -179s;
    transform-origin: 17vw -12vh;
    box-shadow: 4vmin 0 1.0406879660572426vmin currentColor;
}

.background span:nth-child(11) {
    color: #244c2b;
    top: 67%;
    left: 14%;
    animation-duration: 61s;
    animation-delay: -80s;
    transform-origin: 15vw -23vh;
    box-shadow: 4vmin 0 0.5822341269794451vmin currentColor;
}

.background span:nth-child(12) {
    color: #a6a6a6;
    top: 67%;
    left: 31%;
    animation-duration: 124s;
    animation-delay: -165s;
    transform-origin: 15vw -19vh;
    box-shadow: -4vmin 0 1.048767848400969vmin currentColor;
}

.background span:nth-child(13) {
    color: #244c2b;
    top: 78%;
    left: 7%;
    animation-duration: 216s;
    animation-delay: -228s;
    transform-origin: 9vw 8vh;
    box-shadow: 4vmin 0 0.6059414261422034vmin currentColor;
}

.background span:nth-child(14) {
    color: #244c2b;
    top: 66%;
    left: 72%;
    animation-duration: 183s;
    animation-delay: -212s;
    transform-origin: -14vw 6vh;
    box-shadow: -4vmin 0 1.4404851626274087vmin currentColor;
}

.background span:nth-child(15) {
    color: #a6a6a6;
    top: 23%;
    left: 88%;
    animation-duration: 218s;
    animation-delay: -201s;
    transform-origin: -8vw 18vh;
    box-shadow: 4vmin 0 1.382728270335501vmin currentColor;
}

.background span:nth-child(16) {
    color: #a6a6a6;
    top: 39%;
    left: 79%;
    animation-duration: 93s;
    animation-delay: -17s;
    transform-origin: -20vw -14vh;
    box-shadow: 4vmin 0 0.6731487529696902vmin currentColor;
}

.background span:nth-child(17) {
    color: #525252;
    top: 53%;
    left: 58%;
    animation-duration: 214s;
    animation-delay: -111s;
    transform-origin: 7vw -18vh;
    box-shadow: -4vmin 0 1.2275146509949242vmin currentColor;
}

.background span:nth-child(18) {
    color: #525252;
    top: 29%;
    left: 34%;
    animation-duration: 116s;
    animation-delay: -154s;
    transform-origin: -17vw -2vh;
    box-shadow: 4vmin 0 1.2610061865739977vmin currentColor;
}

.background span:nth-child(19) {
    color: #244c2b;
    top: 93%;
    left: 95%;
    animation-duration: 161s;
    animation-delay: -229s;
    transform-origin: -18vw 23vh;
    box-shadow: -4vmin 0 1.1843594890983267vmin currentColor;
}

.background span:nth-child(20) {
    color: #244c2b;
    top: 78%;
    left: 87%;
    animation-duration: 106s;
    animation-delay: -194s;
    transform-origin: -1vw -18vh;
    box-shadow: 4vmin 0 0.5646408156302487vmin currentColor;
}

.background span:nth-child(21) {
    color: #244c2b;
    top: 40%;
    left: 98%;
    animation-duration: 93s;
    animation-delay: -96s;
    transform-origin: -10vw 13vh;
    box-shadow: 4vmin 0 0.9058069669703432vmin currentColor;
}

.background span:nth-child(22) {
    color: #525252;
    top: 96%;
    left: 90%;
    animation-duration: 149s;
    animation-delay: -134s;
    transform-origin: 7vw -6vh;
    box-shadow: 4vmin 0 0.6623114146765412vmin currentColor;
}

.background span:nth-child(23) {
    color: #244c2b;
    top: 42%;
    left: 37%;
    animation-duration: 159s;
    animation-delay: -161s;
    transform-origin: 18vw -8vh;
    box-shadow: 4vmin 0 1.2757475746388418vmin currentColor;
}

.background span:nth-child(24) {
    color: #a6a6a6;
    top: 68%;
    left: 91%;
    animation-duration: 13s;
    animation-delay: -192s;
    transform-origin: 10vw -20vh;
    box-shadow: 4vmin 0 0.6910511880775121vmin currentColor;
}

.background span:nth-child(25) {
    color: #525252;
    top: 42%;
    left: 88%;
    animation-duration: 67s;
    animation-delay: -10s;
    transform-origin: 13vw -2vh;
    box-shadow: 4vmin 0 0.9785427788532288vmin currentColor;
}

.background span:nth-child(26) {
    color: #525252;
    top: 43%;
    left: 61%;
    animation-duration: 118s;
    animation-delay: -98s;
    transform-origin: 3vw -4vh;
    box-shadow: -4vmin 0 0.7375607319388879vmin currentColor;
}

.background span:nth-child(27) {
    color: #244c2b;
    top: 41%;
    left: 8%;
    animation-duration: 158s;
    animation-delay: -198s;
    transform-origin: -3vw 13vh;
    box-shadow: -4vmin 0 1.3541039276385929vmin currentColor;
}

.background span:nth-child(28) {
    color: #525252;
    top: 41%;
    left: 32%;
    animation-duration: 57s;
    animation-delay: -19s;
    transform-origin: -19vw -17vh;
    box-shadow: -4vmin 0 1.107002931238201vmin currentColor;
}

.background span:nth-child(29) {
    color: #525252;
    top: 98%;
    left: 51%;
    animation-duration: 11s;
    animation-delay: -91s;
    transform-origin: -7vw -19vh;
    box-shadow: 4vmin 0 0.601612134472767vmin currentColor;
}

.background span:nth-child(30) {
    color: #244c2b;
    top: 38%;
    left: 40%;
    animation-duration: 119s;
    animation-delay: -10s;
    transform-origin: 23vw 20vh;
    box-shadow: 4vmin 0 1.1291867129471183vmin currentColor;
}

.background span:nth-child(31) {
    color: #525252;
    top: 88%;
    left: 86%;
    animation-duration: 84s;
    animation-delay: -124s;
    transform-origin: 10vw 3vh;
    box-shadow: 4vmin 0 1.2760923986654737vmin currentColor;
}

.background span:nth-child(32) {
    color: #525252;
    top: 79%;
    left: 87%;
    animation-duration: 88s;
    animation-delay: -195s;
    transform-origin: 17vw 14vh;
    box-shadow: -4vmin 0 0.9684491615893975vmin currentColor;
}

.background span:nth-child(33) {
    color: #244c2b;
    top: 23%;
    left: 98%;
    animation-duration: 208s;
    animation-delay: -228s;
    transform-origin: 7vw 22vh;
    box-shadow: -4vmin 0 1.2525711721263972vmin currentColor;
}

.background span:nth-child(34) {
    color: #525252;
    top: 38%;
    left: 26%;
    animation-duration: 34s;
    animation-delay: -193s;
    transform-origin: 16vw 1vh;
    box-shadow: 4vmin 0 1.4564425623739614vmin currentColor;
}

.background span:nth-child(35) {
    color: #a6a6a6;
    top: 28%;
    left: 45%;
    animation-duration: 41s;
    animation-delay: -155s;
    transform-origin: 24vw 4vh;
    box-shadow: 4vmin 0 0.67311349729575vmin currentColor;
}

.background span:nth-child(36) {
    color: #244c2b;
    top: 79%;
    left: 58%;
    animation-duration: 169s;
    animation-delay: -191s;
    transform-origin: 5vw -9vh;
    box-shadow: -4vmin 0 0.9136926758464776vmin currentColor;
}

/*------------------------------------Dark_Mode--------------------------------------------*/

.dark .background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: #000000;
    overflow: hidden;

    z-index: -100;
}

.dark .background span {
    width: 2vmin;
    height: 2vmin;
    border-radius: 2vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 30;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.dark .background span:nth-child(0) {
    color: #1f1f1f;
    top: 82%;
    left: 60%;
    animation-duration: 115s;
    animation-delay: -40s;
    transform-origin: -19vw -21vh;
    box-shadow: -4vmin 0 0.5081465311128497vmin currentColor;
}

.dark .background span:nth-child(1) {
    color: #4d4d4d;
    top: 62%;
    left: 67%;
    animation-duration: 49s;
    animation-delay: -68s;
    transform-origin: -7vw 0vh;
    box-shadow: 4vmin 0 0.7645553840168238vmin currentColor;
}

.dark .background span:nth-child(2) {
    color: #1f1f1f;
    top: 48%;
    left: 74%;
    animation-duration: 26s;
    animation-delay: -21s;
    transform-origin: -3vw 4vh;
    box-shadow: -4vmin 0 1.124400781319734vmin currentColor;
}

.dark .background span:nth-child(3) {
    color: #00470d;
    top: 11%;
    left: 3%;
    animation-duration: 24s;
    animation-delay: -13s;
    transform-origin: 20vw 16vh;
    box-shadow: -4vmin 0 1.0875327162858046vmin currentColor;
}

.dark .background span:nth-child(4) {
    color: #00470d;
    top: 2%;
    left: 57%;
    animation-duration: 147s;
    animation-delay: -136s;
    transform-origin: -10vw 23vh;
    box-shadow: 4vmin 0 0.7211244732721034vmin currentColor;
}

.dark .background span:nth-child(5) {
    color: #4d4d4d;
    top: 67%;
    left: 58%;
    animation-duration: 103s;
    animation-delay: -132s;
    transform-origin: 13vw -15vh;
    box-shadow: 4vmin 0 1.2062951605230228vmin currentColor;
}

.dark .background span:nth-child(6) {
    color: #1f1f1f;
    top: 87%;
    left: 97%;
    animation-duration: 139s;
    animation-delay: -40s;
    transform-origin: 1vw 14vh;
    box-shadow: 4vmin 0 1.01363203161947vmin currentColor;
}

.dark .background span:nth-child(7) {
    color: #1f1f1f;
    top: 16%;
    left: 15%;
    animation-duration: 53s;
    animation-delay: -135s;
    transform-origin: -10vw 0vh;
    box-shadow: -4vmin 0 1.3889065773009244vmin currentColor;
}

.dark .background span:nth-child(8) {
    color: #1f1f1f;
    top: 16%;
    left: 90%;
    animation-duration: 78s;
    animation-delay: -190s;
    transform-origin: -21vw -7vh;
    box-shadow: 4vmin 0 0.8538376237215177vmin currentColor;
}

.dark .background span:nth-child(9) {
    color: #1f1f1f;
    top: 4%;
    left: 48%;
    animation-duration: 28s;
    animation-delay: -188s;
    transform-origin: -1vw -23vh;
    box-shadow: -4vmin 0 0.5669972156863348vmin currentColor;
}

.dark .background span:nth-child(10) {
    color: #00470d;
    top: 20%;
    left: 100%;
    animation-duration: 169s;
    animation-delay: -37s;
    transform-origin: 20vw -12vh;
    box-shadow: 4vmin 0 1.19920600548768vmin currentColor;
}

.dark .background span:nth-child(11) {
    color: #4d4d4d;
    top: 92%;
    left: 40%;
    animation-duration: 84s;
    animation-delay: -118s;
    transform-origin: -11vw -18vh;
    box-shadow: -4vmin 0 0.9453501808491049vmin currentColor;
}

.dark .background span:nth-child(12) {
    color: #1f1f1f;
    top: 49%;
    left: 53%;
    animation-duration: 66s;
    animation-delay: -38s;
    transform-origin: -11vw 21vh;
    box-shadow: 4vmin 0 0.7953072657346447vmin currentColor;
}

.dark .background span:nth-child(13) {
    color: #00470d;
    top: 94%;
    left: 32%;
    animation-duration: 150s;
    animation-delay: -58s;
    transform-origin: -13vw 14vh;
    box-shadow: 4vmin 0 1.1896378173138642vmin currentColor;
}

.dark .background span:nth-child(14) {
    color: #4d4d4d;
    top: 48%;
    left: 51%;
    animation-duration: 141s;
    animation-delay: -16s;
    transform-origin: -24vw 1vh;
    box-shadow: 4vmin 0 1.3558243945438386vmin currentColor;
}

.dark .background span:nth-child(15) {
    color: #4d4d4d;
    top: 69%;
    left: 20%;
    animation-duration: 171s;
    animation-delay: -22s;
    transform-origin: -5vw -8vh;
    box-shadow: -4vmin 0 1.3929658921585366vmin currentColor;
}

.dark .background span:nth-child(16) {
    color: #1f1f1f;
    top: 39%;
    left: 12%;
    animation-duration: 101s;
    animation-delay: -78s;
    transform-origin: -21vw 8vh;
    box-shadow: -4vmin 0 0.9175991776873902vmin currentColor;
}

.dark .background span:nth-child(17) {
    color: #1f1f1f;
    top: 92%;
    left: 69%;
    animation-duration: 28s;
    animation-delay: -56s;
    transform-origin: -5vw 15vh;
    box-shadow: 4vmin 0 0.5646118785921526vmin currentColor;
}

.dark .background span:nth-child(18) {
    color: #1f1f1f;
    top: 41%;
    left: 72%;
    animation-duration: 179s;
    animation-delay: -139s;
    transform-origin: 2vw -9vh;
    box-shadow: -4vmin 0 0.7279832305410578vmin currentColor;
}

.dark .background span:nth-child(19) {
    color: #1f1f1f;
    top: 38%;
    left: 99%;
    animation-duration: 95s;
    animation-delay: -82s;
    transform-origin: 16vw 2vh;
    box-shadow: 4vmin 0 0.7038008568953908vmin currentColor;
}

.dark .background span:nth-child(20) {
    color: #4d4d4d;
    top: 15%;
    left: 86%;
    animation-duration: 123s;
    animation-delay: -114s;
    transform-origin: 18vw -17vh;
    box-shadow: -4vmin 0 1.0821518198812456vmin currentColor;
}

.dark .background span:nth-child(21) {
    color: #1f1f1f;
    top: 71%;
    left: 74%;
    animation-duration: 68s;
    animation-delay: -168s;
    transform-origin: 18vw -21vh;
    box-shadow: 4vmin 0 1.3810527518268065vmin currentColor;
}

.dark .background span:nth-child(22) {
    color: #4d4d4d;
    top: 85%;
    left: 8%;
    animation-duration: 36s;
    animation-delay: -96s;
    transform-origin: 12vw -17vh;
    box-shadow: 4vmin 0 0.5324516969362159vmin currentColor;
}

.dark .background span:nth-child(23) {
    color: #4d4d4d;
    top: 66%;
    left: 48%;
    animation-duration: 63s;
    animation-delay: -194s;
    transform-origin: -13vw 16vh;
    box-shadow: 4vmin 0 0.9685357221830855vmin currentColor;
}

.dark .background span:nth-child(24) {
    color: #1f1f1f;
    top: 43%;
    left: 36%;
    animation-duration: 191s;
    animation-delay: -176s;
    transform-origin: 10vw -9vh;
    box-shadow: 4vmin 0 1.1675960227467899vmin currentColor;
}

.dark .background span:nth-child(25) {
    color: #1f1f1f;
    top: 35%;
    left: 18%;
    animation-duration: 121s;
    animation-delay: -178s;
    transform-origin: 11vw -10vh;
    box-shadow: 4vmin 0 1.2077422487782081vmin currentColor;
}

.dark .background span:nth-child(26) {
    color: #4d4d4d;
    top: 13%;
    left: 93%;
    animation-duration: 108s;
    animation-delay: -25s;
    transform-origin: 18vw -14vh;
    box-shadow: 4vmin 0 0.524725903771089vmin currentColor;
}

.dark .background span:nth-child(27) {
    color: #4d4d4d;
    top: 68%;
    left: 93%;
    animation-duration: 12s;
    animation-delay: -167s;
    transform-origin: 2vw 6vh;
    box-shadow: 4vmin 0 0.9784318698929317vmin currentColor;
}

.dark .background span:nth-child(28) {
    color: #1f1f1f;
    top: 92%;
    left: 10%;
    animation-duration: 143s;
    animation-delay: -157s;
    transform-origin: 13vw -2vh;
    box-shadow: 4vmin 0 1.0771124514174488vmin currentColor;
}

.dark .background span:nth-child(29) {
    color: #1f1f1f;
    top: 9%;
    left: 81%;
    animation-duration: 98s;
    animation-delay: -199s;
    transform-origin: 9vw 13vh;
    box-shadow: -4vmin 0 1.1167706205034198vmin currentColor;
}

.dark .background span:nth-child(30) {
    color: #1f1f1f;
    top: 82%;
    left: 89%;
    animation-duration: 120s;
    animation-delay: -141s;
    transform-origin: 21vw -17vh;
    box-shadow: -4vmin 0 1.2371286747306305vmin currentColor;
}

.dark .background span:nth-child(31) {
    color: #4d4d4d;
    top: 52%;
    left: 80%;
    animation-duration: 186s;
    animation-delay: -78s;
    transform-origin: 25vw -13vh;
    box-shadow: 4vmin 0 1.4767624400720418vmin currentColor;
}

.dark .background span:nth-child(32) {
    color: #00470d;
    top: 12%;
    left: 34%;
    animation-duration: 93s;
    animation-delay: -142s;
    transform-origin: 1vw 0vh;
    box-shadow: 4vmin 0 0.7481956218010157vmin currentColor;
}

.dark .background span:nth-child(33) {
    color: #4d4d4d;
    top: 87%;
    left: 25%;
    animation-duration: 165s;
    animation-delay: -199s;
    transform-origin: 13vw -17vh;
    box-shadow: 4vmin 0 1.3648091907284525vmin currentColor;
}

.dark .background span:nth-child(34) {
    color: #1f1f1f;
    top: 82%;
    left: 97%;
    animation-duration: 201s;
    animation-delay: -133s;
    transform-origin: -15vw 24vh;
    box-shadow: -4vmin 0 0.578360056796128vmin currentColor;
}

.dark .background span:nth-child(35) {
    color: #1f1f1f;
    top: 97%;
    left: 52%;
    animation-duration: 145s;
    animation-delay: -143s;
    transform-origin: -24vw -15vh;
    box-shadow: -4vmin 0 1.451132030930601vmin currentColor;
}

.dark .background span:nth-child(36) {
    color: #4d4d4d;
    top: 90%;
    left: 93%;
    animation-duration: 82s;
    animation-delay: -133s;
    transform-origin: -17vw -24vh;
    box-shadow: 4vmin 0 1.2604454490044121vmin currentColor;
}