body {
      margin: 0;
     /* overflow: hidden; */
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: center;
      height: 100vh;
    }
    #palette {
      display: grid;
      width:200px;
     /* flex-direction: row;
      wrap: wrap;
      gap: 5px;
      padding: 10px;
      background: #f0f0f0;
      z-index: 2; */
    }
       #palette button {
      width: 30px;
      height: 30px;
      border: 1px solid black;
      cursor: pointer;
      
    }
    #palette button:hover {
      opacity: 2;
    }
    .ponta {
        display:flex;
        flex-direction: row;
        gap: 5px;
    }
    .ponta1{
    	width:10px;
    	background: black;
    	border-radius:50%;
    }
     .ponta2{
     
    	width:20px;
    	background: black;
    	border-radius:50%;
    }
    .zoom {
        display:flex;
        flex-direction: row;
        gap:5px;
    }
    #controls {
      width: 300px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 10px;
      background: #fff;
      position: relative;
      z-index: 3;
    }
    #canvas-container {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 70vw;
      max-width: 900px;
      height: 100vh;
      background: white;
      border: 1px solid black;
      margin-top: 10px;
      z-index: 1;
    }
    canvas {
      background: transparent;
      image-rendering: pixelated;
      width: 80%;
      height: 100%;
    }