body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}

    body {
      margin: 0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;

      /* IMPORTANT: allow children to use full width */
      align-items: stretch;

      font-family: Arial, sans-serif;
      background-color: rgba(0, 0, 0, 0.5);
          }

    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
    #game {
      display: grid;
      grid-template-columns: repeat(3, 100px);
      grid-template-rows: repeat(3, 100px);
      gap: 5px;
    }
    .cell {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100px;
      height: 100px;
      background-color: #fff;
      border: 2px solid #000;
      font-size: 2em;
      cursor: pointer;
    }
    .cell.disabled {
      pointer-events: none;
    }
    #message {
      margin-top: 20px;
      font-size: 1.5em;
      text-align: center;
    }
    #play-again {
      margin-top: 20px;
      padding: 10px 20px;
      font-size: 1em;
      cursor: pointer;
      background-color: green;
      color: white;
    }
    header {
      text-align: center;
      width: 100%;
      position: static;
      top: 0;
      left: 0;
      z-index: 10; /* Ensures it's on top of other content */
      margin-top: 0; /* Ensures no extra space at the top */
      padding-top: 0; /* Adjust padding if needed */
    }
    .hidden {
      visibility: hidden;
    }
    
    @keyframes rainbow-cycle {
      0%   { color: red; }
      16%  { color: orange; }
      32%  { color: yellow; }
      48%  { color: green; }
      64%  { color: blue; }
      80%  { color: indigo; }
      100% { color: violet; }
    }

    #rainbow-title span {
      display: inline-block;
      animation: rainbow-cycle 2s infinite;
      animation-delay: calc(var(--i) * 150ms);
    }

    .w3-tag {
      color: white;
    }

    header h1 {
      font-weight: bold;
    }

    .word-space {
      margin: 0 5px; /* Adjust space as needed */
    }

    .jigsaw-wrap{
      width:100%;
      display:flex;
      justify-content:center;   /* horizontal center */
      padding: 20px 12px;
    }

    .jigsaw-iframe{
      width: 100%;
      max-width: 1100px;        /* adjust to taste */
      height: 725px;
      max-height: 90vh;
      border: 2px solid #888;
      border-radius: 12px;
      display:block;
    }