body { font-family: 'Open Sans', sans-serif; }
  .custom-button { background: #7c3aed; color: white; border-radius: 8px; padding: 8px 24px; }
  .custom-input { border: 2px solid #ccc; border-radius: 8px; padding: 8px; }
  .neon-preview { color: #60a5fa; font-size: 3rem; position: relative; }
  .neon-size {
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    color: #000;
    font-size: 0.75rem;
    z-index: 1; /* Ensure that the size indicator appears on top */
}

  .neon-height { position: absolute; top: 50%; right: -1rem; transform: translateY(-50%); color: white; font-size: 0.75rem; writing-mode: vertical-rl; }
  .font-selector { cursor: pointer; padding: 8px; border-radius: 9999px; }
  .font-selector.selected { background-color: #9ca3af; }
  .color-selector { cursor: pointer; width: 30px; height: 30px; border-radius: 9999px; display: inline-block; margin-right: 8px; }
  .color-selector.selected { border: 3px solid #000; }
  .neon-container { min-height: 200px; } /* Adjust the minimum height of the preview container */
  
  @font-face {
    font-family: 'Rocket';
    src: url('https://neon.gullwingdesign.com/fonts/Rocket.ttf') format('truetype');
  }
  @font-face {
    font-family: 'LoveNeon';
    src: url('https://neon.gullwingdesign.com/fonts/LoveNeon.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Avante';
    src: url('https://neon.gullwingdesign.com/fonts/Avante.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Sorrento';
    src: url('https://neon.gullwingdesign.com/fonts/Sorrento.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Royalty';
    src: url('https://neon.gullwingdesign.com/fonts/Royalty.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Bellview';
    src: url('https://neon.gullwingdesign.com/fonts/Bellview.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Amsterdam';
    src: url('https://neon.gullwingdesign.com/fonts/Amsterdam.ttf') format('truetype');
  }
  @font-face {
    font-family: 'LoveNote';
    src: url('https://neon.gullwingdesign.com/fonts/LoveNote.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Freespirit';
    src: url('https://neon.gullwingdesign.com/fonts/Freespirit.ttf') format('truetype');
  }
  @font-face {
    font-family: 'ClassicType';
    src: url('https://neon.gullwingdesign.com/fonts/ClassicType.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Nevada';
    src: url('https://neon.gullwingdesign.com/fonts/Nevada.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Bayview';
    src: url('https://neon.gullwingdesign.com/fonts/Bayview.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Waikiki';
    src: url('https://neon.gullwingdesign.com/fonts/Waikiki.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Freehand';
    src: url('https://neon.gullwingdesign.com/fonts/Freehand.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Austin';
    src: url('https://neon.gullwingdesign.com/fonts/Austin.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Photogenic';
    src: url('https://neon.gullwingdesign.com/fonts/Photogenic.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Buttercup';
    src: url('https://neon.gullwingdesign.com/fonts/Buttercup.ttf') format('truetype');
  }
  @font-face {
    font-family: 'SciFi';
    src: url('https://neon.gullwingdesign.com/fonts/SciFi.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Alexa';
    src: url('https://neon.gullwingdesign.com/fonts/Alexa.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Northshore';
    src: url('https://neon.gullwingdesign.com/fonts/Northshore.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Monaco';
    src: url('https://neon.gullwingdesign.com/fonts/Monaco.ttf') format('truetype');
  }
  @font-face {
    font-family: 'NeoTokyo';
    src: url('https://neon.gullwingdesign.com/fonts/NeoTokyo.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Amanda';
    src: url('https://neon.gullwingdesign.com/fonts/Amanda.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Beachfront';
    src: url('https://neon.gullwingdesign.com/fonts/Beachfront.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Mayfair';
    src: url('https://neon.gullwingdesign.com/fonts/Mayfair.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Signature';
    src: url('https://neon.gullwingdesign.com/fonts/Signature.ttf') format('truetype');
  }
  @font-face {
    font-family: 'NeonGlow';
    src: url('https://neon.gullwingdesign.com/fonts/NeonGlow.ttf') format('truetype');
  }
  @font-face {
    font-family: 'NewCursive';
    src: url('https://neon.gullwingdesign.com/fonts/NewCursive.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Greenworld';
    src: url('https://neon.gullwingdesign.com/fonts/Greenworld.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Marquee';
    src: url('https://neon.gullwingdesign.com/fonts/Marquee.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Vintage';
    src: url('https://neon.gullwingdesign.com/fonts/Vintage.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Neontrace';
    src: url('https://neon.gullwingdesign.com/fonts/Neontrace.ttf') format('truetype');
  }
  @font-face {
    font-family: 'WildScript';
    src: url('https://neon.gullwingdesign.com/fonts/WildScript.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Melbourne';
    src: url('https://neon.gullwingdesign.com/fonts/Melbourne.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Venetian';
    src: url('https://neon.gullwingdesign.com/fonts/Venetian.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Chelsea';
    src: url('https://neon.gullwingdesign.com/fonts/Chelsea.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Neonscript';
    src: url('https://neon.gullwingdesign.com/fonts/Neonscript.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Barcelona';
    src: url('https://neon.gullwingdesign.com/fonts/Barcelona.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Typewriter';
    src: url('https://neon.gullwingdesign.com/fonts/Typewriter.ttf') format('truetype');
  }
  @font-face {
    font-family: 'NeonLite';
    src: url('https://neon.gullwingdesign.com/fonts/NeonLite.ttf') format('truetype');
  }