/* Resolution-based styling for the demo */
#visual-indicator {
  transition: all 0.3s ease;
}

@media (min-resolution: 1dppx) and (max-resolution: 1.5dppx) {
  #visual-indicator {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
  }
  #visual-indicator #indicator-text::after {
    content: " 1x";
  }
}

@media (min-resolution: 1.5dppx) and (max-resolution: 2.5dppx) {
  #visual-indicator {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #212529 !important;
  }
  #visual-indicator #indicator-text::after {
    content: " 2x";
  }
}

@media (min-resolution: 2.5dppx) {
  #visual-indicator {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
  }
  #visual-indicator #indicator-text::after {
    content: " 3x+";
  }
}