/* General styles */
a { color:#5D5D9E; } 
a:visited { color:#5D5D9E; } 
a:active { color:#5C615E; } 
a:hover { color:#B2B3B4; } 

html, body { min-height: 100%; background-color: #e8e8e8; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; }

/* Styling for links */
a.wspf2ae41b { color:#0000FF; text-decoration: underline; font-style: italic; font-size: 12pt; }
a.wspf2ae41b:visited { color:#800080; text-decoration: underline; }
a.wspf2ae41b:active { color:#8018CB; text-decoration: underline; }
a.wspf2ae41b:hover { color:#8080FF; text-decoration: underline; }

/* Project Container */
.projects-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Ensures two projects per row */
    gap: 20px;
    padding: 20px;
}

/* Each project item takes 48% of the width (2 per row) */
.project-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* Aligns text block to the top-right of the GIF */
    width: 48%;
}

/* Gif is larger and anchored to the left */
.project-gif {
    width: 40%;  /* Increased from 30% */
    flex-shrink: 0;
}

.project-gif img {
    width: 100%;
    height: auto;
    display: block;
}

/* Text block now sits from the top-right corner of the GIF */
.project-info {
    width: 60%;
    padding-left: 15px;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Ensures text starts from the top */
}

/* Ensure the "Visualiser" link uses the correct font and italic style */
.project-link a {
    font-style: italic;
    font-size: 12pt;
    font-family: Arial, Helvetica, sans-serif;
    color: #0000FF;
    text-decoration: underline;
}

@media only screen and (max-width: 550px) { 
    #menu_38b56572 .mobileEntry { display: block; } 
    #menu_38b56572 .normalEntry { display: none; } 
    #menu_38b56572_menualignmentwrapper { width:36px; left: calc(50% - 18px); }
}

/* Responsive Design for Mobile */
@media only screen and (max-width: 600px) {
    .projects-container {
        flex-direction: column;
        align-items: center;
    }

    .project-item {
        flex-direction: column;
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .project-gif {
        width: 100%;
    }

    .project-info {
        width: 100%;
        text-align: left;
        padding-top: 10px;
    }
}