body{
     background-color:#fbf8e0;
     background-image: url("ocean.jpg");
     background-repeat:no-repeat;
     background-size:cover;
     background-position: center;
     background-attachment: fixed;
     height: 100vh;
     margin: 0; 
}
.box{
    max-width: 1000px;
    margin: 120px 120px 400px 300px;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: 250px minmax(0,1fr);
}
header{
    border: 1px whitesmoke solid;
    border-radius: 0%;
    grid-row: 1/2;
    grid-column: 2/3;
    background-color:#39d4f7;
    text-align: center;
    color:azure;
}
aside{
     border: 1px whitesmoke solid;
     border-radius: 0%;
     grid-row: 2/3;
     grid-column: 1/2;
     height: max-content;
     background-image: url("water.gif");
     text-align: center;
}
main{
     border: 1px whitesmoke solid;
     border-radius: 0%;
     grid-row: 2/3;
     grid-column: 2/3;
     height: 400px;
     background-image:url("https://i.pinimg.com/736x/3c/1b/11/3c1b11fe453290be7cc9a5bddfb26af2.jpg");
     background-size:cover;
     background-position: center;
     background-repeat:no-repeat;
     background-attachment: local;
     text-align: center;
     overflow-y: scroll;
     scrollbar-color: rgb(36, 119, 235) #f1f1f1;
     scrollbar-width: thin; 
}
.gallery-image div{
                 width: 25%;
                 margin: 5px;
                 border: 5px  rgb(8, 193, 255) solid;
                 box-sizing: border-box;
                 width: calc(25% - 10px);
                 position: relative;
                 overflow: hidden;
}
.gallery-image div img{
                     width: 100%;
                     height: 100%;
                     object-fit: cover;
                     transition: transform 0.5s ease;
}
.gallery-image div:hover img{
       transform: scale(1.35) rotate(10deg);
}
.gallery-image{
            display: flex;
            flex-wrap: wrap;
           transition: transform 0.5s ease;
}
.gallery-image div span{
                     position: absolute;
                     bottom: 15px;
                     left: 0;
                     width: 100%;
                     box-sizing: border-box;
                     background: white;
                     color: rgb(8, 2, 44);
                     text-align: center;
                     padding: 5px 10px;
                     font-size: 20px;
                     opacity: 0;
                     transform: translateY(100px);
}
.gallery-image div:hover span{
     opacity: 1;
     transform:none;

}