*
{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
body
{
    background-color: rgb(51, 96, 110);
}
h1{
    text-align: center;
    margin-top: 20px;
    font-size: 40px;
    color: white;
}
.gallary
{
    height: 80%;
    width: 100%;
    display: flex;
    margin: 5% auto 0;
    box-sizing: border-box;
}
.image-box
{
    margin: 0 1%;
    flex-grow: 1;
    flex-basis: 0;
    transition: 0.5s;
}
.image-box img
{
    width: 100%;
    height: 600px;
    object-fit: cover;
    transition: 0.5s;
    cursor: pointer;
}

.image-box:hover
{
    flex-basis: 50%;
}
.active
{
    flex-basis: 50%;
}
.gallary:hover .active
{
    flex-basis: 0;
}
.image-box:nth-child(1):hover
{
    flex-basis: 50%;
}

body::-webkit-scrollbar
{
    right: 0;
}