/* ---------------text presentation---------------------- */
.header-container {
    width: calc(100% - 40px);
    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: 250px;
    height: 250px;

    position: absolute;
    top: 10px;
}

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

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

    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: 81%;
    left: 60%;
    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: 80%;
    left: 30%;
    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: 40%;
    left: 30%;
    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: 90%;
    left: 80%;

}

.header-container__networks {
    display: none;
}

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