/* CORES */

:root {
    --branco: #e3e3e3;
    --azul-claro: #b6d5da;
    --azul-escuro: #0945ac;
}

/* RESET CSS */

a {
	color: inherit;
	text-decoration: none;
}

ol, ul, li {
	list-style: none;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
}

.all {
    margin: 0;
    padding: 0;
    background-color: var(--branco);
    width: auto;
}

/* MENU */

.menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "Quicksand", sans-serif;
    font-size: 1rem;
    font-weight: 300;
    font-style: normal;
    color: var(--branco);
    background-color: var(--azul-escuro);
    position: fixed;
    padding: 1% 8% 1% 8%;
    width: 100%;
    box-sizing: border-box;
}

.menu__header {
    display: flex;
    align-items: center;
    gap: 0.95rem;
}

.imagem_header {
    width: 40px;
    height: 40px;
}

.menu__title {
    font-family: "Quicksand", sans-serif;
    font-style: normal;
    font-weight: 400;
}

.menu__list {
    display: flex;
    list-style-type: none;
    align-items: center;
    font-weight: 400;
    color: var(--branco);
    gap: 2rem;
}


.menu__list__item a {
    position: relative;
    transition: font-weight 0.3s; 
}

.menu__list__item a:hover {
    font-weight: 500;
}

.menu__list__item a::after {
    content: ''; 
    position: absolute; 
    left: 0; 
    bottom: -5px;
    width: 0;
    height: 2px;
    background-color: var(--branco);
    transition: width 0.3s;
}

.menu__list__item a:hover::after {
    width: 50%; 
}

section > .title {
    padding-bottom: 2px;
}


/* APRESENTAÇÃO */

.title__div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
    font-family: "Quicksand", sans-serif;
    background-color: var(--branco);
    padding: 5% 8% 5% 8%;
    box-sizing: border-box;
}

.title__profile {
    max-width: 100%;
    height: auto;
}

.title__bio {
    font-size: 3.125rem;
    font-weight: 600;
    margin-bottom: 3%;
    margin-right: 2%;
    color: var(--azul-escuro);
}

.title__subsection {
    font-size: 1.5rem;
    font-weight: 300;
    margin-right: 1.5%;
}

.title__network {
    display: flex;
    justify-content: left;
    font-size: 1.125rem;
    color: var(--azul-escuro);
    gap: 2rem;
    margin-top: 3%;
}

.title__network__item a {
    position: relative;
    transition: font-weight 0.3s; 
}

.title__network__item a:hover {
    font-weight: 500; 
}

.title__network__item a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    background-color: var(--azul-escuro); 
    transition: width 0.3s; 
}

.title__network__item a:hover::after {
    width: 50%; 
}

/* SOBRE MIM */

.about__container {
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: space-between;
    background-color: var(--azul-claro);
    font-family: "Quicksand", sans-serif;
    gap: 1.25rem;
    padding: 4% 40% 4% 8%;
    box-sizing: border-box;
}

.about__title {
    font-size: 2.25rem;
    font-weight: 500;
    margin-bottom: 1%;
}

.about__paragraph {
    font-size: 1.25rem;
    font-weight: 300;
    margin-bottom: 2%;
}

.about__assinatura {
    height: 35%;
    width: 35%;
}

/* SKILLS */

.skills__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--branco);
    gap: 2rem;
    padding: 4% 8% 5% 8%;
    box-sizing: border-box;
}

.skills__img  {
    width: 30%;
    height: auto;
}

.skills__title {
    font-family: "Quicksand", sans-serif;
    font-size: 2.25rem;
    font-weight: 500;
    color: var(--azul-escuro);
}

.skills__line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.skills__box {
    background-color: white;
    font-family: "Quicksand", sans-serif;
    font-size: 1.125rem;
    font-weight: 300;
    display: flex;
    align-items: flex-end;
    width: 11rem;
    height: 10.875rem;
    flex-shrink: 1;
    padding-left: 1rem;
    padding-bottom: 1rem;
    border-radius: 5%;
    transition: transform 0.3s;
}

.skills__name {
    margin-top: 8px;
}

.skills__box:hover {
    transform: translateY(-5px);
}


/* EXPERIÊNCIA PROFISSIONAL */

.experience {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: var(--branco);
    padding: 5% 8% 5% 8%;
    box-sizing: border-box;
    gap: 4rem;
}

.experience__section__title {
    font-family: "Quicksand", sans-serif;
    font-size: 2.25rem;
    font-weight: 500;
    color: var(--azul-escuro);
}

.experience__box {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.experience__box:nth-child(even) {
    flex-direction: row-reverse;
}

.experience__box:nth-child(odd) {
    flex-direction: row;
}

.experience__title {
    font-family: "Quicksand", sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 0.625rem;
}

.experience__text {
    font-family: "Quicksand", sans-serif;
    font-size: 1.125rem;
    font-weight: 300;
    margin-bottom: 1rem;
}

.experience__img {
    max-width: 70%;
    height: auto;
}

/* BOTÕES NORMAL */

.experience__description {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.experiencia__botao--repo {
    font-family: "Quicksand", sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--azul-escuro);
    background-color: var(--branco);
    width: 7.25rem;
    height: 3.1875rem;
    border-style: solid;
    border-color: var(--azul-escuro);
    border-width: 0.01rem;
    border-radius: 5%;
    transition: transform 0.3s;
}

.experiencia__botao--demo {
    font-family: "Quicksand", sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    color: white;
    background-color: var(--azul-escuro);
    width: 7.25rem;
    height: 3.1875rem;
    border-radius: 5%;
    transition: transform 0.3s;
}

/* BOTÕES INTERAÇÃO */

.experiencia__botao--repo:hover {
    background-color: #ebeaea;
    transform: translateY(-5px);
    cursor: pointer;
}

.experiencia__botao--demo:hover {
    background-color: #7da088;
    transform: translateY(-5px);
    cursor: pointer;
}

/* Estilos para o elemento details */
.custom-details {
    background-color: var(--branco);
    border: 1px solid var(--azul-escuro);
    border-radius: 5px;
    padding: 10px;
    transition: all 0.3s ease;
    margin-top: 10px;
    font-family: "Quicksand", sans-serif;
}

.custom-summary {
    cursor: pointer;
    font-weight: 600;
    padding: 10px;
    background-color: var(--azul-claro);
    color: var(--azul-escuro);
    border-radius: 5px;
    transition: background-color 0.3s;
    font-family: "Quicksand", sans-serif;
}

.custom-summary:hover {
    background-color: var(--azul-escuro);
    color: var(--branco);
    font-family: "Quicksand", sans-serif;
}

/* Lista de Links */
.link-list {
    list-style-type: none;
    padding: 0;
    margin: 10px 0 0;
    font-family: "Quicksand", sans-serif;
}

.link-list__item {
    margin: 5px 0;
    font-family: "Quicksand", sans-serif;
}

.link-list__item a {
    color: var(--azul-escuro);
    transition: font-weight 0.3s;
    font-family: "Quicksand", sans-serif;
    position: relative;
}

.link-list__item a:hover {
    font-weight: 500;
}

.link-list__item a::after {
    content: ''; 
    position: absolute; 
    left: 0; 
    bottom: -5px;
    width: 0;
    height: 2px;
    background-color: var(--azul-escuro);
    transition: width 0.3s; 
}

.link-list__item a:hover::after {
    width: 50%; 
}


/* RODAPÉ */

.footer {
    background-color: var(--azul-escuro);
    color: var(--branco);
    font-family: "Quicksand", sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    text-align: center;
    padding: 1.5% 0% 1.5% 0%;
    width: 100%;
}

/* VERSÃO MOBILE */

@media (max-width: 1300px) {
    .menu {
        padding: 3% 0% 3% 10%;
        position: static;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
    }  
    .menu__list {
        display: none;
    }
    .title__div {
        flex-direction: column;
        align-items: center;
        gap: 3rem;
        margin-top: 10%;
    }
    .title__bio {
        margin-bottom: 10%;
        margin-right: 0%;
    }
    .title__subsection {
        margin-right: 0%;
        margin-top: 5%;
    }
    .title__network {
        gap: 2rem;
        margin-top: 8%;
        margin-bottom: 10%;
    }
    .title__profile {
        max-width: 80%;
        height: auto;
    }
    /* Remover estilos para versão mobile */
    .title__network__item a,
    .title__network__item a:hover,
    .title__network__item a::after,
    .title__network__item a:hover::after {
        font-weight: initial;
        position: initial;
        transition: initial;
        content: initial;
        left: initial;
        bottom: initial;
        width: initial;
        height: initial;
        background-color: initial;
    }
    .about__container {
        padding: 6% 5% 6% 5%;
    }
    .about__title {
        margin-bottom: 3%;
    }
    .about__paragraph {
        margin-bottom: 4%;
    }
    .about__assinatura {
        height: 40%;
        width: 40%;
    }
    .skills__container {
        padding: 15% 3% 15% 3%;
    }
    .skills__title {
        margin-bottom: 5%;
    }
    .skills__line {
        flex-wrap: wrap;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
    }
    .skills__box:hover {
        transform: initial;
        transition: initial;
    }
    .hobbies__container {
        padding: 10% 3% 20% 3%;
    }
    .hobbies__title {
        margin-bottom: 5%;
    }
    .hobbies__line {
        flex-wrap: wrap;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
    }
    .hobbies__box:hover {
        transform: initial;
        transition: initial;
    }
    .academic {
        padding: 15% 5% 15% 5%;
        text-align: center;
    }
    .academic__title {
        margin-bottom: 3%;
    }
    .academic__courses {
        display: flex;
        justify-content: center; 
        align-items: center; 
        flex-wrap: wrap;
        gap: 2rem;
    }
    .academic__img {
        max-width: 75%;
        height: auto;
    }
    .experience {
        padding: 12% 5% 25% 5%;
        text-align: center;
    }  
    .experience__box {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
    .experience__box:nth-child(even) {
        flex-direction: column;
    }
    .experience__box:nth-child(odd) {
        flex-direction: column;
    }
    .experience__img {
        height: auto;
        margin-bottom: 5%;
    }
    .experience__description {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2rem;
    }
    .experience__title {
        margin-bottom: 5%;
    }
    .experiencia__botao--repo:hover,
    .experiencia__botao--demo:hover {
        background-color: initial;
        width: initial;
        transform: initial;
        transition: initial;
    }
    .formcontato__contacto {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10% 0% 15% 0%;
    }
    .formcontato__title {
        text-align: center;
        margin-bottom: 3rem;
    }
    .formcontato__subtext {
        margin-bottom: 0.5rem;
    }

    .formcontato__form {
        gap: 1.25rem;
        align-items: center;
        margin-top: 2rem;
    }
    .formcontato__input {
        width: 90%;
        max-width: 30rem;
        height: 3.5rem;
    }
    .formcontato__textarea {
        width: 90%;
        max-width: 30rem;
        height: 8.3125rem;
    }
    .formcontato__botao{
        margin-top: 0.5rem;
    }
    .formcontato--esquerda {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10%;
    }
    .formcontato__img {
        max-width: 90%;
        height: auto;
    }
    .formcontato__input:focus,
    .formcontato__textarea:focus {
        caret-color: initial;
        outline: none;
        border-bottom: 0.1875rem solid var(--azul-escuro);
    }
    .formcontato__input:focus::placeholder,
    .formcontato__textarea:focus::placeholder {
        color: var(--azul-escuro);
    }
    .footer {
        padding: 3% 0% 3% 0%;
    }
}