/* General Projects Page ----------------------------------------------------------------------- */

/* List of all projects */
.project-links, .release-logs {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    padding: 0;
    overflow: hidden;
}

/* Sub-element for list of projects */
.project-links ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* An individual project */
.project {
    position: relative;
    width: 100vw;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 100%;
    background-position: center;
    margin: 3% 0;
    transition: background-size 0.3s ease;
}

/* When hovered over, a project's background image should enlarge. */
.project:hover { background-size: 120%; }

/* Default title text of a project. */
.project h2 { min-width: 50vw; }

/* Background Image for Project Leo. */
#project-leo { background-image: linear-gradient(rgba(5, 18, 70, 0.7), rgba(59, 4, 70, 0.7)), url(../../images/screenshots/PL_SS_5.png); }

.page-body p { margin-top: 3%; }

/* Title Image. Substitutes for an h1 title */
.title { max-width: 50%; }

a { text-decoration: none; }

/* Desktop UI ---------------------------------------------------------------------------------- */
@media(min-width: 701px) {
    
    /* Title Image. Substitutes for an h2 title. */
    .project-links img { width: 50%; }
    
    /* An individual project. */
    .project { padding: 8% 0%; }
    
    /* Default title text of a project. */
    .project-links h2 {
        color: white;
        font-size: 4.36vw;
        margin: 2%;
    }  

    .orb#blue {
        width: 60%;
        opacity: 0.6;
        bottom: 53vh;
        left: 50vw;

        animation: orb-pulse 10s linear infinite;
    }

    .orb#purple {
        width: 60%;
        opacity: 0.75;
        top: 1vh;
        left: 1vw;

        animation: orb-pulse 18s linear infinite;
    }

    .orb#pink {
        width: 40%;
        opacity: 0.6;
        top: 55vh;
        left: 62vw;

        animation: orb-pulse 14s linear infinite;
    }
}

/* Mobile UI ----------------------------------------------------------------------------------- */

@media(max-width: 700px) {

    /* Title image. Substitutes for an h2 title. */
    .project-links img { width: 90%; }

    /* Default title text of a project. */
    .project-links h2 {
        color: white;
        font-size: 36px;
        line-height: 120%;
    }

    /* li container for a project. */
    .project-links li { padding: 15% 2%; }

    .release-logs h2 { font-size: 36px; }  
}