body {
  margin: 0;
  height: 100vh;        /* full viewport height */
  display: flex;
  justify-content: center;  /* horizontal centre */
  align-items: center;       /* vertical centre */
  background-image: url('wall-texture-background.jpg');
  background-size: cover;       /* or use contain / repeat depending on tile */
  background-repeat: repeat;    /* if tileable and you want repetition */
  background-position: center;
  background-color: #f9f9f9;    /* fallback colour matching your page */
}

.canvas-wrapper {
  display: inline-block;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0px 10px 30px rgba(0,0,0,0.2);  /* outer only */
}

.canvas-wrapper canvas {
  display: block;
  box-shadow: inset 0px 0px 15px rgba(0,0,0,0.15);
}

.art-plaque {

  border-radius: 5px;
  font-family: sans-serif;
  font-size: 0.9rem;
  color: #333;
  background: #f1f1f1;
  padding: 7px 12px;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.15);
  max-width: 300px;
}
/* On wider screens: plaque to the right of canvas */
@media (min-width: 600px) {
  .canvas-plaquewrap {
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }
  .art-plaque {
    margin: 30% 0 0 20px;
  }
}

/* On mobile: plaque under the canvas */
@media (max-width: 599px) {
  .art-plaque {
    margin-top: 12px;
    text-align: center;
  }
}