.personal-projects
{
    margin-left: 15vw;
    margin-right: 15vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-content: center;
    align-items: center;
}

.personal-projects .title
{
    margin-top: 5vh;
    margin-bottom: 5vh;
}

.personal-projects .title h1
{
    text-align: center;
}

.personal-projects .content
{
    margin-top: 5vh;
    margin-bottom: 5vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

.personal-projects .content .project
{
    margin: 1vh 1vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    background-color: antiquewhite;
}

.personal-projects .content .project .project-title
{
    margin-top: 2vh;
    margin-bottom: 2vh;
}

.personal-projects .content .project h1
{
    font-size: 30px;
    text-align: center;
    color: rgb(30, 30, 30);
}

.personal-projects .content .project .project-content
{
    margin-top: 1vh;
    margin-bottom: 1vh;
}

.personal-projects .content .project .project-content img
{
    width: 250px;
    height: 250px;
    margin: 1vh 1vw;
}

.personal-projects .content .project .divider
{
    width: 80%;
    border-top: 3px solid rgb(30, 30, 30);
}

@media (orientation: portrait)
{
    .personal-projects .title h1
    {
        font-size: 5vw;
    }

    .personal-projects .content .project
    {
        flex: 20vw 0 0;
        border-radius: 2vw;
    }
}

@media (orientation: landscape)
{
    .personal-projects .title h1
    {
        font-size: 5vh;
    }

    .personal-projects .content .project
    {
        flex: 20vh 0 0;
        border-radius: 2vh;
    }
}