/*Mobile orientation*/
@media (max-aspect-ratio: 3/4) {
    .projectPage {
        display: none;
        position: relative;
        margin-right: 5vw;

        height: 60vh;
        width: 100%;
        flex-direction: column;

        transition: opacity 1s;
    }
    .projectTitleWrapper {
        position: relative;
        height: 2vh;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .projectImageWrapperMain{
        display: flex;
        flex-direction: column-reverse;
    }
    .projectImageWrapper{
        display: flex;
        flex-direction: column;
    }

    .projectImage{
        max-width: 100%;
        width: auto;
    }
}

/*Desktop orientation*/
@media (min-aspect-ratio: 3/4) {
    .projectPage {
        display: none;
        position: relative;
        margin-right: 1%;

        height: 70vh;
        width: 100%;
        flex-direction: column;

        transition: opacity 1s;
    }
    .projectTitleWrapper {
        position: relative;
        height: 5vh;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .projectImageWrapperMain{
        display: flex;
        flex-direction: row;
        height: auto;
    }
    .projectImageWrapper{
        display: flex;
        flex-direction: row-reverse;
        height: auto;
    }

    .projectImageCaption{
        margin-left: 5vw;
    }

    .projectImage{
        display: block;
        max-width: 30vw;
        width: auto;
        height: auto;
    }
}

.projectContentWrapper {
    margin-top: 2vh;
    height: auto;

    overflow-x: hidden;
    overflow-y: scroll;
}

.projectTitle {
    max-width: 40vw;
    overflow-wrap: break-word;
}

.projectDate {
    position: relative;
    font-size: 1rem;
    margin-right: 5%;
    padding-top: 0.75rem;

    text-align: right;
}

.projectLink {
    text-decoration: underline;
}