html, body {
  padding: 0;
  margin: 0;
  
}
p {
  font-size: larger;
}

canvas {
justify-content: center;    /* Horizontal center */
align-items: center;        /* Vertical center */
display: flex;
}

#inside {
display: flex;              /* Enable flexbox */
justify-content: center;    /* Horizontal center */
align-items: center;        /* Vertical center */
height: 100vh;              /* Full viewport height */
background: #d8d2d2;        /* Light background to show contrast */
}

.txtBox {
/* Set the total box size (width + height) */
  margin-left: 30px;
    width: 80%;
    height: fit-content;

    /* Ensure width/height include padding and border */
    box-sizing: border-box;
    /* Add visual styling */
    padding: 10px;           /* Space between text and border */
    border: 2px solid #333;  /* Rectangle border */
    background-color: #f8f8f8;
    border-radius: 4px;      /* Optional: small rounding */
    overflow: auto;          /* Handle long text safely */
}


.clr {
  margin-left: 30px;
  margin-top: 30px;
}

#canvas-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

pre {
      background: #f4f4f4;
      padding: 12px;
      border-radius: 6px;
      overflow-x: auto;
      border: 1px solid #ddd;
  }
  code {
      font-family: Consolas, monospace;
      font-size: 14px;
  }