.title{
    font-size: 50px;

}
.box1{
   
    padding:10px;
    display: flex;
    flex-direction:row-reverse;
    gap:20px;
    justify-content: space-around;
  

}
#green-mt{
    border: dashed 2px;
    mix-blend-mode:multiply;
    width:750px;
}
.box2{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content:center;
    align-items: center;
    gap:60px;
    padding:40px;
   
}
.heading, .music{
    font-size: 30px;
}
.rocks{
    position:absolute;
    width:210px;
    max-width: 100%;
}

#rock4{
    width:280px;
        top:30%;
        left:70%;
}
#rock1{
    width:180px;
    top:40%;
    left:30%;
}
#rock2{
    width:180px;
    top:60%;
    left:10%;
}
#rock3{
    width:180px;
    top:70%;
    left:50%;
}
#rock5{
    width:180px;
    top:70%;
    left:80%;
}
#rock6{
    width:180px;
    top:20%;
    left:40%;
}
#rock7{
    width:180px;
    top:30%;
    left:10%;
}

.music{
    padding:10%;
}

@media only screen and (max-width: 768px) {
    #green-mt{
        width:100%;
    }
    .title{
        font-size: 30px;
    }
    .heading, .music{
        font-size:30px;
    }
    .box1{
        display:flex;
        flex-direction:column;
    }
    .box2{
        display:grid;
        grid-template-columns: 1fr 1fr ;
        align-items:center;

    }
  }