body 
    {
      font-family: sans-serif;
      margin: 0;
      padding: 1rem;
      background: #f4f4f4;
      color: #333;
    }
      
    .container {
      display: flex;
      justify-content: center;
    }

    .random {
      text-align: center;
      margin-bottom: 1.5rem;
    }

    .random button {
      border: none;
      padding: 0.75rem .075rem;
      font-size: 1rem;
      border-radius: 8px;
      cursor: pointer;
    }

    #random-name-display {
      margin-top: 1rem;
      font-weight: bold;
      font-size: 1.25rem;
      color: #444;
    }

    .container iframe {
      max-width: 100%;
      width: 100%;
      max-width: 600px; /* You can adjust this for your form */
    }

    .suggestions h2 {
     text-align: center;
     font-size: 2.5rem;
    } 

    .suggestions h3 {
     text-align: center;
     font-size: 1rem;
     font-style: italic;
    } 

     
    .centered-list {
      display: flex;
      justify-content: center;        /* center the ul container */
    }

    .suggestions ul li {
      margin-bottom: 3px; /* tiny gap */
    }

    .suggestions ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;              /* center the list */
      width: max-content;          /* shrink to fit the content width */
      text-align: left;            /* keep each line aligned properly */
    }