.dropArea {
  position: relative;
  top:40%;
  width:100%;
  height:30%;
  background-color: green;
}
.box {
    width: calc(var(--margin)*2.5);
    height: calc(var(--margin)*3);
    bottom: 15%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.box:nth-child(1){
  width: calc(var(--margin)*3.5);
    height: calc(var(--margin)*4);
}
  .box:nth-child(2){
    width: calc(var(--margin)*3.5);
    height: calc(var(--margin)*4);
    left:30%;
  }
  .box:nth-child(3){
    left:50%;
  }
  .box:nth-child(4){
    left:70%;
  }

  #drop-1,#drop-2,#drop-3,#drop-4{
    width: calc(var(--margin)*2.5);
    height: calc(var(--margin)*3);
    top: 10%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    filter: brightness(0) invert(1);
    opacity: 0.7;
  }
  #drop-1{
    width: calc(var(--margin)*3.5);
    height: calc(var(--margin)*4);
    margin-left: -7%;
    margin-top: 30%;
    background-image: url(../assets/drag-1.png);
  }
  #drop-2{
    width: calc(var(--margin)*3.5);
    height: calc(var(--margin)*4);
    margin-right: -1%;
    margin-top: 21%;
    background-image: url(../assets/drag-2.png);
  }
  #drop-3{
    margin-top: 35%;
    margin-left: 1%;
    background-image: url(../assets/drag-3.png);
  }
  #drop-4{
    margin-left: 3%;
    margin-top: 29%;
    background-image: url(../assets/drag-4.png);
  }
  #mainDragAndDrop{
    flex-direction: row;
  }
  #drag-1{
    left:calc(var(--margin)*2.5);
    background-image: url(../assets/drag-1.png);
  }
  #drag-2{
    left:calc(var(--margin)*2.5*2.7);
    background-image: url(../assets/drag-2.png);
  }
  #drag-3{
    left:calc(var(--margin)*2.5*4.4);
    background-image: url(../assets/drag-3.png);
  }
  #drag-4{
    left:calc(var(--margin)*2.5*6);
    background-image: url(../assets/drag-4.png);
  }
  #alert{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #alert > div:nth-child(2){
    width: 80%;
    height: 8%;
    margin-bottom: -115%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  #alert > div:nth-child(1){
    width: calc(var(--margin)*8.5);
    height: calc(var(--margin)*8.5);
    border-radius: calc(var(--margin)*8.5);
    background-color: #ffffff59;
    margin-left: -20%;
    margin-bottom: -115%;
    z-index: 1;
  }