@charset "UTF-8";

@import url("header.css");
@import url("apresentation.css");
@import url("skill.css");
@import url("eduaction.css");
@import url("projects.css");
@import url("footer.css");
@import url("dialog.css");

/* ====== GENERAL CONFIG ====== */

:root {
    --main-color: #0061D7;
    --secundary-color: #215BA3;
    --background-color: #f8f8f8;
    --card-background-color: #f0f0f0;
    --card2-background-color: #d9e3f0;
    --inverted-main-color: #2D4B70;
    --text-color: #292D33;
    --white-text-color: #f8f8f8; 
}

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}


body {
    background-color: var(--background-color);
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

p {
    text-align: justify;
}

/* ====== MIDIA QUERY ====== */

@media screen and (min-width: 762px) {
    #header-container__title p{
        display: inline-block;
    }
    #header-container__title ul{
        display: flex;
        align-items: center;
        gap: 5px;

    }
    #nav-container p {
        top: 65px;
        border-width: 0px;
    }

    li#home-op {
        display: none;
    }

    main {
        max-width: 1000px;
        margin: auto;
        display: grid;
        grid-template-columns: auto 30% 60% auto;
    }

    section#apresentation-section {
        grid-column: 2 / 3;
        box-sizing: content-box;
        align-self: start;
        position: sticky;
        top: 120px;
        z-index: 1;
    }

    div#apresentation__title a{
        font-size: 1.2em;
    }

    section#apresentation-section h3{
        font-size: 1em;
    }

    div#apresentation__title a:hover{
        font-size: 1.3em;
    }

    section#desc-section {
        grid-column: 3 / 4;
    }
}

@media screen and (max-width: 400px) {

    div.skill-container ul{
        width: 50%;
    }
    div.skill-container img{
        display: none;
    }
    div.skill-container h2 {
        font-size: 1em;
    }
    div.skill-container li{
        font-size: .8em;
    }
    div.skill summary{
        font-size: .9em;
    }
    .project__title-div p {
        display: none;
    }
    .project__title-div h3 {
        font-size: 1.8em;
    }
    .project img {
        display: none;
    }

    dialog {
        width: 80%;
    }
}