.square {
  /*--bs-bg-opacity: 0.6;*/
  position: relative;
  width: 2.99vw;
  height: 2.99vw;
}

.square-drawing-area {
  --bs-border-opacity: 0;
  aspect-ratio: 1/1;
  width: 2.9vw;
  background-clip: padding-box;
  /* Center the drawing area*/
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.user-path {
  background-color:RGBA(var(--bs-warning-rgb),var(--bs-bg-opacity,1))!important;
}

.exit-path {
  background-color:RGBA(var(--bs-success-rgb),var(--bs-bg-opacity,1))!important;
}

.exit-door {
  background-color:RGBA(var(--bs-success-rgb),var(--bs-bg-opacity,1))!important;
}

.player {
  background-color:RGBA(var(--bs-danger-rgb),var(--bs-bg-opacity,1))!important;
}

.secret-exit-path {
  background-color: transparent !important;
}

/* SM : Custom small screens */
@media (min-width: 400px) {
  .square {
    width: 2.49vw;
    height: 2.49vw;
  }
  .square-drawing-area {
    width: 2.4vw;
  }
}

/* MD : Medium screens */
@media (min-width: 576px) {
  .square {
    width: 1.99vw;
    height: 1.99vw;
  }
  .square-drawing-area {
    width: 1.9vw;
  }
}

/* LG : Large screens */
@media (min-width: 768px) {
  .square {
    width: 1.49vw;
    height: 1.49vw;
  }
  .square-drawing-area {
    width: 1.4vw;
  }
}

/* XL : Extra large screens */
@media (min-width: 992px) {
  .square {
    width: 0.99vw;
    height: 0.99vw;
  }
  .square-drawing-area {
    width: 0.9vw;
  }
}

/* XXL : Extra extra large screens */
@media (min-width: 1200px) {
  
}

@media (min-width: 1400px) {
  
}

@media (min-width: 1700px) {
  
}

@media (min-width: 2000px) {
  
}