body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevent scrolling */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f4f4f9;
}


.scratch-container  {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* This will make the container take up the full height of the viewport */
  }

  .center-me  {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* This will make the container take up the full height of the viewport */
  }
  

#textCanvas, #scratchCanvas {
    position: absolute;
    border: 2px solid #333;
}

.text-message {
    font-size: 3vw; /* 3% of viewport width */
  }
  
  @media (max-width: 768px) {
    .text-message {
      font-size: 4vw; /* Increase font size for smaller screens */
    }
  }