@media (min-width: 700px) {
    .project_intro_wide {
        white-space: pre;
        text-align: center;
        line-height: 0.9;
        position: relative;
    }
}

@media (min-width: 700px) {
    .project_intro_narrow {
        white-space: pre;
        text-align: center;
        line-height: 0.9;
        font-size: 0pt;
        position: relative;
    }
}

@media (max-width: 699px) {
    .project_intro_wide {
        white-space: pre;
        text-align: center;
        line-height: 0.9;
        font-size: 0pt;
        position: relative;
    }
}

@media (max-width: 699px) {
    .project_intro_narrow {
        white-space: pre;
        text-align: center;
        line-height: 0.9;
        position: relative;
    }
}

.typewriter {
    width: 9ch; /* Set a fixed width for the animation duration */
    animation: typing 1.5s steps(40, end), blink-caret .75s step-end infinite, hide-caret 0s 6s forwards;
}

@keyframes typing {
    from { width: 0; }
    to { width: 9ch; }
}


.project_container {
    margin: auto;
    justify-content: space-between; 
    padding-top: 50px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row; 
    align-items: center; 
    width: 80%;
    align-items: flex-start;
    
}

.project_body {
    flex-direction: column;    
    align-items: center;         
    max-width: 450px;               
    margin-left: auto;
    margin-right: auto;
    padding: 25px;
    
}

.project_image {
    border-radius: 25px;
    transition: transform 0.3s ease;
    width: 100%;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    
}

.project_image:hover {
    transform: scale(0.9); 
    box-shadow: 0 15px 34px rgba(0, 0, 0, 0.3); /* Dynamic shadow on hover */
    cursor: pointer;
}


.project_caption {
    text-align: center;
    margin-top: 5px;
    cursor: pointer;
  }