#about_me_section {
    padding: 100px 0;
    background-color: var(--secondary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
    flex-wrap: wrap-reverse;
    color: white;
}

.about_me_container {
    width: 2048px;
    max-width: 85%;
    display: inline-flex;

    row-gap: 10px;
    column-gap: 20px;
}

.about_me_container .about_me_left {
    width: 50%;
    padding-right: 20px;
}

.about_me_container .about_me_right {
    width: 50%;
    padding-left: 20px;
}

.about_me_container .skills {
    display: inline-flex;
    width: 100%;
    margin-top: 20px;
}

.about_me_right .skills .left {

    width: 50%;
}

.about_me_right .skills .right {

    width: 50%;
}


.about_me_container h2 {}

.about_me_container p {}

@media(max-width: 850px) {
    #about_me_section {
        padding: 50px 0;
    }

    #about_me_section h2 {
        text-align: center;
        font-size: 10vw;
    }

    .about_me_container {
        width: 2048px;
        max-width: 85%;
        display: block;
    }

    .about_me_container .about_me_left {
        width: auto;
        padding: 0;
    }

    .about_me_container .about_me_right {
        margin-top: 30px;
        width: auto;
        padding: 0;
    }


}

.myBar {
    --item-gap: 2%;
    --item-default-color: #060606;

    height: 10rem;
    display: grid;
    grid-auto-flow: column;
    gap: var(--item-gap);
    align-items: end;
    padding-inline: var(--item-gap);
    --padding-block: 1.5rem;
    padding-block: var(--padding-block);
    position: relative;
    isolation: isolate;
    font-size: 16px;
}

.myBar>.item {
    border-radius: 4px;
    height: calc(1% * var(--val));
    background-color: var(--clr, var(--item-default-color));
    position: relative;
    animation: item-height 1s ease forwards;
}

@keyframes item-height {
    from {
        height: 0;
    }
}

.myBar>.item>* {
    position: absolute;
    text-align: center;
}

.myBar>.item>.label {
    inset: 100% 0 auto 0;
}

.myBar>.item>.value {
    inset: auto 0 105% 0;
}

@media (max-width: 1600px) {

    .myBar {
        --item-gap: 5.0%;
        gap: var(--item-gap);
    }

    .myBar>.item {
        min-width: 50px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        animation: item-width 1s ease forwards
    }

    .myBar>.item>.label {
        inset: 5% 0 auto 0;
        writing-mode: vertical-rl;
        text-align: right;
        transform: rotate(180deg);
    }
}

@media (max-width: 600px) {
    .myBar {
        grid-auto-flow: row;
        padding-block: 0;
        padding-inline: 0;
        --item-gap: 0;
        --padding-block: 0;
        height: auto;
        max-width: 20rem;
    }

    .myBar>.item {
        height: auto;
        margin-bottom: 5px;
        padding: 5px;
        border-radius: 4px;
        width: calc(1% * var(--val));
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        animation: item-width 1s ease forwards
    }

    @keyframes item-width {
        from {
            width: 0;
        }
    }

    .myBar>.item>* {
        position: relative;
        text-align: left;
        color: white;
    }

    .myBar>.item>.label {
        inset: auto 0 100% 0;
        writing-mode: unset;
        transform: rotate(0);
    }

    .myBar>.item>.value {
        inset: 100% 0 auto 0;
    }


}