body{
  background-color: #bdf5cb;
  margin:0;
  padding:0;
}
.mycanvas{
  height: 510px;
  width: 350px;
  margin:auto;
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}
.toaster{
  background-color: #fa38b9;
  height: 90px;
  width: 120px;
  position: relative;
  top:210px;
  left:125px;
  border-radius: 20px 25px 0 0;
}
.cover{
  background-color: #fd9edd;
  height: 90px;
  width: 120px;
  border-radius: 20px 25px 0 0;
  position: relative;
  right: 30px;
}
.b1, .b2{
  background-color: #737373;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: relative;
}
.b1{
  top:20px;
  left:50px;
}
.b2{
  top:25px;
  left:50px;
}
.b3{
  background-color: #159230;
  height: 16px;
  width: 16px;
  position: relative;
  top:30px;
  left:46.5px;
  border-radius: 50%;
  border:2px solid white;
}
.shine{
  position: relative;
  height: 24px;
  width: 15px;
  background-color: #b8c4ca;
  border-radius: 50%;
  position: relative;
  transform: rotate(30deg);
  bottom:35px;
  left:7px;
}
.slot1{
  position: relative;
  background-color: #666666;
  height: 43px; 
  width: 8px; 
  border-radius: 15px;
  bottom: 65px;
  left: 101px;
}
.slot2{
  position: relative;
  background-color: #333333;
  height: 41px; 
  width: 5px; 
  border-radius: 15px;
  bottom: 107px;
  left: 101px;
}
.handle1{
  position: relative;
  background-color: white;
  height: 5px; 
  width: 20px; 
  top: 1.7px;
  left: 0.1px;
  animation: 6s move infinite;
}
@keyframes move{
  50%{
    transform: translateY(31px);
  }
}
.handle2{
  position: relative;
  background-color: #666666;
  height: 10px; 
  width: 18px; 
  border-radius: 5px;
  left: 7.5px;
  bottom: 2px;
}
.handle3{
  position: relative;
  background-color: #333333;
  height: 9.5px; 
  width: 8px;
  border-radius: 50%;
  bottom: 12px;
  left: 16.5px;
}
.base1{
  position: relative;
  background-color: #666666;
  height: 10px; 
  width: 128px; 
  border-radius: 15px;
  bottom: 102.1px;
  right: 33px;
}
.base2{
  position: relative;
  background-color: #333333;
  height: 10px; 
  width: 30px; 
  border-radius: 15px;
  bottom: 93px;
  left: 90px;
}
.l1,.l2,.l3,.l4{
  position: relative;
  background-color: #333333;
  height: 7px; 
  width: 8px; 
}
.l1{
  bottom: 103px;
  right: 20px;
}
.l2{
  bottom: 110px;
  left: 10px;
}
.l3{
  bottom: 117px;
  left: 80px;
}
.l4{
  bottom: 124px;
  left: 50px;
}
.toastl1{
  position: relative;
  background-color: #cc8800;
  height: 15px; 
  width: 59px; 
  border-radius: 15px;
  bottom: 255px;
  left: 24px;
  z-index: -1;
  animation: 6s toast infinite;
}
@keyframes toast{
  50%{
    transform: translateY(25px);
  }
  80%{
    transform: translateY(-26px);
  }
}
.toastl2{
  position: relative;
  background-color: #cc8800;
  height: 45px; 
  width: 52px; 
  top: 5px;
  left: 2.8px;
}
.toastu1{
  position: relative;
  background-color: #ffd480;
  height: 8px; 
  width: 51px; 
  border-radius: 15px;
  bottom: 41px;
  left: 3px;
}
.toastu2{
  position: relative;
  background-color: #ffd480;
  height: 35px; 
  width: 42px; 
  bottom: 41px;
  left: 7.3px;
}
.toastl3{
  position: relative;
  background-color: #cc8800;
  height: 15px; 
  width: 59px; 
  border-radius: 15px;
  bottom: 275px;
  right: 2px;
  z-index: -1;
  animation: 6s toastt infinite;
}
@keyframes toastt{
  50%{
    transform: translateY(27px);
  }
  87%{
    transform: translateY(-30px);
  }
}
.toastl4{
  position: relative;
  background-color: #cc8800;
  height: 45px; 
  width: 52px; 
  top: 5px;
  left: 2.8px;
}