@media(max-width: 1272px) {
    .portfolio-container {
        padding-left: 5%;
        padding-right: 5%;
    }
    .about-p {
        /* max-width: initial; */
    }
}

@media(max-width: 1220px) {
    /* 
    reduce padding on about container
    and make profile img smaller
    */
    /* -- about -- */
    .about-container {
        padding-left: 5%;
        padding-right: 5%;
    }
    #profile-img {
        width: 300px;
    }
    .about-p {
        max-width: 300px;
    }
}

@media(max-width: 1100px) {
    .project-item-content-container {
        flex-direction: column;
    }
    .project-item-content-info-container {
        height: initial;
        margin-left: 0;
        width: 100%;
    }
    .project-item-content-info-tech-list-container {
        margin-top: 25px;
        margin-bottom: 25px;
    }
    .project-item-content-links-container {
        margin-left: 0;
    }
    .project-item-content-link {
        width: 400px;
    }
}

@media(max-width: 973px) {
    /* 
    reduce width of skills banner
    */
    /* -- about -- */
    .skills-heading {
        width: 400px;
    }
}

@media(max-width: 973px) {
    /* 
    reduce width of skills banner
    */
    /* -- about -- */
    .skills-heading {
        width: 300px;
    }
}

@media(max-width: 680px) {
    /* 
    about mobile responsive
    */
    /* -- about -- */
    .about-container {
        flex-direction: column;
    }
    .skills-heading {
        background-color: initial;
        width: initial;
    }
}

@media(max-width: 550px) {
    #profile-img {
        width: 100%;
    }
    .about-p {
        max-width: none;
    }
}

@media(max-width: 510px) {
    header {
        flex-direction: column;
        align-items: flex-start;
    }
    .header-item:last-child {
        margin-top: 15px;
    }
}

@media(max-width: 500px) {
    /* -- portfolio -- */
    .project-item-container {
        /* width: 80%; */
    }
    .project-item-content-info-container {
        overflow-x: scroll;
    }
    .project-item-content-img {
        width: 100%;
    }
    .project-item-content-links-container {
        width: 100%;
    }
    .project-item-content-link {
        width: 100%;
    }
}