@media (max-width:820px){
    .content{
        padding-left: 2rem;
        padding-right: 2rem;
        justify-items: center;
        margin-bottom: 2rem;
    }
    
    /* ==============================
       TITLES
       ============================== */

    .sub-title{
        text-align: center;
        border-bottom: solid var(--color-primary-dark);
        font-size: 1.35rem;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 0.4rem;
        /* width: 7rem; */
    }

    /* ==============================
       ABOUT ME SECTION
       ============================== */
    #about-me{
        
        justify-items: center;
    }

    #about-me-text{
        text-align: center;
        width: auto;
    }

    /* ==============================
       SKILLS SECTION
       ============================== */
    .skills{
        justify-items: center;
        align-content: center;
    }

    #skills-section-wrapper{
        all: unset;
        display: grid;
        gap: 3rem;
    }

    /* Wraps the icon and text of skills and technologies listed. */
    /* .skills-icon-wrapper{
        display: flex;
        flex-direction: row;
        background-color: var(--color-black);
        border-radius: 0.5rem;
        color: var(--color-white);
        padding-left: 0.5rem;
        gap: 0.5rem;
        width: 10rem;
        align-items: center;
    } */

    .skills-techs-img{
        width: 2rem;
        height: 2rem;
    }

    /* ==============================
       LANGUAGES AND TECHNOLOGIES
       ============================== */
    #languages, #technologies{
        display: grid;
        justify-items: center;
        gap: 1rem;
    }

    .icon-group-wrapper{ /* Used to group icons in languages and technologies.*/
        all: unset;
        display: grid;
        gap:1rem;
    }
}