.header-container {
    width: calc(100% - 20px);
    height: 400px;
    margin: 10px auto;

    display: grid;
    grid-auto-columns: 1fr 2fr;
    grid-template-areas:
        "logo text"
    ;
    place-content: center;
}

.header-container__logo {
    grid-area: logo;
}

.logo--photo {
    width: 200px;
    height: 200px;

    position: absolute;
    top: 10px;
    left: 35px;
}

#text-presentation {
    grid-area: text;
}

.developmentPst {
    padding-left: 5px;
    position: absolute;
    font-size: 3.5rem;
    top: 0;
    left: 15%;

    background: rgb(0, 0, 0);
    background: linear-gradient(198deg, rgba(0, 0, 0, 1) 51%, rgba(31, 2, 6, 1) 86%);
}

.jeisonPst {
    position: absolute;
    font-size: 3.5rem;
    padding: 10px;
    top: 95%;
    left: -50%;
    border-bottom: 1px solid rgb(88, 19, 19);

}

.learningPst {
    position: absolute;
    font-size: 3.5rem;
    top: 61%;
    left: 50%;
    background: rgb(0, 0, 0);
    background: linear-gradient(198deg, rgba(0, 0, 0, 1) 51%, rgba(31, 2, 6, 1) 86%);
}

.passionPst {
    position: absolute;
    font-size: 3.5rem;
    top: 60%;
    left: 15%;
    background: rgb(0, 0, 0);
    background: linear-gradient(198deg, rgba(0, 0, 0, 1) 51%, rgba(31, 2, 6, 1) 86%);
}

.programmingPst {
    position: absolute;
    font-size: 3.5rem;
    top: 30%;
    left: 15%;
    background: rgb(0, 0, 0);
    background: linear-gradient(198deg, rgba(0, 0, 0, 1) 51%, rgba(31, 2, 6, 1) 86%);
}

#logo-button {
    z-index: 2;
    top: 112%;
    left: 20%;

}

.header-container__networks {
    display: none;
}

/* ---------------- Main ------------------------ */
.main-container{
    /* margin: 10px 0; */
    display: grid;
    grid-auto-columns: 250px;
    grid-template-areas:
        "one two two"
        "three three three"
    ;
    place-content: center;
}