Untitled Snippet

body {

    font-family: Arial, sans-serif;

    text-align: center;

    margin: 20px;

    background-color: #f9f9f9;

    color: #333;

  }

  h1 {

    color: #4a90e2;

  }

  #controls {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

  }

  #controls input,

  #controls button {

    padding: 10px;

    font-size: 16px;

    border: 1px solid #ccc;

    border-radius: 5px;

  }

  #controls input[type="color"] {

    padding: 0;

  }

  #controls button {

    background-color: #4a90e2;

    color: white;

    border: none;

    cursor: pointer;

    transition: background-color 0.3s ease;

  }

  #controls button:hover {

    background-color: #357ab8;

  }

  #canvasContainer {

    margin: 20px auto;

    position: relative;

    width: 800px;

    height: 600px;

  }

  #canvas {

    border: 1px solid #ccc;

    background-color: white;

  }

  #description {

    width: 80%;

    margin: 20px auto;

  }

  #description table {

    width: 100%;

    border-collapse: collapse;

    margin: 10px 0;

  }

  #description th,

  #description td {

    border: 1px solid #ddd;

    padding: 10px;

    text-align: center;

  }

  #description th {

    background-color: #4a90e2;

    color: white;

  }