body{
    background: url("background.jpeg");
    background-size: cover;
    background-position: center;
    
    font-family: Georgia, 'Times New Roman', Times, serif;
}
h1{
    border: 10px solid ;
    border-radius: 40px;
    background-color: #ffe6fc;

    max-width: 250px;
    margin: 2rem auto;
    padding: 2rem;
    text-align: center;
    margin-top: 30px;
    font-size: 50px;
    font-weight: 600;
    font-family:Georgia, 'Times New Roman', Times, serif;
    color: pink;
    text-shadow: 4px 4px 4px white;

}
.project{
    border: 8px solid #ffe6fc;
    border-radius: 15px;
    color: white;
    background-color: pink;
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    text-shadow: 2px 2px 4px gray;
}
.logo{
    height: 50%;
    width:70%;
    display: flex;
    margin: 10% auto 0;
    box-sizing: border-box;
}
.image-box{
    margin: 0 1%;
    flex-grow: 1;
    flex-basis: 0;
    transition: 1s;
    
}
.image-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 1s;
}
.image-box:hover{
    flex-basis: 60%;
}
.active{
    flex-basis: 100%;
}
.logo:hover .active{
    flex-basis: 0;
}
.image-box:nth-child(1):hover{
    flex-basis: 70%;
}