/* stage cfg */
.drag, .drop {
  width: calc(var(--margin)*4);
  height: calc(var(--margin)*5);
}
.drop {
  filter: brightness(0) invert(1);
  opacity: 0.7;
}
.drop:nth-child(2){ animation-delay: .2s; }
.drop:nth-child(2){ animation-delay: .3s; }
.drop:nth-child(2){ animation-delay: .4s; }

/* drop elements boat */
.section:nth-child(2) > div:nth-child(3) > div:nth-child(2) > .drop:nth-child(1){
  margin-top: 95%;
  margin-left:10%;
  background-image: url(../assets/drag-boat-1.png);
}
.section:nth-child(2) > div:nth-child(3) > div:nth-child(2)  > .drop:nth-child(2){
  margin-top: 55%;
  margin-left:-50%;
  background-image: url(../assets/drag-boat-2.png);
}
.section:nth-child(2) > div:nth-child(3) > div:nth-child(2)  > .drop:nth-child(3){
  margin-top: 0%;
  margin-left:-35%;
  background-image: url(../assets/drag-boat-3.png);
}
.section:nth-child(2) > div:nth-child(3) > div:nth-child(2)  > .drop:nth-child(4){
  margin-top: 70%;
  margin-left:-25%;
  background-image: url(../assets/drag-boat-4.png);
}
/* drop elements car */
.section:nth-child(3) > div:nth-child(3) > div:nth-child(2) > .drop:nth-child(1){
  margin-top: 83%;
  margin-left: -44%;
  background-image: url(../assets/drag-car-1.png);
}
.section:nth-child(3) > div:nth-child(3) > div:nth-child(2)  > .drop:nth-child(2){
  margin-top: 112%;
  margin-left: 47%;
  background-image: url(../assets/drag-car-2.png);
  z-index: 1;
}
.section:nth-child(3) > div:nth-child(3) > div:nth-child(2)  > .drop:nth-child(3){
  margin-top: 113%;
  margin-left: -12%;
  background-image: url(../assets/drag-car-3.png);
}
.section:nth-child(3) > div:nth-child(3) > div:nth-child(2)  > .drop:nth-child(4){
  margin-top: 85%;
  margin-left: 8%;
  background-image: url(../assets/drag-car-4.png);
}

/* drag elements */
.drag-bar{
  background-color: white;
  width:85%;
  border-radius: calc(var(--margin)*3);
  height:12%;
  filter: drop-shadow(6px 8px 45px #05000069);
  z-index: -2;
}
.drag-bar, .section:nth-child(2) > div:nth-child(3) > div:nth-child(3)  > .drag, .section:nth-child(3) > div:nth-child(3) > div:nth-child(3)  > .drag{
  margin-top: -63%;
}
/* drag boat */
.section:nth-child(2) > div:nth-child(3) > div:nth-child(3)  > .drag:nth-child(1){
  margin-left: -57%;
  background-image: url(../assets/drag-boat-1.png);
}
.section:nth-child(2) > div:nth-child(3) > div:nth-child(3)  > .drag:nth-child(2){
  margin-left: -20%;
  background-image: url(../assets/drag-boat-2.png);
}
.section:nth-child(2) > div:nth-child(3) > div:nth-child(3)  > .drag:nth-child(3){
  margin-left: 20%;
  background-image: url(../assets/drag-boat-3.png);
}
.section:nth-child(2) > div:nth-child(3) > div:nth-child(3)  > .drag:nth-child(4){
  margin-left: 58%;
  background-image: url(../assets/drag-boat-4.png);
}
/* drag car */
.section:nth-child(3) > div:nth-child(3) > div:nth-child(3)  > .drag:nth-child(1){
  margin-left: -57%;
  background-image: url(../assets/drag-car-1.png);
}
.section:nth-child(3) > div:nth-child(3) > div:nth-child(3)  > .drag:nth-child(2){
  margin-left: -20%;
  background-image: url(../assets/drag-car-2.png);
}
.section:nth-child(3) > div:nth-child(3) > div:nth-child(3)  > .drag:nth-child(3){
  margin-left: 20%;
  background-image: url(../assets/drag-car-3.png);
}
.section:nth-child(3) > div:nth-child(3) > div:nth-child(3)  > .drag:nth-child(4){
  margin-left: 58%;
  background-image: url(../assets/drag-car-4.png);
}

/* game over */
.section:nth-child(2)>div:nth-child(1)>div:nth-child(1), .section:nth-child(3)>div:nth-child(1)>div:nth-child(1) {
  width: 70%;
  height: 50%;
  background-image: url(../assets/txt-game-over.png);
  margin-top: -20%;
  z-index: -1;
}

/* graphic elements boat */
.section:nth-child(2)>div:nth-child(2)>div:nth-child(1) {
  background-image: url(../assets/boat.png);
  width: 80%;
  margin-top: 70%;
}
/* graphic elements car */
.section:nth-child(3)>div:nth-child(2)>div:nth-child(1) {
  background-image: url(../assets/car.png);
  width: 84%;
  margin-top: 27%;
}
.section:nth-child(2)>div:nth-child(2)>div:nth-child(2) {
  background-image: url(../assets/barbie.png);
  width: 42%;
  right: 0;
  margin-top: 24%;
  margin-right: -6%;
  z-index: 1;
}
 .section:nth-child(3)>div:nth-child(2)>div:nth-child(2) {
  background-image: url(../assets/barbie.png);
  width: 42%;
  right: 0;
  margin-top: 54%;
  margin-right: -6%;
  z-index: 1;
}
.section:nth-child(2)>div:nth-child(2)>div:nth-child(3){
  background-image: url(../assets/dog.png);
  width: 19%;
  right: 5%;
  margin-top: 58%;
  z-index: 1;
}
.section:nth-child(3)>div:nth-child(2)>div:nth-child(3) {
  background-image: url(../assets/dog.png);
  width: 19%;
  right: 5%;
  margin-top: 97%;
  z-index: 1;
}
.section:nth-child(2)>div:nth-child(2)>div:nth-child(4), .section:nth-child(3)>div:nth-child(2)>div:nth-child(4) {
  background-image: url(../assets/txt-co-spakujesz.png);
  width: 60%;
  height:17%;
  top:4%;
}