@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --cor--de--destaque: #D0A2F7;
    --cor--do--body: #F1EAFF;
    --cor--de--fundo: black;
    --cor--de--texto: #DCBFFF;
    --cor--de--fundo--secundaria: #E5D4FF;
}

html {
    scroll-behavior: smooth;
}


/* Estilo para o modo escuro */
.dark-mode {
    background-color: #061A26; /* Cor de fundo escura */
    color: #50F2F2; /* Cor do texto clara */
}

/* toggle */
.toggle {
    cursor: pointer;
    display: inline-block;
}

.toggle-switch {
    display: inline-block;
    background: var(--cor--de--destaque);
    border-radius: 1rem;
    width: 3rem;
    height: 1.6rem;
    position: relative;
    vertical-align: middle;
    transition: background 0.25s;
}

.toggle-switch:before, .toggle-switch:after {
    content: "";
}

.toggle-switch:before {
    display: block;
    background: linear-gradient(to bottom, #fff 0%, #eee 100%);
    border-radius: 50%;
    width: 1.2rem; /* Ajuste o tamanho do círculo */
    height: 1.2rem; 
    position: absolute;
    top: 0.2rem; /* Ajuste a posição do círculo */
    left: 0.2rem; /* Ajuste a posição do círculo */
    transition: left 0.25s;
}

.toggle:hover .toggle-switch:before {
    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
}

.toggle-checkbox:checked + .toggle-switch {
    background: #50F2F2;
}

.toggle-checkbox:checked + .toggle-switch:before {
    left: 1.6rem;
}

.toggle-checkbox {
    position: absolute;
    visibility: hidden;
}

/* fim - toggle */


/* Estilo específico para o botão de alternar modo */
.dark-mode #dark-mode-toggle {
    background-color: #fff; /* Cor de fundo clara */
    color: #865DFF; /* Cor do texto escura */
    border: 1px solid #fff; /* Borda clara */
}

.dark-mode #dark-mode-toggle:hover {
    box-shadow: 0px 4px 8px rgb(255, 255, 255); /* Adiciona uma leve sombra ao flutuar */
    transform: translateY(-2px); /* Move o botão para cima um pouco */
}

.dark-mode ul li a{
    /* Estilos para listas no modo escuro */
    color: #50F2F2;
}

.dark-mode .navegacao_header a:hover {
    border-bottom-color: #865DFF; /* Cor no modo dark */
}

.dark-mode .apresentacao_link a:hover {
    font-size: 1.1em;
    border-bottom: 4px solid #865DFF;
}

.dark-mode .skills_icons li {
    background: #333;
    color: #50F2F2;
}

.dark-mode .hobbies_icon li {
    background: #333;
    color: #50F2F2;
}


a {
    text-decoration: none; /* Remove o sublinhado */
    color: initial;
    cursor: pointer;
}


ul {
    list-style: none; /* Remove as bolinhas */
}

body {
    display: flex;
    align-items: center;
    width: 100%;
    font-family: 'Raleway', sans-serif;
    background: var(--cor--do--body); 
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0; 
    box-sizing: border-box;
}

.btn-dark {
    display: flex;
    align-items: flex-start;
    width: 80%;
}

.botao_dark {
    display: flex;
    padding: 1%;
    margin: 2%;
    align-self: flex-start;
    align-items: flex-start;
    background-color: var(--cor--de--destaque); /* Cor de fundo */
    border: none; /* Remove a borda padrão */
    color: var(--cor--de--fundo); /* Cor do texto */
    text-align: center; /* Alinhamento do texto */
    text-decoration: none; /* Remove sublinhado do texto */
    font-size: 16px; /* Tamanho da fonte */
    cursor: pointer; /* Altera o cursor para uma mão quando passa por cima */
    border-radius: 8px; /* Arredondamento dos cantos */
    box-sizing: border-box;
}

.botao_dark:hover, .botao_dark:focus {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Adiciona uma leve sombra ao flutuar */
    transform: translateY(-2px); /* Move o botão para cima um pouco */
}


/* SEÇÃO CABEÇALHO */

.header {
    display: flex;
    width: 80%;
    justify-content: space-between;
    align-items: center;
    padding: 16px; 
    box-sizing: border-box; /* Garante que o padding não aumente o tamanho total do elemento */
}


.nome_logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nome_logo p {
    flex-wrap: nowrap;
    font-family: Raleway;
    font-size: 1em;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    color: #FF3EA5;
}

.dark-mode .nome_logo p {
    color: #865DFF;
}

.navegacao_header {
    display: flex;
    flex-wrap: nowrap; /* Impede que os elementos quebrem de linha */
    gap: 20px;
}
 .navegacao_header ul {
    padding: 0;
 }


.navegacao_header a {
    font-family: Raleway;
    font-size: 1em;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
}

.navegacao_header a:hover {
    font-size: 1.1em;
    border-bottom: 4px solid var(--cor--de--destaque);
}


/* SEÇÃO APRESENTAÇÃO */

.secao_apresentacao {
    display: flex;
    width: 80%;
    align-items: center;
}

.apresentacao_left {
    display: flex;
    width: 64%;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex-shrink: 0;
}

.apresentacao_textos h1 {
    font-family: Raleway;
    font-size: 3.25em;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.apresentacao_textos p {
    font-family: Raleway;
    font-size: 1em;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.apresentacao_link{
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.apresentacao_link ul {
    display: flex;
    align-items: flex-start;
    gap: 32px; 
    padding: 0;
}

.apresentacao_link li {
    display: flex;
}

.apresentacao_link a {
    display: flex;
    flex-direction: row;
    font-family: Raleway;
    font-size: 1em;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-right: 32px;
    background: url('./assets/arrow_back_black_24dp\ 1.png') no-repeat right center;
}

.apresentacao_link a:hover {
    font-size: 1.1em;
    border-bottom: 4px solid var(--cor--de--destaque);
}

.apresentacao_img {
    display: flex;
    justify-content: center;
    align-items: center;
}


.apresentacao_img img {
    width: 80%;
    height: auto;
    flex-shrink: 0;
    border-radius: 368px;
}

/* SEÇÃO SOBRE MIM */

.sobre_mim {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    background-color: var(--cor--de--fundo--secundaria);
}

/* Modo escuro */
.sobre_mim_dark {
    background-color: #0A5159; /* Cor de fundo para o modo escuro */

}

.sobre_mim_textos {
    display: flex;
    padding: 6.67%;
    width: 80%;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.sobre_mim h2 {
    font-family: Raleway;
    font-size: 2em;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.sobre_mim p {
    width: 64%;
    font-family: Raleway;
    font-size: 1em;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.sobre_mim img {
    display: flex;
    align-self: flex-start;
}

/* SEÇÃO SKILLS E HOBBIES */

.skills_hobbies {
    display: flex;
    width: 80%;
    padding: 2% 0 5% 0;
    flex-direction: column;
    align-items: center;
    gap: 88px;
    box-sizing: border-box;
}

.skills_hobbies_dark {
    background: #061A26;
    color: #50F2F2;
}

.skills {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.skills h2 {
    text-align: center;
    font-family: Raleway;
    font-size: 2em;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.skills_icons {
    display: flex;
    box-sizing: border-box;
}

.skills_icons ul {
    width: 100%;
    padding: 0;
    justify-content: center;
    display: flex;
    gap: 16px;
    box-sizing: border-box;
}

.skills_icons li {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    width: 11rem;
    height: 10.85rem;
    flex-direction: column;
    background: var(--cor--de--texto);
    border-radius: 20px;
    box-shadow: 3px 2px 5px 3px rgba(0,0,0,0.1);
    font-family: Raleway;
    font-size: 1em;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.hobbies {
    display: flex;
    flex-direction: column;
}

.hobbies h2 {
    text-align: center;
    font-family: Raleway;
    font-size: 2em;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.hobbies_icon ul {
    width: 100%;
    padding: 0;
    justify-content: center;
    display: flex;
    gap: 16px;
}


.hobbies_icon li {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    width: 11rem;
    height: 10.85rem;
    background: var(--cor--de--texto);
    border-radius: 20px;
    box-shadow: 3px 2px 5px 3px rgba(0,0,0,0.1);
    font-family: Raleway;
    font-size: 1em;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* FORMAÇÃO ACADEMICA */

.formacao_academica {
    display: flex;
    width: 100%;
    padding: 2% 0 5% 0;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    background: var(--cor--de--fundo--secundaria);
}

.formacao_academica_dark {
    background-color: #0A5159; /* Cor de fundo para o modo escuro */
    color: #50F2F2;
}

.dark-mode .formacao_academica li {
    background: #333;
}

.formacao_academica h2 {
    text-align: center;
    font-family: Raleway;
    font-size: 2em;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.experiencias_academicas {
    display: flex;
    width: 80%;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.experiencias_academicas ul {
    display: flex;
    justify-content: space-between;
    padding: 0;
    gap: 32px;
    align-items: center;
    width: 100%;

}

.experiencias_academicas li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 16px;
    width: 200px;
    height: 250px;
    text-align: center;
    background: var(--cor--de--texto);
    border-radius: 20px;
    box-shadow: 3px 2px 5px 3px rgba(0,0,0,0.1);
}


.experiencias_academicas h4 {
    font-family: Raleway;
    font-size: 1.3em;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.experiencias_academicas p {
    font-family: Raleway;
    font-size: 1em;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

/* SEÇÃO EXPERIÊNCIA PROFISSIONAL */

.experiencia_profissional {
    display: flex;
    box-sizing: border-box;
    width: 80%;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    padding: 2% 0 4% 0;
}

.experiencia_profissional h2 {
    text-align: center;
    font-family: Raleway;
    font-size: 2em;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.experiencia_box_1 {
    display: flex;
    width: 100%;
    height: auto;
    align-items: center;
    gap: 80px;
}

.experiencia_box_left {
    display: flex;
    width: 65%;
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.experiencia_box_left img {
    width: 100%;
    height: auto;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}



.experiencia_box_right {
    display: flex;
    width: 30%;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
}

.experiencia_box_right h5{
    font-family: Raleway;
    font-size: 1.3em;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.experiencia_box_right p {
    font-family: Raleway;
    font-size: 1em;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.botoes {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.botao_repo {
    display: flex;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: 1px solid  var(--cor--de--destaque);
    color: var(--cor--de--fundo);
    background-color: var(--cor--de--texto);
    font-family: Raleway;
    font-size: 1em;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border-radius: 10px;
    box-shadow: 3px 2px 5px 3px rgba(0, 0, 0, 0.1); /* Adiciona uma leve sombra ao flutuar */
    transform: translateY(-2px); /* Move o botão para cima um pouco */
    cursor: pointer;
}

.dark-mode .botao_repo {
    background: #50F2F2;
    color: #333;
    border: black;
    box-shadow: 3px 2px 5px 3px rgb(201, 230, 232); /* Adiciona uma leve sombra ao flutuar */
}

.botao_repo:hover {
    background: var(--cor--de--destaque);
    color: #FF3EA5;
    cursor: pointer;
}

.dark-mode .botao_repo:hover {
    background: #0D7F8C;
    color: white;
}


.botao_demo {
    display: flex;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background:  var(--cor--de--destaque);
    color: var(--cor--de--fundo);
    font-family: Raleway;
    font-size: 1em;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border: none;
    border-radius: 10px;
    box-shadow: 3px 2px 5px 3px rgba(0, 0, 0, 0.1); /* Adiciona uma leve sombra ao flutuar */
    transform: translateY(-2px); /* Move o botão para cima um pouco */
    cursor: pointer;
}

.dark-mode .botao_demo {
    background: #0A5159;
    color: white;
    box-shadow: 3px 2px 5px 3px rgba(201, 230, 232, 0.719); /* Adiciona uma leve sombra ao flutuar */
}

.botao_demo:hover {
    background-color: var(--cor--de--fundo--secundaria);
    color: #FF3EA5;
    border: 1px solid var(--cor--de--destaque);
}

.dark-mode .botao_demo:hover {
    background: #50F2F2;
    color: #061A26;
}

.experiencia_box_2 {
    display: flex;
    width: 100%;
    height: auto;
    align-items: center;
    gap: 80px;
}

/* SEÇÃO FORMULÁRIO */

.formulario {
    display: flex;
    width: 100%;
    padding: 5% 0 2% 0;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
    background: var(--cor--de--fundo--secundaria);
    margin: 0;
}

.formulario_dark {
    background-color: #0A5159; /* Cor de fundo para o modo escuro */
    color: #50F2F2;
}

.formulario_box {
    display: flex;
    width: 80%;
    align-self: center;
    gap: 90px;
}

.formulario_imagem {
    display: flex;
    width: 50%;
}

.formulario_imagem img {
    display: flex;
    padding: 2%;
    align-items: center;
    width: 100%;
    height: auto;

}

.formulario_contato {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    flex: 1 0 0;
}

.formulario_contato_txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.formulario_contato_txt h4 {
    display: flex;
    margin: 0;
    font-family: Raleway;
    font-size: 2em;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.formulario_contato_txt p {
    font-family: Raleway;
    font-size: 1em;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.form {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
}



/* Estilos para os inputs */
.form input[type="text"],
.form input[type="email"],
.form textarea {
    width: 100%; 
    display: flex;
    padding-top: 8px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 7px;
    align-self: stretch;
    box-sizing: border-box; 
    padding: 8px; 
    margin-bottom: 10px; 
    border: none;
    border-bottom: 1px solid var(--cor--de--destaque);
    resize: none;
    outline: none;
}


.form input[type="text"]::placeholder,
.form input[type="email"]::placeholder,
.form textarea::placeholder {
    color: #FF3EA5;
    font-family: Raleway;
    font-size: 1em;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; 
}
.dark-mode .form input[type="text"],
.dark-mode .form input[type="email"],
.dark-mode .form textarea {
    border-bottom: 1px solid #0A5159;
}

.dark-mode .form input[type="text"]::placeholder,
.dark-mode .form input[type="email"]::placeholder,
.dark-mode .form textarea::placeholder {
    color: #0A5159;
}



/* Estilos para o botão */
.form .submit {
    display: flex;
    padding: 16px;
    margin-top: 10%;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: auto; 
    background: var(--cor--de--destaque);
    color: var(--cor--de--fundo);
    font-family: Raleway;
    font-size: 1em;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border: none;
    border-radius: 10px;
    box-shadow: 3px 2px 5px 3px rgba(0, 0, 0, 0.1); /* Adiciona uma leve sombra ao flutuar */
    transform: translateY(-2px); /* Move o botão para cima um pouco */
    cursor: pointer;
}

.dark-mode .form .submit {
    background: #50F2F2;
    box-shadow: 3px 2px 5px 3px rgba(201, 230, 232, 0.719); /* Adiciona uma leve sombra ao flutuar */
}

.form .submit:hover {
    background: var(--cor--de--fundo--secundaria);
    color: #FF3EA5;
    border: 1px solid var(--cor--de--destaque);
}

.dark-mode .form .submit:hover {
    background: #061A26;
    color: #50F2F2;
    border: 1px solid #50F2F2;
}

/* SEÇÃO RODAPÉ */

footer {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-align: center;
    font-family: Raleway;
    font-size: 1em;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

/* RESPONSIVIDADE  */


/* Para telas menores que 600px (celulares) */
@media only screen and (max-width: 768px) {
    .container{
        justify-content: center;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
    }
    .header {
        flex-direction: column; 
        align-items: center; 
        text-align: center; 
    }

    .nome_logo {
        margin-bottom: 10px; 
    }

    .navegacao_header {
        display: none;
    }
    .secao_apresentacao {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        width: auto;
    }

    .apresentacao_img img {
        padding-left: 5%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .skills {
        display: flex;
        flex-direction: column;
    }

    .skills_icons ul {
        display: flex;
        flex-direction: column;
    }

    .hobbies_icon ul {
        display: flex;
        flex-direction: column;
    }

    .experiencias_academicas ul {
        display: flex;
        flex-direction: column;
    }
    .experiencia_profissional {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .experiencia_box_1 {
        display: flex;
        flex-direction: column;
    }
    .experiencia_box_2 {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }
    .botoes {
        width: 100%;
    }
    .formulario {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .formulario_box {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .formulario_imagem {
        display: flex;
        align-items: center;
        width: 50%;
    }

    .form .submit {
        width: 100%;
    }

}