.Problem {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%);
  width: calc(100% - 15px);
  height: calc(100% - 15px);
  background-color: white;
  background-size: cover;
  box-shadow: 
    0 0 0 5px #333333,   /* Inner dark grey layer */
    0 0 0 10px #777777,  /* Middle medium grey layer */
    0 0 0 15px #bbbbbb;
  image-rendering: pixelated;
  overflow-y: scroll;
}
.Problem-text {
    transform-origin: top left;
    transform: scale(1);
}

@media (max-width: 299px) {
  .Problem-text {
    transform: scale(0.2); /* Start with scale 0.2 for very small screens */
  }
}

/* For screens between 300px and 399px */
@media (min-width: 300px) and (max-width: 399px) {
  .Problem-text {
    transform: scale(0.4); /* Increase scale slightly */
  }
}

/* For screens between 400px and 499px */
@media (min-width: 400px) and (max-width: 499px) {
  .Problem-text {
    transform: scale(0.6); /* Increase scale further */
  }
}

/* For screens between 500px and 599px */
@media (min-width: 500px) and (max-width: 599px) {
  .Problem-text {
    transform: scale(0.8); /* Increase scale */
  }
}

/* For screens between 600px and 799px */
@media (min-width: 600px) and (max-width: 799px) {
  .Problem-text {
    transform: scale(1); /* Set scale to 1 for medium screens */
  }
}

/* For screens between 800px and 999px */
@media (min-width: 800px) and (max-width: 999px) {
  .Problem-text {
    transform: scale(1.2); /* Larger scale */
  }
}

/* For screens between 1000px and 1060px */
@media (min-width: 1000px) and (max-width: 1060px) {
  .Problem-text {
    transform: scale(1); /* Scale remains at 1 for this range */
  }
}

/* For ideal screen size (1061px) */
@media (min-width: 1061px) and (max-width: 1200px) {
  .Problem-text {
    transform: scale(1.5); /* Default scale for ideal size */
  }
}

/* For larger screens (greater than 1200px) */
@media (min-width: 1201px) {
  .Problem-text {
    transform: scale(2); /* Scale up for larger screens */
  }
}