.title{
    font-size:2rem;
    text-align: center;

}
main{
    padding:1px 0;

}
.grid-container{
    padding:5px;
    overflow: scroll;
    width:100%;
}
.menu-img,.side-img{
    width:100%;
    object-fit: cover;
    border-radius:10px;
}
.project-intro{
    display:flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color:bisque;
    border-radius:10px;
    padding:1em;
}
.project-intro p{
    font-size:0.9rem;
}
.project-intro h2{
    margin:0;
    
}
.intro-section{
    margin-bottom:1em;
}
.project-details h2{
    font-size:2rem;
    text-align: center;
}
.project-detail h3{
    font-size:1.5rem;
}
.project-details{
    padding:0 0.5em;
    margin-bottom:1em;
}
.youtube-link{ 
    color:black;
    display:inline-block;
    padding:1em 2em;
    margin:0 auto;
    border-radius:200px;
}
.youtube-link:hover{
    text-decoration: underline;
    background:yellow;
}
.footer-container.java-project{
    background-color:#243116;
}
.social-icon.work-page{
    color:white;
}

/* zoom effect */
@media(min-width:768px){
    .menu-img{
        grid-column:span 2;
        grid-row:span 2;
    }
    .project-intro{
        display:flex;
        flex-direction: row;
        align-items: center;
        text-align: center;
        justify-content: space-between;
        background-color:rgb(252, 242, 228);
        border-radius:10px;
        padding:1em;
    }
    .intro-section{
        width:100%;
    }
   
}
@media(min-width:1280px){
    *{
        font-size: 20px;
    }
    .menu-img{
        grid-row:span 2/3;
        grid-column:span 2/4;
        width:100%;
        object-position:0% 50%;
    }
    .side-img:hover {
        transform:scale(1.5);
        transition:transform 1s ease-in-out;
      }
}