* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    list-style: none;
    text-decoration: none;
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    background: linear-gradient(45deg, #000, #000075);
    color: #fff;
    transition: background 0.5s linear;
}

/* class toggle alterar tema javaScript */
body.dark {
    background: #000;
    color: aqua;
}

/* class toggle alterar tema javaScript */

.container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;

}

/* header com todo o conteudo */
header {
    width: 100%;
    height: 3rem;
    position: fixed;
    z-index: 9999;
    top: 0;
}

/* header com todo o conteudo */
/* class menu com todo o conteudo da nav-bar */
.menu {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding: 1.5rem 2rem;
    text-align: center;
}

/* class com logo nome portfólio */
.menu h2 {
    color: #ff0000;
    animation: portfolio 3s forwards;
    animation-delay: 3s;
    opacity: 0;
}

.menu h2 span {
    color: #00ffff;
}

@keyframes portfolio {
    0% {
        transform: translateX(200px);
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

/* class com logo nome portfólio */
/* class com items do menu*/
.menu .menuMobile {
    cursor: pointer;
    display: none;
}

.menu .menuMobile .bar {
    width: 28px;
    height: 2px;
    margin: 5px;
    border-bottom: 2px solid;
    transition: all 0.3s ease-in-out;
}

.menu.menuMobile #bar1 {
    transform: translateY(4px);
}

.menu.menuMobile #bar3 {
    transform: translateY(-4px);
}

.change.menuMobile #bar1 {
    transform: translateY(4px)rotateZ(45deg);
}

.change.menuMobile #bar3 {
    transform: translateY(-9px)rotateZ(-45deg);
}

.change.menuMobile #bar2 {
    opacity: 0;
}

.menu nav {
    display: flex;
    justify-content: end;
    align-items: center;
    width: 85%;
}

.menu nav ul {
    display: flex;
}

.menu .nav-list li {
    animation: menuAnimado 3s linear forwards;
    opacity: 0;
    animation-delay: var(--delay);
}

@keyframes menuAnimado {
    0% {
        transform: translateY(-200px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

.menu .nav-list li:nth-child(1) {
    --delay: 0ms;
    opacity: 0;
}

.menu .nav-list li:nth-child(2) {
    --delay: 200ms;
    opacity: 0;
}

.menu .nav-list li:nth-child(3) {
    --delay: 300ms;
    opacity: 0;
}

.menu .nav-list li:nth-child(4) {
    --delay: 400ms;
    opacity: 0;
}

.menu .nav-list li:nth-child(5) {
    --delay: 500ms;
    opacity: 0;
}

.menu nav ul li a {
    color: inherit;
    font-size: 1.2rem;
    padding: 0.5rem 0.7rem;
    border-radius: 5px;
    transition: 0.5s ease-in-out;
}

.menu nav ul li a:hover {
    color: #ff0000;
}

/* class com items do menu*/

/* btn alterar tema */
/* class checkbox */
.checkbox {
    display: none;
    position: absolute;
}

/* class checkbox */
/* class label do btn alterar*/
.label {
    background-color: #000;
    border-radius: 50px;
    padding: 5px;
    cursor: pointer;
    position: relative;
    width: 50px;
    height: 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #fff;
}

/* class label do btn alterar*/
/* class ball do btn alterar tema */
.label .ball {
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    transition: all 0.3s ease-in-out;
    position: absolute;
    top: 1px;
    left: 1px;
    width: 22px;
    height: 22px;
    transform: translateX(0);
    transition: all 0.3s ease-in-out;
}

/* class ball do btn alterar tema */
/* checkbox checked */
.checkbox:checked+.label .ball {
    transform: translateX(24px);
}

/* checkbox checked */
/* cores dos botoes sol e lua */
.bxs-sun {
    color: #ffff00;
}

.bxs-moon {
    color: #00ffff;
}

/* cores dos botoes sol e lua */
/* btn alterar tema */

/* elementos para carregar a página */
.preloader {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000000;
    backdrop-filter: blur(10px);
    z-index: 9999;
}

.preloader .load {
    /* background-color: #000075; */
    border-radius: 50%;
    /* border: 2px solid darkblue; */
    width: 18px;
    height: 18px;
    margin: 7px;
    animation: loading 2s forwards infinite;
    animation-delay: var(--delay);
    background-color: var(--color);
}

@keyframes loading {
    0% {
        transform: scale(1);
        opacity: 1;
        --color: darkblue;
        box-shadow: 0px 0px 4px #fff;

    }

    50% {
        transform: scale(1.2);
        opacity: 0;
        --color: darkblue;
        box-shadow: 0px 0px 10px #fff;

    }

    100% {
        transform: scale(1);
        opacity: 1;
        --color: darkblue;
        box-shadow: 0px 0px 10px #fff;
    }
}

.preloader .load:nth-child(1) {
    --delay: 0ms;
}

.preloader .load:nth-child(2) {
    --delay: 300ms;
}

.preloader .load:nth-child(3) {
    --delay: 600ms;
}

.preloader .load:nth-child(4) {
    --delay: 900ms;
}

/* elementos para carregar a página */

/* titulo e subtitulo */
.titulo-container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
}

.titulo-container .subTitulo {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 10px;
}

.titulo-container .subTitulo #typingText {
    color: red;
    font-size: 22px;
    width: 300px;
    font-weight: 500;
}

.mediaApss a {
    animation: slideApps 3s linear forwards;
    opacity: 0;
    display: flex;
    animation-delay: var(--delay);
}

@keyframes slideApps {
    0% {
        transform: scale(7) translateX(-400%) rotateZ(360deg);

    }

    100% {
        transform: scale(1) translateX(0%)rotateZ(0deg);
        opacity: 1;
    }
}

.mediaApss li:nth-child(1) {
    --delay: 1s;
}

.mediaApss li:nth-child(2) {
    --delay: 1.5s;
}

.mediaApss li:nth-child(3) {
    --delay: 2s;
}

.mediaApss li:nth-child(4) {
    --delay: 2.5s;
}

.bxl-github:hover {
    color: #084464;
    filter: drop-shadow(0px 0px 2px #084464);
}

.bxl-instagram:hover {
    color: #e4405f;
    filter: drop-shadow(0px 0px 2px #e4405f);
}

.bxl-linkedin:hover {
    color: #0077b5;
    filter: drop-shadow(0px 0px 2px #0077b5);
}

.bxl-whatsapp:hover {
    color: #25d366;
    filter: drop-shadow(0px 0px 2px#25d366);
}

.mediaApss i:hover {
    transform: scale(1.5);
    transition: 1s linear;
}

.mediaApss ul {
    display: flex;
    gap: 10px;
    font-size: 17px;
    color: inherit;
    cursor: pointer;
}

.mediaApss a {
    color: inherit;
    font-size: 30px;
    cursor: pointer;
}

.titulo-container .subTitulo .documents {
    animation: buttonUp 2s forwards;
    animation-delay: 3s;
    opacity: 0;
}

@keyframes buttonUp {
    0% {
        transform: translateY(150px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;

    }
}

.titulo-container .subTitulo .documents a {
    position: absolute;
    border: 2px solid;
    color: inherit;
    padding: 8px 2rem;
    border-radius: 10px;
}

.titulo-container .box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.titulo-container .border {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 2px solid darkblue;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    z-index: -1;
}

.titulo-container .border::before {
    content: '';
    position: absolute;
    width: 200px;
    height: 200%;
    border-radius: 50px;
    background-image: linear-gradient(180deg, aqua, purple, aqua, purple);
    top: -50%;
    left: 23%;
    z-index: -1;
    animation: animate 4s linear infinite;
}

@keyframes animate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);

    }
}

.titulo-container .border::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200%;
    border-radius: 50px;
    top: -50%;
    left: 23%;
    z-index: -1;
}

.titulo-container .box .border img {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    opacity: 1;
}

/* titulo e subtitulo */

/* section projetos */
.projetos {
    width: 100%;
    height: 100vh;
    position: absolute;
    background: #0000007a;
    backdrop-filter: blur(10px);
    top: 0;
    left: 0;
    padding: 3rem 0 0;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.projetos.showProject {
    display: flex;
}

.projetos ul {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 1rem 2rem;

    animation: showProjects 3s forwards;
    animation-delay: 2s;
    opacity: 0;
}

@keyframes showProjects {
    0% {
        transform: translateY(500px);
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

.projetos li {
    display: flex;
    flex-direction: column;
    border: 2px solid;
    border-radius: 10px;
}

.projetos li:hover {
    box-shadow: 0px 0px 10px #fff;
}

.projetos img {
    width: 250px;
    height: 200px;
    border-radius: 10px;
}

.projetos a {
    display: block;
    padding: 0.5rem;
    color: inherit;
    transition: 0.3s linear;
}

.projetos a:hover {
    color: #ff0000;
}

/* section projetos */

/* section habilidades */
.habilidades {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    background-color: #000000cc;
    backdrop-filter: blur(10px);
    /* padding: 5rem 0 0; */
    overflow: hidden;
}

.habilidades h3 {
    padding: 1rem 0;
}

.habilidades ul {
    display: flex;
    padding: 1rem 0 0;
    gap: 15px;
}

.habilidades.showSkills {
    display: flex;
}

.habilidades li {
    display: flex;
    flex-direction: column;
    animation: skills 2s forwards;
    opacity: 0;
    animation-delay: 2s;
}

.habilidades i {
    font-size: 60px;
}

@keyframes skills {
    0% {
        transform: scale(7) translate(-100px) rotateZ(360deg);
    }

    100% {
        transform: scale(1) translate(0px) rotateZ(0);
        opacity: 1;
    }
}

.bxl-html5 {
    color: #e34f26;
}

.bxl-css3 {
    color: #1572b6;
}

.bxl-javascript {
    color: #f1a922;
}

.bxs-data {
    color: #007bff;
}

.bxl-php {
    color: #474a8a;
}

/* section habilidades */

/* section sobre */
.sobre {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000000b6;
    backdrop-filter: blur(10px);
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.sobre.showUnder {
    display: flex;

    
}

.sobre .sobremim {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

}

.sobre .sobreTitulo {
    display: flex;
    justify-content: center;
    align-items: start;
    text-align: left;
    flex-direction: column;
    line-height: 30px;
}

.sobre .sobremim .sobreTitulo h1 {
    color: #ff0000;
    font-size: 30px;
}

.sobre .sobremim .sobreTitulo h2 {
    color: aqua;
    padding: 0.5rem 0;
}

.sobre .sobremim .sobreTitulo h1,
.sobre .sobremim .sobreTitulo h2 {
    animation: tituloSubtitulo 1s forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

.sobre .sobremim .sobreTitulo h1:nth-child(1) {
    --delay: 1s;
}

.sobre .sobremim .sobreTitulo h2:nth-child(2) {
    --delay: 4s;
}

@keyframes tituloSubtitulo {
    0% {
        transform: translateY(-100px);

    }

    50% {
        opacity: 0.3;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;

    }
}

.sobre .sobreTitulo p {
    width: 700px;
    display: flex;
    align-items: center;
    text-align: left;
    letter-spacing: 1px;
    animation: paragraphAnimado 2s forwards;
    animation-delay: 2s;
    opacity: 0;
}

@keyframes paragraphAnimado {
    0% {
        transform: translateY(100px);

    }

    50% {
        opacity: 0.3;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

.sobre .sobremim img {
    width: 360px;
    height: 360px;
    border-radius: 50%;
    padding: 8px;
    opacity: 1;
    
}

.sobre .sobremim .box{
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #000;
   border-radius: 50%;
   position: relative;
   overflow: hidden;
   z-index: 2;
}

.sobre .sobremim .border::before{
position: absolute;
content: "";
background-image: linear-gradient(45deg, red,darkblue,red,darkblue);
width: 100px;
height: 200%;
border-radius: 50%;
z-index: -1;
left: 34%;
top: -50%;
animation: rotateImg 4s infinite linear forwards;
}

@keyframes rotateImg {
    0%{
        transform: rotate(360deg);
    }

    100%{
        transform: rotate(0deg); 
    }
}

.sobre .sobremim .border::after{
    position: absolute;
    content: "";
    background-color: #000;
    width: 200px;
    height: 200%;
    border-radius: 50%;
    z-index: -1;
}

.sobre .sobremim .sobreTitulo .mediaApps ul {
    gap: 10px;
    padding-top: 1rem;
    display: flex;
}

.sobre .sobremim .sobreTitulo .mediaApps a {
    color: inherit;
    font-size: 30px;
}

/* section sobre */

.contatos {
    width: 100%;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #000000a9;
    backdrop-filter: blur(10px);
    padding: 2rem;
    overflow: hidden;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.contatos.showContact {
    display: flex;
}

.contatos ul {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 1rem;
    width: 100%;
    animation: upContact 3s forwards;
    opacity: 0;
    animation-delay: var(--delay);

}

@keyframes upContact {
    0% {
        transform: translateY(500px);
    }

    50% {
        opacity: 0.1;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

.contatos li:nth-child(1) {
    --delay: 600ms;
}

.contatos li:nth-child(2) {
    --delay: 400ms;
}

.contatos li:nth-child(3) {
    --delay: 200ms;
}

.contatos li:nth-child(4) {
    --delay: 0ms;
}

.contatos li {
    font-size: 18px;
    border: 2px solid;
    padding: 10px;
    width: 450px;
    margin: 0 auto;
    border-radius: 10px;
    cursor: pointer;

}

.contatos li i {
    font-size: 30px;
}

.contatos .contact {
    height: 0;
    opacity: 0;
    transition: all 0.3s linear;
}

.duvida.ativo .contact {
    opacity: 1;
    height: 30px;
}

.contatos .mediaContact {
    width: 100%;
    padding-top: 5rem;
    gap: 100px;
}

.contatos .mediaContact i {
    font-size: 32px;
    margin: 10px;
}

.contatos a {
    color: inherit;
}


/* responsivo 768px */
@media(max-width:768px) {
.menu{
        background-color: #000;
        padding: 1rem;
        position: fixed;
       
    }

    .menu .menuMobile {
        display: block;
    }

    #nav-list {
        display: none;
    }

    .change#nav-list {
        display: block;
    }

    .menu nav {
        width: 100%;
        position: fixed;
        left: 0;
        top: 4rem;
        display: flex;
        justify-content: start;
        text-align: left;
        align-items: start;
        padding: 0 1rem;
    }

    .menu nav ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        text-align: left;
    }

    .menu nav ul li {
        padding: 12px 0;
        text-align: left;
    }

    .menu .nav-list li {
        animation: menuAnimado 1s linear forwards;
        opacity: 0;
        animation-delay: var(--delay);
    }

    @keyframes menuAnimado {
        0% {
            transform: translate(200px);
            opacity: 0;
        }

        100% {
            transform: translate(0px);
            opacity: 1;
        }
    }

    .bg-menu {
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.9);
        z-index: -1;
        display: none;
        border-bottom-right-radius: 100%;
    }

    .change#bg-menu {
        display: block;
        animation: bg-menu 1s forwards;
    }

    @keyframes bg-menu {
        0% {
            opacity: 0;
            width: 0%;
            height: 0px;
        }

        100% {
            opacity: 1;
            width: 100%;
            height: 650px;
        }
    }

    .titulo-container {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        flex-direction: column-reverse;
        gap: 3px;
    }

    .titulo-container .subTitulo {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .titulo-container .subTitulo .documents {
        display: flex;
        justify-content: center;
        white-space: nowrap;
    }

    .titulo-container .box img {
        width: 250px;
        height: 250px;
        padding: 10px;
    }

    .titulo-container .border {
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        position: relative;
    }

    .titulo-container .box .border::before {
        content: "";
        width: 150px;
        height: 200%;
        position: absolute;
        top: -50%;
        left: 25%;
    }

    .titulo-container .box .border::after {
        content: "";
        width: 150px;
        height: 200%;
        position: absolute;
        top: 0%;
        left: 0%;
    }

    .titulo-container .box .border img {
        width: 250px;
        height: 250px;
        opacity: 1;
    }

    .projetos {
        width: 100%;
        height: auto;
        display: none;
        justify-content: center;
        align-items: center;
        padding-top: 5rem;
    }

    .projetos li {
        width: 100%;

        & img {
            width: 100%;
        }
    }

    .habilidades {
        padding: 0 2rem;
    }

    .sobre {
        width: 100%;
        height: auto;
        padding: 0rem 1rem;
        display: none;
        justify-content: center;
        align-items: center;
        padding-top: 5rem;
    }

    .sobre .sobremim .sobreTitulo {

        display: flex;
        justify-content: start;
        align-items: start;
        margin-top: 1rem;
    }

    .sobre .sobremim .sobreTitulo p {
        width: 100%;
    }

    .sobre .sobremim .sobreTitulo .mediaApps {
        margin: 0 auto;
    }

    .sobre .sobremim .box img {
        display: none;
    }

    .contatos li {
        width: 350px;

    }
}