:root {
    --default-text-color: rgb(100, 100, 100);
    --highlight-text-color: rgb(70, 70, 70);
    --default-dividing-line: 1.5px solid rgb(200, 200, 200);
    --highlight-color: #1E90FF;
    --default-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

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

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

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

body {
    margin: 20px;
    margin-top: 40px;
    background-color: #FAFAFA;
    min-height: 100dvh;
    color: var(--default-text-color);
    font-size: 0.9rem;
}

p,
li {
    line-height: 20px;
}

p span,
li span {
    color: var(--highlight-text-color);
    font-weight: 600;
}

header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: var(--default-dividing-line);
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 30px;
}

header .linha-portifolio {
    width: 100%;
}

header .linha-portifolio p {
    height: 25px;
    font-weight: 600;
    color: var(--highlight-text-color);
}

header .barra-topo {
    background-color: var(--highlight-color);
    height: 4px;
    width: 100%;
}

header img {
    object-fit: cover;
    height: 200px;
    width: 200px;
    border-radius: 10px;
    margin-top: 10px;
    box-shadow: var(--default-shadow);
}

h1 {
    font-size: 1.5rem;
    text-align: center;
    color: var(--highlight-text-color);
}

header p:nth-child(4) {
    padding: 0 20px;
    text-align: justify;
}

section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 30px;
    border-bottom: var(--default-dividing-line);
}

.habilidades .area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.habilidades .area .icon {
    height: 50px;
    width: 50px;
    box-shadow: var(--default-shadow);
    padding: 10px;
    margin: 15px;
    margin-top: 35px;
    border-radius: 6px;
    transform: rotate(-45deg);
}

.habilidades .area .icon svg {
    transform: rotate(45deg);
    color: var(--highlight-color);
}

.linha-titulo-secao {
    width: min-content;
}

.linha-titulo-secao .linha {
    background-color: var(--highlight-color);
    height: 2px;
    width: 120%;
    margin-top: 5px;
}

h2 {
    padding-left: 5px;
    font-size: 1.25rem;
    color: var(--highlight-text-color);
}

h3 {
    font-size: 1rem;
    color: var(--highlight-text-color);
}

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

ul li {
    text-align: center;
    list-style: inside;
}

.projetos {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 30px;
    margin-top: 30px;
}

.projetos .projeto {
    display: flex;
    flex-direction: column;
    gap: 25px;
    border-bottom: var(--default-dividing-line);
    padding-bottom: 30px;
}

.projetos .projeto:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.projetos .projeto img {
    max-width: 320px;
    max-height: 175px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: var(--default-shadow);
    align-self: center;
}

.projetos .projeto ul {
    align-items: start;
}

.projetos .projeto .ferramentas {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.projetos .projeto a {
    display: grid;
    place-items: center;
    border: 2px solid var(--highlight-color);
    width: 110px;
    height: 35px;
    border-radius: 4px;
    color: var(--highlight-color);
    font-size: 12px;
    font-weight: 600;
    transition: 0.3s;
}

.projetos .projeto a:hover {
    background-color: var(--highlight-color);
    color: white;
}

.formacoes {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.formacoes .formacao {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

footer {
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 35px;
    padding-bottom: 30px;
}

.contatos {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contato {
    margin-left: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

footer .linha-divisoria {
    height: 0.5px;
    width: 100%;
    background-color: rgb(200, 200, 200);
}

.contato .icon {
    color: var(--highlight-color);
}

.contato a {
    font-size: 12px;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--highlight-color);
    text-underline-offset: 4px;
}

@media (min-width: 768px) {
    body {
        margin: 60px;
        margin-top: 60px;
        font-size: 1.2rem;
    }

    header {
        gap: 30px;
        margin-bottom: 50px;
        padding-bottom: 50px;
    }

    header .barra-topo {
        margin-top: 12px;
    }

    header img {
        height: 300px;
        width: 300px;
        margin-top: 20px;
    }

    h1 {
        font-size: 2rem;
    }

    header p:nth-child(4) {
        padding: 0;
        text-align: center;
    }

    section {
        gap: 50px;
        padding-bottom: 50px;
    }

    .habilidades .area {
        display: grid;
        grid-template-areas:
            "icon titulo"
            "icon descricao";
        grid-template-columns: 130px 1fr;
        grid-template-rows: 20px min-content;
        gap: 14px;
        font-size: 14px;
    }

    .habilidades .area .icon {
        min-height: 75px;
        min-width: 75px;
        margin: 10px;
        grid-area: icon;
    }

    .habilidades .area h3 {
        grid-area: titulo;
    }

    .habilidades .area ul {
        grid-area: descricao;
    }

    .linha-titulo-secao {
        width: min-content;
    }

    .linha-titulo-secao .linha {
        background-color: var(--highlight-color);
        height: 3px;
        width: 120%;
        margin-top: 8px;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    ul {
        margin-left: 16px;
        align-items: start;
    }

    ul li {
        text-align: start;
        list-style: disc;
    }

    .projetos {
        display: grid;
        grid-template-areas:
            "titulo titulo titulo"
            "projeto1 linha-divisoria projeto2";
        grid-template-columns: 1fr 0.5px 1fr;
        grid-template-rows: 50px 1fr;
        gap: 30px;
        margin-bottom: 50px;
        margin-top: 50px;
    }

    .projetos .linha-titulo-secao {
        grid-area: titulo;
    }

    .projetos:nth-child(1) {
        grid-area: projeto1;
    }

    .projetos:nth-child(2) {
        grid-area: projeto2;
    }

    .projetos .linha-divisoria {
        height: 100%;
        background-color: rgb(200, 200, 200);
    }

    .projetos .projeto {
        border-bottom: none;
        font-size: 16px;
    }

    .projetos .projeto:last-child {
        padding-bottom: 30px;
    }

    .projetos .projeto img {
        max-width: 100%;
        max-height: none;
    }

    .contato a {
        font-size: 1rem;
        text-underline-offset: 6px;
    }
}

@media (min-width: 1024px) {
    body {
        margin: 50px;
        margin-top: 50px;
    }

    header {
        display: grid;
        grid-template-areas:
            "linha-portifolio linha-portifolio"
            "titulo imagem"
            "descricao imagem";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 50px min-content min-content;
        gap: 0;
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .linha-portifolio {
        grid-area: linha-portifolio;
    }

    header img {
        grid-area: imagem;
        align-self: center;
        justify-self: center;
        margin: 0;
    }

    header img,
    header h1 {
        margin-top: 50px;
    }

    header img,
    header>p {
        margin-bottom: 50px;
    }

    header h1 {
        grid-area: titulo;
        text-align: left;
        font-size: 3rem;
    }

    header>p {
        grid-area: descricao;
    }

    header p:nth-child(4) {
        padding: 0 20px;
        text-align: left;
    }

    .habilidades {
        display: grid;
        grid-template-areas:
            "titulo titulo"
            "linguagem-framework banco-de-dados"
            "soft-skills ferramentas";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 50px min-content min-content;
    }

    .habilidades .linguagem-framework {
        grid-area: linguagem-framework;
    }

    .habilidades .banco-de-dados {
        grid-area: banco-de-dados;
    }

    .habilidades .soft-skills {
        grid-area: soft-skills;
    }

    .habilidades .ferramentas {
        grid-area: ferramentas;
    }

    .habilidades .area {
        align-self: center;
    }

    .habilidades li {
        font-size: 1rem;
    }

    .contatos {
        gap: 30px;
    }
}