<div id="main">
  <div class="image-container">
    <img src="https://cdn.pixabay.com/photo/2012/05/07/04/39/dog-47957_1280.png"  id="my-image" width=" 450px" height="320px">
    
  </div>
  
  
  <div class="controls">
    
    <button class="btn" id="drop"> Drop Shadow</button>
    
    <button class="btn" id="drop-2"> Drop Shadow 2</button>
    
    <button class="btn" id="reset"> Reset</button>
    
  </div>
  
 
</div>

#main{
  display: flex;
  justify-content: space-around;
  background-color: lightblue;
  height: 650px;
  width: 750px;
}

.image-container{
  width: 550px;
  height: 500px;
 /* background-color: lightgray; */
  margin: 10px;
}

.controls{
  width: 200px;
  height: auto; 
  padding: 25px;
}

  button.btn{
  height: 50px;
  width: 185px;
  padding: 10px;
  border-radius: 15px;
  font-family: system-ui;
  font-size: 15px;
  color: #6E7EDF;
  background-color: #9EA3BC;
  margin: 10px;
}
button.btn:hover{
  opacity: 0.8;
  box-shadow: 3px 5px 3px #99A2D5;
}

.drop{
  filter: drop-shadow(60px 45px 10px #C29B62);
  
}

.drop-2{
  filter: drop-shadow(-40px -20px 5px #D7AE73);
  
}

let myImage = document.getElementById('my-image');

let dropper1 = document.getElementById('drop');

let dropper2 = document.getElementById('drop-2');

let resetImage = document.getElementById('reset');


dropper1.addEventListener('click', firstDrop);

dropper2.addEventListener('click', secondDrop);

resetImage.addEventListener('click', reset);


function reset(){
  myImage.className = '';
  
}

function firstDrop(){
  myImage.className = 'drop';
}

function secondDrop(){
  myImage.className ='drop-2';
}