@import 
url('https://fonts.googleapis.com/css?family=Fredericka+the+Great&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  
  margin: 0;

}
.btn {
  position: absolute;
  left: 94px;
  top: 194px;
  z-index: 1;
  background-image: url("btn.png");
  height: 35px;
  width: 117px;
}
body{
  height: 250px !important;
  width: 300px !important;
  align-items: center;
  
  display: flex;
  /* background-image: url("Background.png"); */
}

.wrapper{
  display:flex;
  justify-content:center;
  height: 250px !important;
  width: 300px !important;
  background-image: url("Background.png");
  cursor:grab;
}
.box {
      width: 22px;
    height: 20px;
  margin: 10px;
  padding: 15px;
  /* border: 5px black dashed; */
  background-image: url("./Plate.png");
}
#drag{
  width:50px;
  height:50px;
  /* background: #F44336; */
  /* border-radius:100%; */
  cursor:grab;
}

.plate{
  background-image: url(plate.png);
  background-size: contain;
  /* background-color: #eeeff5; */
  width: 54px;
  height: 54px;
  margin-bottom: 4px;
}
.plate1{

  background-size: contain;
  /* background-color: #eeeff5; */
  width: 54px;
  height: 54px;
}


#bread {
  width: 123px;
  height: 119px;

  margin-top: 91px;
  margin-left: 24px;
  background-image: url(Bati.png);
  /* background-image: url(http://www.movingpixelsdesign.com/codepen/bread.png); */
}
.col-3 {width: 25%;}

.row {
  display: flex;
  width: 100%
}

.row::after {
  /* display: block;*/
    clear: both;
     content: "";
        }
div#bread img {
          display: none;
      }