.personal-projects {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-top: 80px;

    & h2 {
        font-size: 2rem;
    }

    & .card-project {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 60px;

        & li {
            display: flex;
            width: 100%;

            & .project-description {
                flex: 1;
                padding: 5%;
                max-width: 500px;

                & h3 {
                    font-size: 1.5rem;
                    color: #537fe7;
                }
                & a {
                    font-size: 1.2rem;
                    color: #fff;
                    margin: 25px 0;
                    cursor: pointer;
                }
                & p {
                    color: #ccc;
                }
                & .topic-icons {
                    color: #cccccc81;
                    display: flex;
                    flex-direction: row;
                    padding-top: 30px;
                }

            }

            & .project-mockup {
                flex: 1;
                display: flex;
                text-align: center;
                align-items: center;
                max-width: 500px;

                & picture img {
                    width: 450px;
                    height: 250px;
                    border-radius: 12px;
                    box-shadow: rgba(255, 255, 255, 0.3) 0px 5px 10px, rgba(255, 255, 255, 0.22) 0px 5px 10px;
                }

            }
        }
        



    }
  


}

.reverse {
    flex-direction: row-reverse;
}