.main{
    display: flex;
    padding: 20px;
}

#img{
    transition-duration: 0.8s;
}

#img:hover{
    transform: scale(1.1);
}

#div1{
    border-radius: 10px;
    margin: 10px;
    padding: 20px;
    background-color: antiquewhite;
    transition-duration: 0.8s;
    
}

body{
    background-color:rgb(204, 230, 253);
}

#div1:hover{
    background-color: rgb(215, 240, 231);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#d1{
    padding-top: 10px;
}
#div2{
    border-radius: 10px;
    margin: 10px;
    padding: 20px;
    transition-duration: 0.8s;
    background-color:bisque;
}

#div2:hover{
    background-color:azure;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#div3{
    border-radius: 10px;
    margin: 10px;
    padding: 20px;
    transition-duration: 0.8s;
    background-color:rgb(215, 240, 231) ;
}

#div3:hover{
    
    background-color:antiquewhite;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


#div4{
    border-radius: 10px;
    margin: 10px;
    padding: 20px;
    transition-duration: 0.8s;
    background-color:azure;
}

#div4:hover{
    background-color:bisque;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}