*{
    margin: 0;
}

.body {
    background-image: url(wall.jpg);
    background-size: 100%;
    background-repeat: no-repeat; 
    overflow-y:scroll;
}
.test {
    display: flex;
    flex-direction: column;
    width: 100px;height: 100px;
}
.parent{
    width: 100vw; 
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr  ;
    padding: 5px;
    gap: 5px;  
    place-content: center;
}
.parent div{
  color: rgb(10, 0, 44);
  padding: 10px;
  font-size: 30px;
  text-align: center;
  border-radius: 5px;
}
.block1{
    object-fit: contain;
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 7;
}
.block2{
    grid-row-start: 2;
    grid-row-end: 7;
    grid-column-start: 8;
    grid-column-end: 12;
}
.block3{
    grid-row-start: 1;
    grid-row-end: 7;
    grid-column-start: 5;
    grid-column-end: 7;
}
.block4{
    grid-row-start: 8;
    grid-row-end: 12;
    grid-column-start: 3;
    grid-column-end: 6;
      
}
.block5{
    grid-row-start: 7;
    grid-row-end: 12;
    grid-column-start: 7;
    grid-column-end: 11;
}

#anim {

                cursor: pointer;
            
                transition: background-color 0.3s ease, transform 0.3s ease;
                }

                #anim:hover {
                transform: scale(1.05); 
                }

                #anim:active {
                transform: translateY(2px);
                } 

#wrapper .text {
    position:relative;
    bottom:10px;
    visibility:hidden;
    opacity: 0; 
    transition: opacity 0.3s ease;
}

#wrapper:hover .text {
    visibility:visible;
    opacity: 1;
    transition: opacity 0.3s ease;
}