/* --- General Body and Font Styles --- */
        body {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
          background-color: #212121; /* Default background color */
          color: #ffffff;
          margin: 0;
          padding: 0;
          /* Smooth transition for background color changes */
          transition: background-color 0.5s ease;
      }

      /* --- Main Content Container --- */
      .canvas {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          min-height: 100vh;
          text-align: center;
          padding: 20px;
          box-sizing: border-box;
      }

      /* --- Navigation Bar --- */
      nav {
          position: absolute;
          top: 20px;
          right: 30px;
      }
      nav a {
          color: #fff;
          text-decoration: none;
          font-weight: 500;
          padding: 8px 16px;
          border: 2px solid #fff;
          border-radius: 20px;
          transition: all 0.3s ease;
      }
      nav a:hover {
          background-color: #fff;
          color: #212121;
      }

      /* --- Typography --- */
      h1 {
          font-size: 3rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 2px;
          margin-bottom: 2rem;
          padding: 15px 30px;
          border: 3px solid #fff;
          border-radius: 10px;
          text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      }

      h2 {
          font-size: 1.5rem;
          font-weight: 300;
          margin-top: 2.5rem;
          max-width: 600px;
      }
      h2 span {
          display: block;
          font-size: 1rem;
          margin-top: 10px;
          opacity: 0.8;
      }

      /* --- Color Switcher Buttons --- */
      .boxes {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 25px; /* Space between color swatches */
      }

      .button {
          width: 60px;
          height: 60px;
          border-radius: 50%; /* Makes the buttons circular */
          border: 4px solid #fff;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
          cursor: pointer;
          display: inline-block;
          transition: transform 0.2s ease-in-out, box-shadow 0.2s ease;
      }

      .button:hover {
          transform: scale(1.15) translateY(-5px); /* Pop-out effect on hover */
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
      }
      
      /* --- Specific Colors for Each Button --- */
      #grey {
          background-color: #808080;
      }
      #white {
          background-color: #ffffff;
      }
      #blue {
          background-color: #2b6cb0; /* A more pleasant shade of blue */
      }
      #yellow {
          background-color: #f6e05e; /* A softer, modern yellow */
      }