{"id":494,"date":"2026-03-15T00:00:15","date_gmt":"2026-03-15T00:00:15","guid":{"rendered":"https:\/\/onlinetexteditor.io\/?page_id=494"},"modified":"2026-04-06T06:28:33","modified_gmt":"2026-04-06T06:28:33","slug":"meme-text-generator","status":"publish","type":"page","link":"https:\/\/onlinetexteditor.io\/de\/meme-text-generator\/","title":{"rendered":"Meme Text Generator \u2013 Create Instantly"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; theme_builder_area=&#8221;post_content&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221;][et_pb_fullwidth_code _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; theme_builder_area=&#8221;post_content&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]<!-- START OF FILE Meme Text Generator -->\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n    .pg-tool-wrapper {\r\n        \/* TYPOGRAPHY - SYSTEM SAFEST & BOLD (Impact\/Arial Black vibe for memes) *\/\r\n        --primary-font: \"Impact\", \"Arial Black\", system-ui, -apple-system, sans-serif;\r\n        --body-font: \"Comic Sans MS\", \"Chalkboard SE\", \"Marker Felt\", sans-serif; \/* Playful meme font fallback *\/\r\n        \r\n        \/* THEME PALETTE - MEME CULTURE (DOGE YELLOW & DANK ORANGE\/RED) *\/\r\n        --theme-panel: rgba(20, 20, 22, 0.96);\r\n        --theme-border: rgba(255, 204, 0, 0.4); \r\n        \r\n        \/* MEME ACCENTS *\/\r\n        --meme-yellow: #ffcc00;\r\n        --meme-orange: #ff5722;\r\n        --meme-red: #ff0033;\r\n        --void-dark: #0f0f11;\r\n        --text-bright: #ffffff;\r\n        --text-muted: #a1a1aa;\r\n        \r\n        \/* GRADIENTS - MAINTAINING PREVIOUS MASTER BACKGROUND + NEW THEME *\/\r\n        --grad-master: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        --grad-meme: linear-gradient(135deg, #ffcc00 0%, #ff5722 100%);\r\n        --grad-shimmer: linear-gradient(90deg, transparent, rgba(255, 204, 0, 0.5), transparent);\r\n        --grad-dark: linear-gradient(180deg, rgba(25,25,30,0.9) 0%, rgba(15,15,18,0.98) 100%);\r\n        \r\n        \/* SHADOWS & GLOWS *\/\r\n        --glow-yellow: 0 0 20px rgba(255, 204, 0, 0.5);\r\n        --glow-orange: 0 0 20px rgba(255, 87, 34, 0.5);\r\n        --shadow-ui: 0 20px 50px rgba(0, 0, 0, 0.9);\r\n        --shadow-meme-text: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 0 4px 0 #000;\r\n        \r\n        --transition-ui: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        --transition-fast: all 0.2s ease;\r\n        \r\n        font-family: var(--primary-font);\r\n        color: var(--text-bright);\r\n        line-height: 1.5;\r\n        width: 100%;\r\n        overflow-x: hidden;\r\n        text-align: center; \r\n        \r\n        \/* MASTER BACKGROUND INSTRUCTION (MAINTAINED) *\/\r\n        background: var(--grad-master);\r\n        background-attachment: fixed;\r\n    }\r\n\r\n    .pg-tool-wrapper * { box-sizing: border-box; }\r\n\r\n    \/* SAFETY OVERRIDES - STRICT OVERRIDE FOR WORDPRESS *\/\r\n    .pg-container {\r\n        max-width: 1200px !important;\r\n        width: 100% !important;\r\n        margin: 0 auto !important;\r\n        padding: 40px 20px !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n    }\r\n\r\n    .pg-hero-content-wrapper {\r\n        z-index: 2;\r\n        padding-top: 20px;\r\n        width: 100%;\r\n    }\r\n\r\n    \/* TITLE STYLES - MEME BOLD TYPOGRAPHY *\/\r\n    .pg-main-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 3.5rem;\r\n        font-weight: 900; \r\n        line-height: 1.1;\r\n        margin: 0 auto 15px auto;\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        color: #fff;\r\n        text-shadow: var(--shadow-meme-text); \/* Classic meme white text black stroke *\/\r\n        max-width: 900px;\r\n        position: relative;\r\n        display: inline-block;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .pg-main-title:hover {\r\n        transform: scale(1.03) rotate(-1deg);\r\n        color: var(--meme-yellow);\r\n    }\r\n    \r\n    .pg-main-title::after {\r\n        content: '';\r\n        display: block;\r\n        width: 120px;\r\n        height: 6px;\r\n        background: var(--grad-meme);\r\n        margin: 25px auto 0;\r\n        box-shadow: var(--glow-yellow);\r\n        border-radius: 5px;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .pg-main-title:hover::after {\r\n        width: 250px;\r\n    }\r\n    \r\n    .pg-subtitle {\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 1.1rem;\r\n        color: rgba(255, 255, 255, 0.9);\r\n        max-width: 750px;\r\n        margin: 0 auto 35px auto;\r\n        padding: 0 10px;\r\n        font-weight: 600;\r\n        letter-spacing: 0.5px;\r\n        text-shadow: 0 2px 5px rgba(0,0,0,0.8);\r\n    }\r\n\r\n    \/* MAIN GENERATOR CARD *\/\r\n    .pg-generator-card {\r\n        background: var(--theme-panel);\r\n        border: 2px solid var(--theme-border); \r\n        border-top-width: 5px;\r\n        border-top-color: var(--meme-yellow);\r\n        width: 100%;\r\n        box-shadow: var(--shadow-ui), inset 0 0 30px rgba(0,0,0,0.5); \r\n        border-radius: 12px;\r\n        position: relative;\r\n        transform: translateY(0);\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .pg-generator-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 2px;\r\n        background: var(--grad-shimmer);\r\n        opacity: 0.5;\r\n        transition: opacity 0.3s ease;\r\n    }\r\n\r\n    \/* INTERLOCKING GRID LAYOUT *\/\r\n    .pg-controls-wrapper {\r\n        padding: 35px;\r\n        background: var(--grad-dark);\r\n        border-bottom: 3px solid #000;\r\n        display: grid;\r\n        grid-template-columns: 1.2fr 1fr;\r\n        grid-template-rows: auto auto;\r\n        gap: 25px;\r\n        align-items: stretch;\r\n    }\r\n\r\n    \/* ENHANCED INPUT SECTION (LEFT COLUMN, SPANS 2 ROWS) *\/\r\n    .pg-input-section {\r\n        grid-column: 1 \/ 2;\r\n        grid-row: 1 \/ 3;\r\n        display: flex;\r\n        flex-direction: column;\r\n        height: 100%;\r\n    }\r\n    \r\n    .pg-enhanced-input-wrapper {\r\n        background: rgba(10, 10, 15, 0.9);\r\n        border: 2px solid rgba(255, 204, 0, 0.3);\r\n        border-radius: 8px;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n        flex-grow: 1;\r\n        transition: var(--transition-ui);\r\n        box-shadow: inset 0 0 20px rgba(0,0,0,1);\r\n    }\r\n\r\n    .pg-enhanced-input-wrapper:focus-within {\r\n        border-color: var(--meme-yellow);\r\n        box-shadow: inset 0 0 30px rgba(255, 204, 0, 0.15), 0 0 15px rgba(255, 204, 0, 0.3);\r\n    }\r\n    \r\n    .pg-text-input {\r\n        width: 100% !important;\r\n        flex-grow: 1 !important;\r\n        min-height: 150px !important;\r\n        padding: 25px !important;\r\n        background: transparent !important;\r\n        border: none !important;\r\n        color: #fff !important;\r\n        font-family: var(--body-font) !important;\r\n        font-weight: bold !important;\r\n        font-size: 1.8rem !important;\r\n        outline: none !important;\r\n        text-align: left !important;\r\n        text-shadow: 2px 2px 0px #000;\r\n        \/* CRITICAL WRAP FIX *\/\r\n        white-space: pre-wrap !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: break-word !important;\r\n        resize: none;\r\n    }\r\n    \r\n    .pg-text-input::placeholder {\r\n        color: rgba(255, 204, 0, 0.4);\r\n        font-style: italic;\r\n    }\r\n\r\n    \/* TOOLBAR FOR COPY\/PASTE\/SELECT\/PRESETS *\/\r\n    .pg-input-toolbar {\r\n        display: flex;\r\n        justify-content: flex-start;\r\n        align-items: center;\r\n        flex-wrap: wrap;\r\n        gap: 10px;\r\n        background: rgba(15, 15, 20, 0.95);\r\n        padding: 12px 15px;\r\n        border-top: 1px dashed rgba(255, 204, 0, 0.3);\r\n    }\r\n\r\n    .pg-toolbar-btn {\r\n        background: rgba(255, 255, 255, 0.05);\r\n        color: var(--text-muted);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        padding: 8px 12px;\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 0.75rem;\r\n        font-weight: 700;\r\n        border-radius: 4px;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n    }\r\n\r\n    .pg-toolbar-btn i { transition: transform 0.2s ease; }\r\n\r\n    .pg-toolbar-btn:hover {\r\n        background: rgba(255, 204, 0, 0.15);\r\n        color: var(--meme-yellow);\r\n        border-color: var(--meme-yellow);\r\n        box-shadow: var(--glow-yellow);\r\n    }\r\n\r\n    .pg-toolbar-btn:hover i { transform: translateY(-2px) scale(1.1); }\r\n    .pg-toolbar-btn:active { transform: scale(0.95); }\r\n    \r\n    .pg-preset-select {\r\n        background: rgba(255, 87, 34, 0.15);\r\n        color: var(--meme-orange);\r\n        border: 1px solid rgba(255, 87, 34, 0.4);\r\n        padding: 8px 12px;\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 0.75rem;\r\n        font-weight: 800;\r\n        border-radius: 4px;\r\n        cursor: pointer;\r\n        outline: none;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        appearance: none;\r\n        flex-grow: 1;\r\n    }\r\n    \r\n    .pg-preset-select:hover, .pg-preset-select:focus {\r\n        background: var(--meme-orange);\r\n        color: #fff;\r\n        border-color: var(--meme-orange);\r\n        box-shadow: var(--glow-orange);\r\n    }\r\n    \r\n    .pg-preset-select option {\r\n        background: var(--void-dark);\r\n        color: #fff;\r\n    }\r\n\r\n    \/* CONTROLS SECTION (RIGHT COLUMN) *\/\r\n    .pg-panel-label {\r\n        display: flex;\r\n        align-items: center;\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 0.85rem;\r\n        font-weight: 800;\r\n        color: #fff;\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        margin-bottom: 12px;\r\n        text-shadow: 1px 1px 2px #000;\r\n    }\r\n    \r\n    .pg-panel-label i {\r\n        color: var(--meme-yellow);\r\n        margin-right: 8px;\r\n        font-size: 1.1rem;\r\n    }\r\n\r\n    .pg-grid-options {\r\n        display: grid;\r\n        gap: 12px;\r\n        grid-template-columns: repeat(2, 1fr);\r\n    }\r\n\r\n    .pg-option-btn {\r\n        background: rgba(25, 25, 30, 0.6);\r\n        border: 1px solid rgba(255, 255, 255, 0.05);\r\n        padding: 14px 8px;\r\n        color: var(--text-muted);\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 0.75rem;\r\n        font-weight: 700;\r\n        cursor: pointer;\r\n        border-radius: 6px;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 6px;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .pg-option-btn i {\r\n        font-size: 1.3rem;\r\n        transition: var(--transition-ui);\r\n    }\r\n\r\n    \/* MICRO-INTERACTIONS: Background wipe *\/\r\n    .pg-option-btn::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: -100%; width: 100%; height: 100%;\r\n        background: linear-gradient(90deg, transparent, rgba(255, 204, 0, 0.2), transparent);\r\n        transition: left 0.4s ease;\r\n        z-index: 0;\r\n    }\r\n\r\n    .pg-option-btn > * { position: relative; z-index: 1; }\r\n\r\n    .pg-option-btn:hover {\r\n        border-color: rgba(255, 204, 0, 0.4);\r\n        color: #fff;\r\n        transform: translateY(-2px);\r\n    }\r\n    \r\n    .pg-option-btn:hover::before { left: 100%; }\r\n\r\n    .pg-option-btn:hover i {\r\n        transform: scale(1.15) rotate(5deg);\r\n        color: var(--meme-yellow);\r\n    }\r\n\r\n    .pg-option-btn.active { \r\n        background: var(--void-dark);\r\n        color: #fff; \r\n        border-color: var(--meme-yellow);\r\n        box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 15px rgba(255, 204, 0, 0.2);\r\n    }\r\n    \r\n    .pg-option-btn.active i {\r\n        color: var(--meme-yellow);\r\n        text-shadow: var(--glow-yellow);\r\n    }\r\n\r\n    \/* RESULTS AREA - 1 CARD PER ROW REQUIRED *\/\r\n    .pg-results-area { \r\n        padding: 40px 30px; \r\n        position: relative; \r\n    }\r\n    \r\n    .pg-result-list {\r\n        display: grid;\r\n        grid-template-columns: 1fr; \/* STRICTLY 1 CARD PER ROW *\/\r\n        gap: 20px;\r\n        position: relative; \r\n        z-index: 2;\r\n    }\r\n\r\n    \/* MICRO-INTERACTION: Card Tilt & Border Glow *\/\r\n    .pg-result-card {\r\n        background: #0d0d0f;\r\n        border: 1px solid rgba(255, 204, 0, 0.15);\r\n        padding: 25px 35px;\r\n        transition: var(--transition-ui);\r\n        position: relative;\r\n        overflow: hidden;\r\n        border-radius: 10px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        min-height: 120px; \r\n        box-sizing: border-box;\r\n    }\r\n    \r\n    .pg-result-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 4px; height: 100%;\r\n        background: var(--grad-meme);\r\n        transition: width 0.2s ease, opacity 0.2s ease;\r\n        opacity: 0.5;\r\n    }\r\n    \r\n    .pg-result-card:hover {\r\n        transform: perspective(1000px) rotateX(1deg) rotateY(-1deg) translateY(-3px);\r\n        box-shadow: -5px 10px 30px rgba(0, 0, 0, 0.9), 0 0 15px rgba(255, 204, 0, 0.2);\r\n        border-color: rgba(255, 204, 0, 0.5);\r\n        background: #111114;\r\n        z-index: 10;\r\n    }\r\n    \r\n    .pg-result-card:hover::before { width: 6px; opacity: 1; }\r\n\r\n    \/* CARD HEADER & COPY ICON *\/\r\n    .pg-card-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        width: 100%;\r\n        margin-bottom: 15px;\r\n        border-bottom: 1px dashed rgba(255,255,255,0.1);\r\n        padding-bottom: 15px;\r\n    }\r\n    \r\n    .pg-card-title {\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 0.85rem;\r\n        font-weight: 800;\r\n        color: var(--text-muted);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1.5px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        transition: var(--transition-fast);\r\n    }\r\n    \r\n    .pg-card-title i {\r\n        color: var(--meme-orange);\r\n        font-size: 1.1rem;\r\n    }\r\n\r\n    .pg-result-card:hover .pg-card-title {\r\n        color: #fff;\r\n        letter-spacing: 2px;\r\n        text-shadow: var(--glow-orange);\r\n    }\r\n\r\n    \/* MANDATORY COPY ICON BUTTON - Icon Bounce *\/\r\n    .pg-card-copy-btn {\r\n        background: rgba(255, 204, 0, 0.1);\r\n        border: 1px solid rgba(255, 204, 0, 0.3);\r\n        color: var(--meme-yellow);\r\n        width: 40px;\r\n        height: 40px;\r\n        border-radius: 8px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        outline: none;\r\n        flex-shrink: 0;\r\n    }\r\n    \r\n    .pg-card-copy-btn i {\r\n        font-size: 1.2rem;\r\n        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    }\r\n    \r\n    .pg-card-copy-btn:hover {\r\n        background: var(--meme-yellow);\r\n        color: #000;\r\n        box-shadow: var(--glow-yellow);\r\n        transform: scale(1.05);\r\n    }\r\n    \r\n    .pg-card-copy-btn:hover i { transform: scale(1.2) translateY(-2px); }\r\n    .pg-card-copy-btn:active { transform: scale(0.95); }\r\n\r\n    \/* CRITICAL TEXT WRAP FIX *\/\r\n    .pg-card-preview {\r\n        font-size: 1.8rem;\r\n        color: #fff;\r\n        width: 100%;\r\n        text-align: center;\r\n        font-family: var(--body-font);\r\n        font-weight: bold;\r\n        position: relative;\r\n        z-index: 1;\r\n        padding: 10px 0; \r\n        text-shadow: 2px 2px 0px #000;\r\n        transition: var(--transition-fast);\r\n        \r\n        \/* THE FIX - Ensures all massive texts break properly *\/\r\n        white-space: pre-wrap !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: break-word !important;\r\n        box-sizing: border-box !important;\r\n    }\r\n    \r\n    .pg-result-card:hover .pg-card-preview {\r\n        color: #fff;\r\n        text-shadow: var(--shadow-meme-text);\r\n        transform: scale(1.01);\r\n    }\r\n\r\n    \/* LOAD MORE CTA - Pulse Ring *\/\r\n    .pg-btn-load {\r\n        background: transparent;\r\n        color: #fff;\r\n        border: 2px solid var(--meme-yellow);\r\n        padding: 18px 45px;\r\n        font-family: var(--primary-font);\r\n        font-weight: 900;\r\n        font-size: 1rem;\r\n        cursor: pointer;\r\n        margin-top: 40px;\r\n        text-transform: uppercase;\r\n        border-radius: 6px;\r\n        transition: var(--transition-fast);\r\n        position: relative;\r\n        z-index: 2;\r\n        letter-spacing: 2px;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        box-shadow: 0 5px 15px rgba(0,0,0,0.8);\r\n    }\r\n    \r\n    .pg-btn-load::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; right: 0; bottom: 0;\r\n        border-radius: 6px;\r\n        border: 2px solid var(--meme-yellow);\r\n        opacity: 0;\r\n        transition: all 0.4s ease;\r\n        z-index: -1;\r\n    }\r\n    \r\n    .pg-btn-load i { transition: transform 0.3s ease; }\r\n    \r\n    .pg-btn-load:hover { \r\n        background: rgba(255, 204, 0, 0.15); \r\n        box-shadow: var(--glow-yellow);\r\n        transform: translateY(-3px);\r\n        text-shadow: 0 0 8px var(--meme-yellow);\r\n    }\r\n    \r\n    .pg-btn-load:hover::before {\r\n        transform: scale(1.05, 1.2);\r\n        opacity: 1;\r\n        border-color: transparent;\r\n    }\r\n    \r\n    .pg-btn-load:hover i { transform: translateY(4px); }\r\n    .pg-btn-load:active { transform: translateY(0); }\r\n\r\n    \/* TOAST ALERT - Badge Bounce *\/\r\n    .pg-toast {\r\n        visibility: hidden;\r\n        background: #111;\r\n        color: #fff;\r\n        padding: 15px 30px;\r\n        position: fixed;\r\n        left: 50%;\r\n        bottom: 40px;\r\n        transform: translateX(-50%) translateY(20px);\r\n        font-family: system-ui, sans-serif;\r\n        font-weight: 800;\r\n        z-index: 10000;\r\n        border-radius: 8px;\r\n        border: 1px solid var(--meme-orange);\r\n        border-left: 5px solid var(--meme-orange);\r\n        text-transform: uppercase;\r\n        box-shadow: var(--shadow-ui), var(--glow-orange);\r\n        letter-spacing: 1px;\r\n        opacity: 0;\r\n        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n    }\r\n    \r\n    .pg-toast i { color: var(--meme-yellow); font-size: 1.2rem; }\r\n    \r\n    .pg-toast.show { \r\n        visibility: visible; \r\n        opacity: 1;\r\n        transform: translateX(-50%) translateY(0);\r\n    }\r\n\r\n    \/* RESPONSIVE DESIGN - STRICT ADHERENCE *\/\r\n    @media (max-width: 900px) {\r\n        .pg-main-title { font-size: 2.5rem; } \r\n        .pg-controls-wrapper { grid-template-columns: 1fr; grid-template-rows: auto; }\r\n        .pg-input-section { grid-column: 1 \/ -1; grid-row: auto; }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        .pg-container { padding: 30px 15px !important; }\r\n        .pg-results-area { padding: 30px 15px; }\r\n        \r\n        .pg-controls-wrapper { padding: 20px; gap: 20px; }\r\n        .pg-text-input { min-height: 100px !important; font-size: 1.4rem !important; }\r\n        \r\n        .pg-input-toolbar { justify-content: center; }\r\n        .pg-preset-select { max-width: 100%; }\r\n        \r\n        .pg-result-list { grid-template-columns: 1fr; gap: 15px; }\r\n        \r\n        .pg-option-btn { padding: 12px 8px; font-size: 0.7rem; }\r\n        .pg-option-btn i { font-size: 1.1rem; }\r\n        \r\n        .pg-btn-load { padding: 15px 30px; font-size: 0.9rem; width: 100%; justify-content: center; }\r\n        .pg-main-title { font-size: 2rem; }\r\n        .pg-subtitle { font-size: 0.9rem; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"pg-tool-wrapper\">\r\n    <div class=\"pg-container pg-hero-content-wrapper\">\r\n        <h1 class=\"pg-main-title\">Meme Text Generator - Create Instantly<\/h1>\r\n        <p class=\"pg-subtitle\">Turn your text into viral gold. From classic bold impact to sArCaStIc mOcKiNg, extruded 3D, and heavy emoji usage\u2014create readable, copy-safe internet culture typography.<\/p>\r\n        \r\n        <div class=\"pg-generator-card\">\r\n            <div class=\"pg-controls-wrapper\">\r\n                \r\n                <!-- LEFT COLUMN: INPUT SECTION -->\r\n                <div class=\"pg-input-section\">\r\n                    <div class=\"pg-panel-label\"><i class=\"fa-solid fa-comment-dots\"><\/i> Enter Caption Here<\/div>\r\n                    <div class=\"pg-enhanced-input-wrapper\">\r\n                        <textarea class=\"pg-text-input\" id=\"pgInputText\" placeholder=\"Nobody: \r\nAbsolutely nobody: \r\nMe using this generator:\"><\/textarea>\r\n                        \r\n                        <div class=\"pg-input-toolbar\">\r\n                            <button class=\"pg-toolbar-btn\" id=\"pgBtnPaste\"><i class=\"fa-solid fa-paste\"><\/i> Paste<\/button>\r\n                            <button class=\"pg-toolbar-btn\" id=\"pgBtnSelectAll\"><i class=\"fa-solid fa-object-group\"><\/i> Select<\/button>\r\n                            <button class=\"pg-toolbar-btn\" id=\"pgBtnCopy\"><i class=\"fa-solid fa-copy\"><\/i> Copy<\/button>\r\n                            \r\n                            <select class=\"pg-preset-select\" id=\"pgPresetSelect\">\r\n                                <option value=\"\" disabled selected>\u2728 Meme Presets<\/option>\r\n                                <option value=\"They did surgery on a grape\">They did surgery...<\/option>\r\n                                <option value=\"I am once again asking for your financial support\">I am once again...<\/option>\r\n                                <option value=\"Sir, this is a Wendy's\">Wendy's<\/option>\r\n                                <option value=\"You can't just make up text styles and expect people to laugh\">You can't just...<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <!-- RIGHT COLUMN: SETTINGS -->\r\n                <div>\r\n                    <div class=\"pg-panel-label\"><i class=\"fa-solid fa-masks-theater\"><\/i> Vibe Check (Mode)<\/div>\r\n                    <div class=\"pg-grid-options\">\r\n                        <button class=\"pg-option-btn mode-btn active\" data-val=\"Sarcastic\">\r\n                            <i class=\"fa-solid fa-face-rolling-eyes\"><\/i> sArCaStIc\r\n                        <\/button>\r\n                        <button class=\"pg-option-btn mode-btn\" data-val=\"Impact\">\r\n                            <i class=\"fa-solid fa-fire\"><\/i> IMPACT BOLD\r\n                        <\/button>\r\n                        <button class=\"pg-option-btn mode-btn\" data-val=\"Extrude\">\r\n                            <i class=\"fa-solid fa-cubes\"><\/i> 3D Extruded\r\n                        <\/button>\r\n                        <button class=\"pg-option-btn mode-btn\" data-val=\"Vaporwave\">\r\n                            <i class=\"fa-solid fa-water\"><\/i> V a p o r w a v e\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div>\r\n                    <div class=\"pg-panel-label\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i> Extra Seasoning (Decor)<\/div>\r\n                    <div class=\"pg-grid-options\">\r\n                        <button class=\"pg-option-btn style-btn active\" data-val=\"Base\">\r\n                            <i class=\"fa-solid fa-ban\"><\/i> No Add-ons\r\n                        <\/button>\r\n                        <button class=\"pg-option-btn style-btn\" data-val=\"Bify\">\r\n                            <i class=\"fa-solid fa-b\"><\/i> \ud83c\udd71\ufe0f-ify Text\r\n                        <\/button>\r\n                        <button class=\"pg-option-btn style-btn\" data-val=\"Clap\">\r\n                            <i class=\"fa-solid fa-hands-clapping\"><\/i> Clap \ud83d\udc4f Back\r\n                        <\/button>\r\n                        <button class=\"pg-option-btn style-btn\" data-val=\"UwU\">\r\n                            <i class=\"fa-solid fa-cat\"><\/i> UwU Speak\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"pg-results-area\">\r\n                <div class=\"pg-result-list\" id=\"pgResultList\"><\/div>\r\n                <!-- 6 ITEMS LOAD MORE -->\r\n                <button class=\"pg-btn-load\" id=\"pgLoadMoreBtn\"><span>Load More Dankness<\/span> <i class=\"fa-solid fa-arrow-down\"><\/i><\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div id=\"pgToast\" class=\"pg-toast\"><i class=\"fa-solid fa-check-double\"><\/i> Meme Copied Successfully<\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    const inputEl = document.getElementById('pgInputText');\r\n    const resultList = document.getElementById('pgResultList');\r\n    const loadMoreBtn = document.getElementById('pgLoadMoreBtn');\r\n    const toast = document.getElementById('pgToast');\r\n    \r\n    const btnPaste = document.getElementById('pgBtnPaste');\r\n    const btnSelectAll = document.getElementById('pgBtnSelectAll');\r\n    const btnCopy = document.getElementById('pgBtnCopy');\r\n    const presetSelect = document.getElementById('pgPresetSelect');\r\n\r\n    let currentMode = 'Sarcastic';\r\n    let currentStyle = 'Base';\r\n    let limit = 6; \r\n    const LOAD_INCREMENT = 6; \r\n\r\n    \/\/ Character mappings\r\n    const baseChars = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ\";\r\n    const wideText = \"\uff41\uff42\uff43\uff44\uff45\uff46\uff47\uff48\uff49\uff4a\uff4b\uff4c\uff4d\uff4e\uff4f\uff50\uff51\uff52\uff53\uff54\uff55\uff56\uff57\uff58\uff59\uff5a\uff21\uff22\uff23\uff24\uff25\uff26\uff27\uff28\uff29\uff2a\uff2b\uff2c\uff2d\uff2e\uff2f\uff30\uff31\uff32\uff33\uff34\uff35\uff36\uff37\uff38\uff39\uff3a\";\r\n\r\n    const rand = (max) => Math.floor(Math.random() * max);\r\n\r\n    \/\/ Generate 120 configurations with Actual Keyword Based Meme Text & Emojis\r\n    const generateConfigs = () => {\r\n        const templates = [];\r\n        const memeData = [\r\n            { word: 'Doge', emoji: '\ud83d\udc15' },\r\n            { word: 'Stonks', emoji: '\ud83d\udcc8' },\r\n            { word: 'Chad', emoji: '\ud83d\uddff' },\r\n            { word: 'Pepe', emoji: '\ud83d\udc38' },\r\n            { word: 'Sponge Mock', emoji: '\ud83e\uddfd' },\r\n            { word: 'Sus', emoji: '\ud83d\udcee' },\r\n            { word: 'Sigma Grindset', emoji: '\ud83d\udc3a' },\r\n            { word: 'Brain Rot', emoji: '\ud83e\udddf' },\r\n            { word: 'Based', emoji: '\ud83d\udc51' },\r\n            { word: 'Cursed Text', emoji: '\ud83d\udc80' },\r\n            { word: 'Deep Fried', emoji: '\ud83c\udf5f' },\r\n            { word: 'Ratio', emoji: '\u2696\ufe0f' },\r\n            { word: 'Copypasta', emoji: '\ud83c\udf5d' },\r\n            { word: 'Vibe Check', emoji: '\ud83c\udfcf' },\r\n            { word: 'Shitpost', emoji: '\ud83d\udca9' },\r\n            { word: 'Karen Energy', emoji: '\ud83d\udc71\u200d\u2640\ufe0f' },\r\n            { word: 'Boomer Take', emoji: '\ud83d\udc74' },\r\n            { word: 'Zoomer Slang', emoji: '\ud83c\udfa7' },\r\n            { word: 'Touch Grass', emoji: '\ud83c\udf31' },\r\n            { word: 'No Cap', emoji: '\ud83e\udde2' },\r\n            { word: 'Skill Issue', emoji: '\ud83c\udfae' },\r\n            { word: 'Let Him Cook', emoji: '\ud83c\udf73' },\r\n            { word: 'W Rizz', emoji: '\ud83d\udcab' },\r\n            { word: 'Side Eye', emoji: '\ud83d\ude12' },\r\n            { word: 'Big Brain', emoji: '\ud83e\udde0' }\r\n        ];\r\n        \r\n        for(let i=0; i<120; i++){\r\n            const meme = memeData[i % memeData.length];\r\n            templates.push({\r\n                id: `meme-${i}`,\r\n                name: `${meme.emoji} ${meme.word} v.${Math.floor(Math.random()*999)}`,\r\n                icon: ['face-grin-tears', 'skull', 'fire', 'bolt', 'hand-sparkles', 'clapperboard'][i % 6]\r\n            });\r\n        }\r\n        \/\/ Shuffle templates for dynamic feel every load\r\n        return templates.sort(() => Math.random() - 0.5);\r\n    };\r\n\r\n    const ALL_STYLES = generateConfigs();\r\n\r\n    \/\/ Text Transformation Logic\r\n    const transformLogic = (text, mode, style, variationIndex) => {\r\n        let result = text;\r\n        \r\n        \/\/ 1. STYLE\/DECORATORS FIRST\r\n        if (style === 'Bify') {\r\n            result = result.replace(\/[bB]\/g, '\ud83c\udd71\ufe0f');\r\n            if(variationIndex % 3 === 0) result = result.replace(\/[pP]\/g, '\ud83c\udd7f\ufe0f');\r\n        } \r\n        else if (style === 'Clap') {\r\n            \/\/ Replace spaces with clap emojis, ignoring multiple spaces\r\n            result = result.split(\/\\s+\/).join(' \ud83d\udc4f ');\r\n            if (result.length > 0 && !result.endsWith('\ud83d\udc4f')) result += ' \ud83d\udc4f';\r\n        }\r\n        else if (style === 'UwU') {\r\n            result = result.replace(\/[lr]\/g, 'w').replace(\/[LR]\/g, 'W');\r\n            \/\/ Randomly add faces at the end based on variation\r\n            const faces = [' (\u30fb`\u03c9\u00b4\u30fb)', ' ;;w;;', ' owo', ' UwU', ' >w<'];\r\n            if(variationIndex % 2 === 0) result += faces[variationIndex % faces.length];\r\n        }\r\n\r\n        \/\/ 2. MODES (Typography\/Case adjustments)\r\n        if (mode === 'Sarcastic') {\r\n            let toggle = true;\r\n            result = Array.from(result).map(c => {\r\n                if (\/[a-zA-Z]\/.test(c)) {\r\n                    let newChar = toggle ? c.toLowerCase() : c.toUpperCase();\r\n                    toggle = !toggle;\r\n                    return newChar;\r\n                }\r\n                return c;\r\n            }).join('');\r\n        } \r\n        else if (mode === 'Impact') {\r\n            result = result.toUpperCase();\r\n            \/\/ Add exclamation marks based on variation for intensity\r\n            if(variationIndex % 4 === 0 && !result.endsWith('!')) result += '!!';\r\n        }\r\n        else if (mode === 'Extrude') {\r\n            \/\/ Shadow blocks\r\n            const blocks = ['\u2593', '\u2592', '\u2591', '\u2588'];\r\n            const block = blocks[variationIndex % blocks.length];\r\n            \/\/ To make it readable, we make it uppercase first\r\n            result = Array.from(result.toUpperCase()).map(c => c !== ' ' && c !== '\\n' ? `${c}${block}` : c).join('');\r\n        }\r\n        else if (mode === 'Vaporwave') {\r\n            result = Array.from(result).map(c => {\r\n                const idx = baseChars.indexOf(c);\r\n                return idx !== -1 ? wideText[idx] : (c === ' ' ? '  ' : c);\r\n            }).join('');\r\n        }\r\n\r\n        return result;\r\n    };\r\n\r\n    const render = () => {\r\n        resultList.innerHTML = '';\r\n        let raw = inputEl.value || \"Nobody:\\nAbsolutely nobody:\\nMe using this generator:\";\r\n        \r\n        const displayList = ALL_STYLES.slice(0, limit);\r\n\r\n        displayList.forEach((s, idx) => {\r\n            const out = transformLogic(raw, currentMode, currentStyle, idx);\r\n            \r\n            const card = document.createElement('div');\r\n            card.className = 'pg-result-card';\r\n            \r\n            card.innerHTML = `\r\n                <div class=\"pg-card-header\">\r\n                    <div class=\"pg-card-title\">\r\n                        <i class=\"fa-solid fa-${s.icon}\"><\/i> \r\n                        ${s.name}\r\n                    <\/div>\r\n                    <button class=\"pg-card-copy-btn\" title=\"Copy Text\"><i class=\"fa-regular fa-copy\"><\/i><\/button>\r\n                <\/div>\r\n                <div class=\"pg-card-preview\">${out}<\/div>\r\n            `;\r\n            \r\n            const copyBtn = card.querySelector('.pg-card-copy-btn');\r\n            copyBtn.addEventListener('click', (e) => {\r\n                e.stopPropagation(); \r\n                navigator.clipboard.writeText(out);\r\n                \r\n                copyBtn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i>';\r\n                copyBtn.style.background = 'var(--meme-orange)';\r\n                copyBtn.style.borderColor = 'var(--meme-orange)';\r\n                copyBtn.style.color = '#fff';\r\n                \r\n                toast.classList.add('show');\r\n                \r\n                setTimeout(() => {\r\n                    copyBtn.innerHTML = '<i class=\"fa-regular fa-copy\"><\/i>';\r\n                    copyBtn.style.background = '';\r\n                    copyBtn.style.borderColor = '';\r\n                    copyBtn.style.color = '';\r\n                    toast.classList.remove('show');\r\n                }, 2000);\r\n            });\r\n            \r\n            resultList.appendChild(card);\r\n        });\r\n\r\n        loadMoreBtn.style.display = limit >= ALL_STYLES.length ? 'none' : 'inline-flex';\r\n        const remaining = Math.max(0, ALL_STYLES.length - limit);\r\n        if (remaining > 0) {\r\n            loadMoreBtn.querySelector('span').innerText = `Load More Dankness (${remaining})`;\r\n        }\r\n    };\r\n\r\n    \/\/ Toolbar Events\r\n    inputEl.addEventListener('input', render);\r\n    \r\n    btnPaste.addEventListener('click', async () => {\r\n        try {\r\n            const text = await navigator.clipboard.readText();\r\n            inputEl.value = text;\r\n            render();\r\n        } catch (err) {\r\n            alert('Unable to paste automatically. Please use Ctrl+V \/ Cmd+V.');\r\n        }\r\n    });\r\n\r\n    btnSelectAll.addEventListener('click', () => {\r\n        inputEl.select();\r\n    });\r\n\r\n    btnCopy.addEventListener('click', () => {\r\n        if(inputEl.value) {\r\n            navigator.clipboard.writeText(inputEl.value);\r\n            toast.querySelector('i').className = 'fa-solid fa-copy';\r\n            toast.querySelector('i').nextSibling.textContent = ' Source Copied';\r\n            toast.classList.add('show');\r\n            setTimeout(() => {\r\n                toast.classList.remove('show');\r\n                setTimeout(()=> {\r\n                    toast.querySelector('i').className = 'fa-solid fa-check-double';\r\n                    toast.querySelector('i').nextSibling.textContent = ' Meme Copied Successfully';\r\n                }, 400);\r\n            }, 2500);\r\n        }\r\n    });\r\n    \r\n    presetSelect.addEventListener('change', (e) => {\r\n        if(e.target.value) {\r\n            inputEl.value = e.target.value;\r\n            render();\r\n            e.target.selectedIndex = 0; \r\n        }\r\n    });\r\n    \r\n    loadMoreBtn.onclick = () => { \r\n        limit += LOAD_INCREMENT; \r\n        render(); \r\n    };\r\n\r\n    \/\/ Options UI Switchers\r\n    document.querySelectorAll('.mode-btn').forEach(btn => {\r\n        btn.onclick = () => {\r\n            document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active');\r\n            currentMode = btn.getAttribute('data-val');\r\n            limit = 6; \r\n            render(); \r\n        };\r\n    });\r\n\r\n    document.querySelectorAll('.style-btn').forEach(btn => {\r\n        btn.onclick = () => {\r\n            document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active');\r\n            currentStyle = btn.getAttribute('data-val');\r\n            limit = 6; \r\n            render();\r\n        };\r\n    });\r\n\r\n    render();\r\n});\r\n<\/script>\r\n<!-- END OF FILE Meme Text Generator -->\r\n\r\n<!-- <content section is starting -->\r\n\r\n\r\n<div>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n    \r\n\r\n\r\n\r\n<section class=\"mtg-section mtg-sec1\">\r\n        <div class=\"mtg-inner\">\r\n\t\r\n<\/div>\r\n\t<\/section>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<section class=\"mtg-section mtg-sec1\">\r\n        <div class=\"mtg-inner\">\r\n            <h2 class=\"mtg-heading\">What Makes This <span class=\"mtg-kw\">Meme Text Generator<\/span> Essential?<\/h2>\r\n            <p class=\"mtg-sub\">Discover why creators and casual users alike rely on our meme text generator to craft hilarious, perfectly formatted meme captions instantly \u2014 no design skills required.<\/p>\r\n            <div class=\"mtg-grid\">\r\n                <div class=\"mtg-card\">\r\n                    <div class=\"mtg-icon\" style=\"background:rgba(0,184,212,0.12);color:#00b8d4;\"><i class=\"fa-solid fa-font\"><\/i><\/div>\r\n                    <div class=\"mtg-card-title\">Classic Impact Font Built-In<\/div>\r\n                    <p class=\"mtg-card-desc\">Our meme text generator includes the iconic Impact font by default, ensuring your captions look exactly like traditional viral memes every single time.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <div class=\"mtg-icon\" style=\"background:rgba(234,0,255,0.12);color:#ea00ff;\"><i class=\"fa-solid fa-arrow-up-wide-short\"><\/i><\/div>\r\n                    <div class=\"mtg-card-title\">Top & Bottom Text Control<\/div>\r\n                    <p class=\"mtg-card-desc\">Easily position your text at the top, bottom, or both \u2014 our meme text generator automatically applies proper spacing, stroke, and alignment for readability.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <div class=\"mtg-icon\" style=\"background:rgba(255,145,0,0.12);color:#ff9100;\"><i class=\"fa-solid fa-palette\"><\/i><\/div>\r\n                    <div class=\"mtg-card-title\">Custom Colors & Stroke<\/div>\r\n                    <p class=\"mtg-card-desc\">Break the standard white-black mold. Change text color, outline thickness, and background tints to match your meme's exact vibe and tone.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <div class=\"mtg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-image\"><\/i><\/div>\r\n                    <div class=\"mtg-card-title\">Upload Any Image<\/div>\r\n                    <p class=\"mtg-card-desc\">Drop your own photos, screenshots, or trending templates into our meme text generator and instantly overlay perfectly formatted text on them.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <div class=\"mtg-icon\" style=\"background:rgba(244,67,54,0.12);color:#f44336;\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i><\/div>\r\n                    <div class=\"mtg-card-title\">Smart Auto-Formatting<\/div>\r\n                    <p class=\"mtg-card-desc\">Our meme text generator automatically wraps long captions, adjusts font size to fit the image, and keeps text perfectly centered without manual tweaking.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <div class=\"mtg-icon\" style=\"background:rgba(63,81,181,0.12);color:#3f51b5;\"><i class=\"fa-solid fa-download\"><\/i><\/div>\r\n                    <div class=\"mtg-card-title\">High-Quality Export<\/div>\r\n                    <p class=\"mtg-card-desc\">Download your finished memes in crisp PNG or JPEG format \u2014 optimized for social media compression so they stay sharp on every platform.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <section class=\"mtg-section mtg-sec2\">\r\n        <div class=\"mtg-inner\">\r\n            <h2 class=\"mtg-heading\">How to Create Viral Memes with Our <span class=\"mtg-kw\">Meme Text Generator<\/span>?<\/h2>\r\n            <p class=\"mtg-sub\">Crafting hilarious meme captions is incredibly straightforward. Follow these quick steps and have your shareable meme ready to post in under a minute.<\/p>\r\n            <div class=\"mtg-grid\">\r\n                <div class=\"mtg-card\">\r\n                    <span class=\"mtg-emoji\">\ud83d\uddbc\ufe0f<\/span>\r\n                    <div class=\"mtg-card-title\">Step 1: Pick or Upload Image<\/div>\r\n                    <p class=\"mtg-card-desc\">Choose a classic meme template from our library or upload your own custom image \u2014 our meme text generator accepts JPG, PNG, and WebP formats.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <span class=\"mtg-emoji\">\u2b06\ufe0f<\/span>\r\n                    <div class=\"mtg-card-title\">Step 2: Add Top Text<\/div>\r\n                    <p class=\"mtg-card-desc\">Type your setup or reaction line in the top text field \u2014 watch it instantly appear with classic bold styling and black outline on your meme.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <span class=\"mtg-emoji\">\u2b07\ufe0f<\/span>\r\n                    <div class=\"mtg-card-title\">Step 3: Add Bottom Text<\/div>\r\n                    <p class=\"mtg-card-desc\">Complete the joke with a punchline in the bottom text area \u2014 our meme text generator aligns and scales it perfectly for maximum comedic impact.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <span class=\"mtg-emoji\">\ud83c\udf9b\ufe0f<\/span>\r\n                    <div class=\"mtg-card-title\">Step 4: Adjust & Customize<\/div>\r\n                    <p class=\"mtg-card-desc\">Fine-tune font size, stroke width, or text alignment until your meme looks exactly right \u2014 all changes preview in real-time before you export.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <span class=\"mtg-emoji\">\ud83d\udc40<\/span>\r\n                    <div class=\"mtg-card-title\">Step 5: Preview & Perfect<\/div>\r\n                    <p class=\"mtg-card-desc\">Review your meme creation on different screen sizes using the built-in preview \u2014 ensure text stays readable and the punchline lands perfectly.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <span class=\"mtg-emoji\">\ud83d\udce4<\/span>\r\n                    <div class=\"mtg-card-title\">Step 6: Download & Share<\/div>\r\n                    <p class=\"mtg-card-desc\">Hit export to save your meme as a high-res image \u2014 ready to drop into group chats, social feeds, or forum threads instantly.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <section class=\"mtg-section mtg-sec3\">\r\n        <div class=\"mtg-inner\">\r\n            <h2 class=\"mtg-heading\">Where Can You Share Your <span class=\"mtg-kw\">Meme Text Generator<\/span> Creations?<\/h2>\r\n            <p class=\"mtg-sub\">Memes thrive on sharing. Here are the most popular platforms and communities where users post memes made with our generator to maximize laughs and engagement.<\/p>\r\n            <div class=\"mtg-grid\">\r\n                <div class=\"mtg-card\">\r\n                    <div class=\"mtg-icon\" style=\"background:rgba(255,69,0,0.12);color:#ff4500;\"><i class=\"fa-brands fa-reddit-alien\"><\/i><\/div>\r\n                    <div class=\"mtg-card-title\">Reddit Meme Communities<\/div>\r\n                    <p class=\"mtg-card-desc\">Dominate subreddits like r\/memes and r\/dankmemes \u2014 properly formatted meme text generated here meets Reddit's exact formatting standards for top posts.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <div class=\"mtg-icon\" style=\"background:rgba(29,161,242,0.12);color:#1da1f2;\"><i class=\"fa-brands fa-twitter\"><\/i><\/div>\r\n                    <div class=\"mtg-card-title\">Twitter\/X Timeline<\/div>\r\n                    <p class=\"mtg-card-desc\">Meme images with clean, readable text get significantly more retweets \u2014 our meme text generator outputs perfectly sized captions for X's algorithm.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <div class=\"mtg-icon\" style=\"background:rgba(225,48,108,0.12);color:#e1306c;\"><i class=\"fa-brands fa-instagram\"><\/i><\/div>\r\n                    <div class=\"mtg-card-title\">Instagram Feed & Stories<\/div>\r\n                    <p class=\"mtg-card-desc\">Share your memes in posts or stories to boost engagement \u2014 crisp text overlays look professional and keep viewers scrolling longer on your profile.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <div class=\"mtg-icon\" style=\"background:rgba(88,101,242,0.12);color:#5865f2;\"><i class=\"fa-brands fa-discord\"><\/i><\/div>\r\n                    <div class=\"mtg-card-title\">Discord Server Channels<\/div>\r\n                    <p class=\"mtg-card-desc\">Drop custom memes in meme-channels or general chats \u2014 community servers love original meme text that matches their inside jokes and culture.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <div class=\"mtg-icon\" style=\"background:rgba(0,200,83,0.12);color:#00c853;\"><i class=\"fa-solid fa-comments\"><\/i><\/div>\r\n                    <div class=\"mtg-card-title\">WhatsApp & Telegram Groups<\/div>\r\n                    <p class=\"mtg-card-desc\">Forward hilarious memes to family and friends \u2014 our meme text generator creates lightweight, fast-loading images that open instantly on mobile apps.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <div class=\"mtg-icon\" style=\"background:rgba(255,0,80,0.10);color:#ff0050;\"><i class=\"fa-brands fa-tiktok\"><\/i><\/div>\r\n                    <div class=\"mtg-card-title\">TikTok Slideshows<\/div>\r\n                    <p class=\"mtg-card-desc\">Use your generated memes in TikTok photo slideshows \u2014 trending meme formats with clear text consistently drive high watch time and follower growth.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <style>\r\n        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n        :root {\r\n            --mtg-text-dark: #000000;\r\n            --mtg-text-primary: #0a0a0a;\r\n            --mtg-text-muted: #1a1a1a;\r\n            --mtg-accent: #00b8d4;\r\n            --mtg-grad1: linear-gradient(135deg, #00b8d4, #ea00ff, #ff9100);\r\n            --mtg-grad2: linear-gradient(90deg, #667eea, #764ba2, #ffd700);\r\n            --mtg-shadow-hover: 0 12px 30px rgba(0, 184, 212, 0.16);\r\n            --mtg-shadow-hover2: 0 12px 40px rgba(118, 75, 162, 0.3);\r\n            --mtg-tr: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --mtg-ff: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n\r\n        .mtg-section {\r\n            width: 100%;\r\n            padding: clamp(48px, 8vw, 96px) 20px;\r\n            position: relative;\r\n            font-family: var(--mtg-ff);\r\n            color: var(--mtg-text-primary);\r\n            line-height: 1.6;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        .mtg-inner {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            width: 100%;\r\n        }\r\n\r\n        .mtg-heading {\r\n            font-family: var(--mtg-ff);\r\n            font-size: clamp(1.5rem, 4vw, 2.25rem);\r\n            font-weight: 800;\r\n            text-align: center;\r\n            color: var(--mtg-text-dark);\r\n            margin-bottom: clamp(8px, 1.5vw, 14px);\r\n            line-height: 1.2;\r\n            letter-spacing: -0.03em;\r\n        }\r\n\r\n        .mtg-kw {\r\n            color: var(--mtg-text-dark);\r\n            position: relative;\r\n        }\r\n\r\n        .mtg-kw::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -2px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: var(--mtg-grad1);\r\n            border-radius: 3px;\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        }\r\n\r\n        .mtg-section:hover .mtg-kw::after {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .mtg-sub {\r\n            font-family: var(--mtg-ff);\r\n            font-size: clamp(0.88rem, 1.8vw, 1.02rem);\r\n            font-weight: 400;\r\n            text-align: center;\r\n            color: #1a1a1a;\r\n            max-width: 660px;\r\n            margin: 0 auto clamp(32px, 5vw, 56px);\r\n            line-height: 1.7;\r\n        }\r\n\r\n        .mtg-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: clamp(16px, 2.5vw, 26px);\r\n            align-items: stretch;\r\n        }\r\n\r\n        .mtg-card {\r\n            border-radius: 16px;\r\n            padding: clamp(22px, 3vw, 32px);\r\n            position: relative;\r\n            cursor: pointer;\r\n            -webkit-tap-highlight-color: transparent;\r\n            user-select: none;\r\n            transition: var(--mtg-tr);\r\n            display: flex;\r\n            flex-direction: column;\r\n            overflow: hidden;\r\n            backdrop-filter: blur(12px);\r\n            -webkit-backdrop-filter: blur(12px);\r\n        }\r\n\r\n        .mtg-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: -1px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: var(--mtg-grad1);\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            z-index: 4;\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .mtg-card:hover::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .mtg-card.mtg-pressed {\r\n            transform: translateY(-1px) scale(0.985) !important;\r\n        }\r\n\r\n        .mtg-card.mtg-pressed::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .mtg-card.mtg-ripple::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 1;\r\n        }\r\n\r\n        .mtg-card.mtg-ripple-out::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 0;\r\n        }\r\n\r\n        .mtg-card::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 0;\r\n            height: 0;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, rgba(0,184,212,0.10) 0%, rgba(234,0,255,0.04) 60%, transparent 100%);\r\n            transform: translate(-50%, -50%);\r\n            transition: width 0.55s ease-out, height 0.55s ease-out, opacity 0.55s ease-out;\r\n            opacity: 0;\r\n            z-index: 0;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .mtg-icon {\r\n            width: clamp(46px, 5vw, 58px);\r\n            height: clamp(46px, 5vw, 58px);\r\n            min-width: 46px;\r\n            min-height: 46px;\r\n            border-radius: 14px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: clamp(18px, 2.5vw, 24px);\r\n            margin-bottom: clamp(14px, 2vw, 20px);\r\n            transition: var(--mtg-tr);\r\n            position: relative;\r\n            z-index: 3;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .mtg-card:hover .mtg-icon {\r\n            transform: scale(1.12) rotate(-4deg);\r\n        }\r\n\r\n        .mtg-card.mtg-pressed .mtg-icon {\r\n            transform: scale(1.04) rotate(0deg);\r\n        }\r\n\r\n        .mtg-emoji {\r\n            font-size: clamp(28px, 3.5vw, 36px);\r\n            margin-bottom: clamp(12px, 1.8vw, 16px);\r\n            display: inline-block;\r\n            transition: var(--mtg-tr);\r\n            position: relative;\r\n            z-index: 3;\r\n            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .mtg-card:hover .mtg-emoji {\r\n            transform: scale(1.22) rotate(-6deg);\r\n        }\r\n\r\n        .mtg-card.mtg-pressed .mtg-emoji {\r\n            transform: scale(1.08) rotate(0deg);\r\n        }\r\n\r\n        .mtg-card-title {\r\n            font-family: var(--mtg-ff);\r\n            font-size: clamp(0.95rem, 2vw, 1.1rem);\r\n            font-weight: 700;\r\n            margin-bottom: clamp(6px, 1vw, 10px);\r\n            line-height: 1.35;\r\n            position: relative;\r\n            z-index: 3;\r\n        }\r\n\r\n        .mtg-card-desc {\r\n            font-family: var(--mtg-ff);\r\n            font-size: clamp(0.8rem, 1.5vw, 0.9rem);\r\n            font-weight: 400;\r\n            line-height: 1.65;\r\n            position: relative;\r\n            z-index: 3;\r\n            margin-top: auto;\r\n        }\r\n\r\n        \/* ========== SEC 1 ========== *\/\r\n        .mtg-sec1 {\r\n            background: #fff;\r\n        }\r\n\r\n        .mtg-sec1 .mtg-card {\r\n            background: #fff;\r\n            border: 1.5px solid #dcdce5;\r\n            box-shadow: 0 2px 8px rgba(0,0,0,0.04);\r\n        }\r\n\r\n        .mtg-sec1 .mtg-card:hover {\r\n            border-color: var(--mtg-accent);\r\n            box-shadow: var(--mtg-shadow-hover);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        .mtg-sec1 .mtg-card-title { color: #000000; }\r\n        .mtg-sec1 .mtg-card-desc { color: #1a1a1a; }\r\n        .mtg-sec1 .mtg-heading { color: #000000; }\r\n        .mtg-sec1 .mtg-sub { color: #1a1a1a; }\r\n        .mtg-sec1 .mtg-kw { color: #000000; }\r\n\r\n        \/* ========== SEC 2 ========== *\/\r\n        .mtg-sec2 {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        }\r\n\r\n        .mtg-sec2 .mtg-card {\r\n            background: rgba(255,255,255,0.95);\r\n            border: 1.5px solid rgba(255,255,255,0.55);\r\n            box-shadow: 0 4px 20px rgba(0,0,0,0.12);\r\n        }\r\n\r\n        .mtg-sec2 .mtg-card:hover {\r\n            border-color: rgba(255,255,255,0.85);\r\n            box-shadow: var(--mtg-shadow-hover2);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        .mtg-sec2 .mtg-card::before {\r\n            background: var(--mtg-grad2);\r\n        }\r\n\r\n        .mtg-sec2 .mtg-card::after {\r\n            background: radial-gradient(circle, rgba(118,75,162,0.1) 0%, rgba(102,126,234,0.05) 60%, transparent 100%);\r\n        }\r\n\r\n        .mtg-sec2 .mtg-heading { color: #000000; }\r\n        .mtg-sec2 .mtg-kw { color: #000000; }\r\n        .mtg-sec2 .mtg-kw::after { background: var(--mtg-grad2); }\r\n        .mtg-sec2 .mtg-sub { color: #000000; }\r\n        .mtg-sec2 .mtg-card-title { color: #000000; }\r\n        .mtg-sec2 .mtg-card-desc { color: #1a1a1a; }\r\n\r\n        \/* ========== SEC 3 ========== *\/\r\n        .mtg-sec3 {\r\n            background: #fff;\r\n        }\r\n\r\n        .mtg-sec3 .mtg-card {\r\n            background: rgba(245, 247, 252, 0.7);\r\n            border: 1.5px solid #d8dce4;\r\n            box-shadow: 0 2px 8px rgba(0,0,0,0.03);\r\n        }\r\n\r\n        .mtg-sec3 .mtg-card:hover {\r\n            border-color: var(--mtg-accent);\r\n            box-shadow: var(--mtg-shadow-hover);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        .mtg-sec3 .mtg-card::before {\r\n            background: var(--mtg-grad1);\r\n        }\r\n\r\n        .mtg-sec3 .mtg-heading { color: #000000; }\r\n        .mtg-sec3 .mtg-kw { color: #000000; }\r\n        .mtg-sec3 .mtg-sub { color: #1a1a1a; }\r\n        .mtg-sec3 .mtg-card-title { color: #000000; }\r\n        .mtg-sec3 .mtg-card-desc { color: #1a1a1a; }\r\n\r\n        \/* ========== RESPONSIVE ========== *\/\r\n        @media (max-width: 820px) {\r\n            .mtg-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 16px;\r\n            }\r\n            .mtg-section {\r\n                padding: clamp(36px, 6vw, 64px) 16px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 540px) {\r\n            .mtg-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 14px;\r\n            }\r\n            .mtg-card {\r\n                padding: 22px;\r\n            }\r\n            .mtg-sub {\r\n                margin-bottom: 28px;\r\n            }\r\n            .mtg-icon {\r\n                width: 46px;\r\n                height: 46px;\r\n                font-size: 18px;\r\n            }\r\n            .mtg-emoji {\r\n                font-size: 28px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 360px) {\r\n            .mtg-section {\r\n                padding: 32px 12px;\r\n            }\r\n            .mtg-card {\r\n                padding: 18px;\r\n                border-radius: 12px;\r\n            }\r\n            .mtg-heading {\r\n                font-size: 1.3rem;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <script>\r\n    (function() {\r\n        var mtgCards = document.querySelectorAll('.mtg-card');\r\n        mtgCards.forEach(function(mtgCardEl) {\r\n            function mtgRipple(el) {\r\n                el.classList.remove('mtg-ripple', 'mtg-ripple-out');\r\n                void el.offsetWidth;\r\n                el.classList.add('mtg-ripple');\r\n                setTimeout(function() {\r\n                    el.classList.add('mtg-ripple-out');\r\n                }, 300);\r\n                setTimeout(function() {\r\n                    el.classList.remove('mtg-ripple', 'mtg-ripple-out');\r\n                }, 700);\r\n            }\r\n            mtgCardEl.addEventListener('mousedown', function() {\r\n                mtgCardEl.classList.add('mtg-pressed');\r\n            });\r\n            mtgCardEl.addEventListener('mouseup', function() {\r\n                setTimeout(function() {\r\n                    mtgCardEl.classList.remove('mtg-pressed');\r\n                }, 120);\r\n                mtgRipple(mtgCardEl);\r\n            });\r\n            mtgCardEl.addEventListener('mouseleave', function() {\r\n                mtgCardEl.classList.remove('mtg-pressed', 'mtg-ripple', 'mtg-ripple-out');\r\n            });\r\n            mtgCardEl.addEventListener('touchstart', function() {\r\n                mtgCardEl.classList.add('mtg-pressed');\r\n                mtgRipple(mtgCardEl);\r\n            }, { passive: true });\r\n            mtgCardEl.addEventListener('touchend', function() {\r\n                setTimeout(function() {\r\n                    mtgCardEl.classList.remove('mtg-pressed');\r\n                }, 150);\r\n            });\r\n            mtgCardEl.addEventListener('touchcancel', function() {\r\n                mtgCardEl.classList.remove('mtg-pressed', 'mtg-ripple', 'mtg-ripple-out');\r\n            });\r\n        });\r\n    })();\r\n    <\/script>\r\n<\/div>\r\n\r\n[\/et_pb_fullwidth_code][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<!-- START OF FILE Meme Text Generator -->\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n    .pg-tool-wrapper {\r\n        \/* TYPOGRAPHY - SYSTEM SAFEST & BOLD (Impact\/Arial Black vibe for memes) *\/\r\n        --primary-font: \"Impact\", \"Arial Black\", system-ui, -apple-system, sans-serif;\r\n        --body-font: \"Comic Sans MS\", \"Chalkboard SE\", \"Marker Felt\", sans-serif; \/* Playful meme font fallback *\/\r\n        \r\n        \/* THEME PALETTE - MEME CULTURE (DOGE YELLOW & DANK ORANGE\/RED) *\/\r\n        --theme-panel: rgba(20, 20, 22, 0.96);\r\n        --theme-border: rgba(255, 204, 0, 0.4); \r\n        \r\n        \/* MEME ACCENTS *\/\r\n        --meme-yellow: #ffcc00;\r\n        --meme-orange: #ff5722;\r\n        --meme-red: #ff0033;\r\n        --void-dark: #0f0f11;\r\n        --text-bright: #ffffff;\r\n        --text-muted: #a1a1aa;\r\n        \r\n        \/* GRADIENTS - MAINTAINING PREVIOUS MASTER BACKGROUND + NEW THEME *\/\r\n        --grad-master: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        --grad-meme: linear-gradient(135deg, #ffcc00 0%, #ff5722 100%);\r\n        --grad-shimmer: linear-gradient(90deg, transparent, rgba(255, 204, 0, 0.5), transparent);\r\n        --grad-dark: linear-gradient(180deg, rgba(25,25,30,0.9) 0%, rgba(15,15,18,0.98) 100%);\r\n        \r\n        \/* SHADOWS & GLOWS *\/\r\n        --glow-yellow: 0 0 20px rgba(255, 204, 0, 0.5);\r\n        --glow-orange: 0 0 20px rgba(255, 87, 34, 0.5);\r\n        --shadow-ui: 0 20px 50px rgba(0, 0, 0, 0.9);\r\n        --shadow-meme-text: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 0 4px 0 #000;\r\n        \r\n        --transition-ui: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        --transition-fast: all 0.2s ease;\r\n        \r\n        font-family: var(--primary-font);\r\n        color: var(--text-bright);\r\n        line-height: 1.5;\r\n        width: 100%;\r\n        overflow-x: hidden;\r\n        text-align: center; \r\n        \r\n        \/* MASTER BACKGROUND INSTRUCTION (MAINTAINED) *\/\r\n        background: var(--grad-master);\r\n        background-attachment: fixed;\r\n    }\r\n\r\n    .pg-tool-wrapper * { box-sizing: border-box; }\r\n\r\n    \/* SAFETY OVERRIDES - STRICT OVERRIDE FOR WORDPRESS *\/\r\n    .pg-container {\r\n        max-width: 1200px !important;\r\n        width: 100% !important;\r\n        margin: 0 auto !important;\r\n        padding: 40px 20px !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n    }\r\n\r\n    .pg-hero-content-wrapper {\r\n        z-index: 2;\r\n        padding-top: 20px;\r\n        width: 100%;\r\n    }\r\n\r\n    \/* TITLE STYLES - MEME BOLD TYPOGRAPHY *\/\r\n    .pg-main-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 3.5rem;\r\n        font-weight: 900; \r\n        line-height: 1.1;\r\n        margin: 0 auto 15px auto;\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        color: #fff;\r\n        text-shadow: var(--shadow-meme-text); \/* Classic meme white text black stroke *\/\r\n        max-width: 900px;\r\n        position: relative;\r\n        display: inline-block;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .pg-main-title:hover {\r\n        transform: scale(1.03) rotate(-1deg);\r\n        color: var(--meme-yellow);\r\n    }\r\n    \r\n    .pg-main-title::after {\r\n        content: '';\r\n        display: block;\r\n        width: 120px;\r\n        height: 6px;\r\n        background: var(--grad-meme);\r\n        margin: 25px auto 0;\r\n        box-shadow: var(--glow-yellow);\r\n        border-radius: 5px;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .pg-main-title:hover::after {\r\n        width: 250px;\r\n    }\r\n    \r\n    .pg-subtitle {\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 1.1rem;\r\n        color: rgba(255, 255, 255, 0.9);\r\n        max-width: 750px;\r\n        margin: 0 auto 35px auto;\r\n        padding: 0 10px;\r\n        font-weight: 600;\r\n        letter-spacing: 0.5px;\r\n        text-shadow: 0 2px 5px rgba(0,0,0,0.8);\r\n    }\r\n\r\n    \/* MAIN GENERATOR CARD *\/\r\n    .pg-generator-card {\r\n        background: var(--theme-panel);\r\n        border: 2px solid var(--theme-border); \r\n        border-top-width: 5px;\r\n        border-top-color: var(--meme-yellow);\r\n        width: 100%;\r\n        box-shadow: var(--shadow-ui), inset 0 0 30px rgba(0,0,0,0.5); \r\n        border-radius: 12px;\r\n        position: relative;\r\n        transform: translateY(0);\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .pg-generator-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 2px;\r\n        background: var(--grad-shimmer);\r\n        opacity: 0.5;\r\n        transition: opacity 0.3s ease;\r\n    }\r\n\r\n    \/* INTERLOCKING GRID LAYOUT *\/\r\n    .pg-controls-wrapper {\r\n        padding: 35px;\r\n        background: var(--grad-dark);\r\n        border-bottom: 3px solid #000;\r\n        display: grid;\r\n        grid-template-columns: 1.2fr 1fr;\r\n        grid-template-rows: auto auto;\r\n        gap: 25px;\r\n        align-items: stretch;\r\n    }\r\n\r\n    \/* ENHANCED INPUT SECTION (LEFT COLUMN, SPANS 2 ROWS) *\/\r\n    .pg-input-section {\r\n        grid-column: 1 \/ 2;\r\n        grid-row: 1 \/ 3;\r\n        display: flex;\r\n        flex-direction: column;\r\n        height: 100%;\r\n    }\r\n    \r\n    .pg-enhanced-input-wrapper {\r\n        background: rgba(10, 10, 15, 0.9);\r\n        border: 2px solid rgba(255, 204, 0, 0.3);\r\n        border-radius: 8px;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n        flex-grow: 1;\r\n        transition: var(--transition-ui);\r\n        box-shadow: inset 0 0 20px rgba(0,0,0,1);\r\n    }\r\n\r\n    .pg-enhanced-input-wrapper:focus-within {\r\n        border-color: var(--meme-yellow);\r\n        box-shadow: inset 0 0 30px rgba(255, 204, 0, 0.15), 0 0 15px rgba(255, 204, 0, 0.3);\r\n    }\r\n    \r\n    .pg-text-input {\r\n        width: 100% !important;\r\n        flex-grow: 1 !important;\r\n        min-height: 150px !important;\r\n        padding: 25px !important;\r\n        background: transparent !important;\r\n        border: none !important;\r\n        color: #fff !important;\r\n        font-family: var(--body-font) !important;\r\n        font-weight: bold !important;\r\n        font-size: 1.8rem !important;\r\n        outline: none !important;\r\n        text-align: left !important;\r\n        text-shadow: 2px 2px 0px #000;\r\n        \/* CRITICAL WRAP FIX *\/\r\n        white-space: pre-wrap !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: break-word !important;\r\n        resize: none;\r\n    }\r\n    \r\n    .pg-text-input::placeholder {\r\n        color: rgba(255, 204, 0, 0.4);\r\n        font-style: italic;\r\n    }\r\n\r\n    \/* TOOLBAR FOR COPY\/PASTE\/SELECT\/PRESETS *\/\r\n    .pg-input-toolbar {\r\n        display: flex;\r\n        justify-content: flex-start;\r\n        align-items: center;\r\n        flex-wrap: wrap;\r\n        gap: 10px;\r\n        background: rgba(15, 15, 20, 0.95);\r\n        padding: 12px 15px;\r\n        border-top: 1px dashed rgba(255, 204, 0, 0.3);\r\n    }\r\n\r\n    .pg-toolbar-btn {\r\n        background: rgba(255, 255, 255, 0.05);\r\n        color: var(--text-muted);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        padding: 8px 12px;\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 0.75rem;\r\n        font-weight: 700;\r\n        border-radius: 4px;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n    }\r\n\r\n    .pg-toolbar-btn i { transition: transform 0.2s ease; }\r\n\r\n    .pg-toolbar-btn:hover {\r\n        background: rgba(255, 204, 0, 0.15);\r\n        color: var(--meme-yellow);\r\n        border-color: var(--meme-yellow);\r\n        box-shadow: var(--glow-yellow);\r\n    }\r\n\r\n    .pg-toolbar-btn:hover i { transform: translateY(-2px) scale(1.1); }\r\n    .pg-toolbar-btn:active { transform: scale(0.95); }\r\n    \r\n    .pg-preset-select {\r\n        background: rgba(255, 87, 34, 0.15);\r\n        color: var(--meme-orange);\r\n        border: 1px solid rgba(255, 87, 34, 0.4);\r\n        padding: 8px 12px;\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 0.75rem;\r\n        font-weight: 800;\r\n        border-radius: 4px;\r\n        cursor: pointer;\r\n        outline: none;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        appearance: none;\r\n        flex-grow: 1;\r\n    }\r\n    \r\n    .pg-preset-select:hover, .pg-preset-select:focus {\r\n        background: var(--meme-orange);\r\n        color: #fff;\r\n        border-color: var(--meme-orange);\r\n        box-shadow: var(--glow-orange);\r\n    }\r\n    \r\n    .pg-preset-select option {\r\n        background: var(--void-dark);\r\n        color: #fff;\r\n    }\r\n\r\n    \/* CONTROLS SECTION (RIGHT COLUMN) *\/\r\n    .pg-panel-label {\r\n        display: flex;\r\n        align-items: center;\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 0.85rem;\r\n        font-weight: 800;\r\n        color: #fff;\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        margin-bottom: 12px;\r\n        text-shadow: 1px 1px 2px #000;\r\n    }\r\n    \r\n    .pg-panel-label i {\r\n        color: var(--meme-yellow);\r\n        margin-right: 8px;\r\n        font-size: 1.1rem;\r\n    }\r\n\r\n    .pg-grid-options {\r\n        display: grid;\r\n        gap: 12px;\r\n        grid-template-columns: repeat(2, 1fr);\r\n    }\r\n\r\n    .pg-option-btn {\r\n        background: rgba(25, 25, 30, 0.6);\r\n        border: 1px solid rgba(255, 255, 255, 0.05);\r\n        padding: 14px 8px;\r\n        color: var(--text-muted);\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 0.75rem;\r\n        font-weight: 700;\r\n        cursor: pointer;\r\n        border-radius: 6px;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 6px;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .pg-option-btn i {\r\n        font-size: 1.3rem;\r\n        transition: var(--transition-ui);\r\n    }\r\n\r\n    \/* MICRO-INTERACTIONS: Background wipe *\/\r\n    .pg-option-btn::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: -100%; width: 100%; height: 100%;\r\n        background: linear-gradient(90deg, transparent, rgba(255, 204, 0, 0.2), transparent);\r\n        transition: left 0.4s ease;\r\n        z-index: 0;\r\n    }\r\n\r\n    .pg-option-btn > * { position: relative; z-index: 1; }\r\n\r\n    .pg-option-btn:hover {\r\n        border-color: rgba(255, 204, 0, 0.4);\r\n        color: #fff;\r\n        transform: translateY(-2px);\r\n    }\r\n    \r\n    .pg-option-btn:hover::before { left: 100%; }\r\n\r\n    .pg-option-btn:hover i {\r\n        transform: scale(1.15) rotate(5deg);\r\n        color: var(--meme-yellow);\r\n    }\r\n\r\n    .pg-option-btn.active { \r\n        background: var(--void-dark);\r\n        color: #fff; \r\n        border-color: var(--meme-yellow);\r\n        box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 15px rgba(255, 204, 0, 0.2);\r\n    }\r\n    \r\n    .pg-option-btn.active i {\r\n        color: var(--meme-yellow);\r\n        text-shadow: var(--glow-yellow);\r\n    }\r\n\r\n    \/* RESULTS AREA - 1 CARD PER ROW REQUIRED *\/\r\n    .pg-results-area { \r\n        padding: 40px 30px; \r\n        position: relative; \r\n    }\r\n    \r\n    .pg-result-list {\r\n        display: grid;\r\n        grid-template-columns: 1fr; \/* STRICTLY 1 CARD PER ROW *\/\r\n        gap: 20px;\r\n        position: relative; \r\n        z-index: 2;\r\n    }\r\n\r\n    \/* MICRO-INTERACTION: Card Tilt & Border Glow *\/\r\n    .pg-result-card {\r\n        background: #0d0d0f;\r\n        border: 1px solid rgba(255, 204, 0, 0.15);\r\n        padding: 25px 35px;\r\n        transition: var(--transition-ui);\r\n        position: relative;\r\n        overflow: hidden;\r\n        border-radius: 10px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        min-height: 120px; \r\n        box-sizing: border-box;\r\n    }\r\n    \r\n    .pg-result-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 4px; height: 100%;\r\n        background: var(--grad-meme);\r\n        transition: width 0.2s ease, opacity 0.2s ease;\r\n        opacity: 0.5;\r\n    }\r\n    \r\n    .pg-result-card:hover {\r\n        transform: perspective(1000px) rotateX(1deg) rotateY(-1deg) translateY(-3px);\r\n        box-shadow: -5px 10px 30px rgba(0, 0, 0, 0.9), 0 0 15px rgba(255, 204, 0, 0.2);\r\n        border-color: rgba(255, 204, 0, 0.5);\r\n        background: #111114;\r\n        z-index: 10;\r\n    }\r\n    \r\n    .pg-result-card:hover::before { width: 6px; opacity: 1; }\r\n\r\n    \/* CARD HEADER & COPY ICON *\/\r\n    .pg-card-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        width: 100%;\r\n        margin-bottom: 15px;\r\n        border-bottom: 1px dashed rgba(255,255,255,0.1);\r\n        padding-bottom: 15px;\r\n    }\r\n    \r\n    .pg-card-title {\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 0.85rem;\r\n        font-weight: 800;\r\n        color: var(--text-muted);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1.5px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        transition: var(--transition-fast);\r\n    }\r\n    \r\n    .pg-card-title i {\r\n        color: var(--meme-orange);\r\n        font-size: 1.1rem;\r\n    }\r\n\r\n    .pg-result-card:hover .pg-card-title {\r\n        color: #fff;\r\n        letter-spacing: 2px;\r\n        text-shadow: var(--glow-orange);\r\n    }\r\n\r\n    \/* MANDATORY COPY ICON BUTTON - Icon Bounce *\/\r\n    .pg-card-copy-btn {\r\n        background: rgba(255, 204, 0, 0.1);\r\n        border: 1px solid rgba(255, 204, 0, 0.3);\r\n        color: var(--meme-yellow);\r\n        width: 40px;\r\n        height: 40px;\r\n        border-radius: 8px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        outline: none;\r\n        flex-shrink: 0;\r\n    }\r\n    \r\n    .pg-card-copy-btn i {\r\n        font-size: 1.2rem;\r\n        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    }\r\n    \r\n    .pg-card-copy-btn:hover {\r\n        background: var(--meme-yellow);\r\n        color: #000;\r\n        box-shadow: var(--glow-yellow);\r\n        transform: scale(1.05);\r\n    }\r\n    \r\n    .pg-card-copy-btn:hover i { transform: scale(1.2) translateY(-2px); }\r\n    .pg-card-copy-btn:active { transform: scale(0.95); }\r\n\r\n    \/* CRITICAL TEXT WRAP FIX *\/\r\n    .pg-card-preview {\r\n        font-size: 1.8rem;\r\n        color: #fff;\r\n        width: 100%;\r\n        text-align: center;\r\n        font-family: var(--body-font);\r\n        font-weight: bold;\r\n        position: relative;\r\n        z-index: 1;\r\n        padding: 10px 0; \r\n        text-shadow: 2px 2px 0px #000;\r\n        transition: var(--transition-fast);\r\n        \r\n        \/* THE FIX - Ensures all massive texts break properly *\/\r\n        white-space: pre-wrap !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: break-word !important;\r\n        box-sizing: border-box !important;\r\n    }\r\n    \r\n    .pg-result-card:hover .pg-card-preview {\r\n        color: #fff;\r\n        text-shadow: var(--shadow-meme-text);\r\n        transform: scale(1.01);\r\n    }\r\n\r\n    \/* LOAD MORE CTA - Pulse Ring *\/\r\n    .pg-btn-load {\r\n        background: transparent;\r\n        color: #fff;\r\n        border: 2px solid var(--meme-yellow);\r\n        padding: 18px 45px;\r\n        font-family: var(--primary-font);\r\n        font-weight: 900;\r\n        font-size: 1rem;\r\n        cursor: pointer;\r\n        margin-top: 40px;\r\n        text-transform: uppercase;\r\n        border-radius: 6px;\r\n        transition: var(--transition-fast);\r\n        position: relative;\r\n        z-index: 2;\r\n        letter-spacing: 2px;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        box-shadow: 0 5px 15px rgba(0,0,0,0.8);\r\n    }\r\n    \r\n    .pg-btn-load::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; right: 0; bottom: 0;\r\n        border-radius: 6px;\r\n        border: 2px solid var(--meme-yellow);\r\n        opacity: 0;\r\n        transition: all 0.4s ease;\r\n        z-index: -1;\r\n    }\r\n    \r\n    .pg-btn-load i { transition: transform 0.3s ease; }\r\n    \r\n    .pg-btn-load:hover { \r\n        background: rgba(255, 204, 0, 0.15); \r\n        box-shadow: var(--glow-yellow);\r\n        transform: translateY(-3px);\r\n        text-shadow: 0 0 8px var(--meme-yellow);\r\n    }\r\n    \r\n    .pg-btn-load:hover::before {\r\n        transform: scale(1.05, 1.2);\r\n        opacity: 1;\r\n        border-color: transparent;\r\n    }\r\n    \r\n    .pg-btn-load:hover i { transform: translateY(4px); }\r\n    .pg-btn-load:active { transform: translateY(0); }\r\n\r\n    \/* TOAST ALERT - Badge Bounce *\/\r\n    .pg-toast {\r\n        visibility: hidden;\r\n        background: #111;\r\n        color: #fff;\r\n        padding: 15px 30px;\r\n        position: fixed;\r\n        left: 50%;\r\n        bottom: 40px;\r\n        transform: translateX(-50%) translateY(20px);\r\n        font-family: system-ui, sans-serif;\r\n        font-weight: 800;\r\n        z-index: 10000;\r\n        border-radius: 8px;\r\n        border: 1px solid var(--meme-orange);\r\n        border-left: 5px solid var(--meme-orange);\r\n        text-transform: uppercase;\r\n        box-shadow: var(--shadow-ui), var(--glow-orange);\r\n        letter-spacing: 1px;\r\n        opacity: 0;\r\n        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n    }\r\n    \r\n    .pg-toast i { color: var(--meme-yellow); font-size: 1.2rem; }\r\n    \r\n    .pg-toast.show { \r\n        visibility: visible; \r\n        opacity: 1;\r\n        transform: translateX(-50%) translateY(0);\r\n    }\r\n\r\n    \/* RESPONSIVE DESIGN - STRICT ADHERENCE *\/\r\n    @media (max-width: 900px) {\r\n        .pg-main-title { font-size: 2.5rem; } \r\n        .pg-controls-wrapper { grid-template-columns: 1fr; grid-template-rows: auto; }\r\n        .pg-input-section { grid-column: 1 \/ -1; grid-row: auto; }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        .pg-container { padding: 30px 15px !important; }\r\n        .pg-results-area { padding: 30px 15px; }\r\n        \r\n        .pg-controls-wrapper { padding: 20px; gap: 20px; }\r\n        .pg-text-input { min-height: 100px !important; font-size: 1.4rem !important; }\r\n        \r\n        .pg-input-toolbar { justify-content: center; }\r\n        .pg-preset-select { max-width: 100%; }\r\n        \r\n        .pg-result-list { grid-template-columns: 1fr; gap: 15px; }\r\n        \r\n        .pg-option-btn { padding: 12px 8px; font-size: 0.7rem; }\r\n        .pg-option-btn i { font-size: 1.1rem; }\r\n        \r\n        .pg-btn-load { padding: 15px 30px; font-size: 0.9rem; width: 100%; justify-content: center; }\r\n        .pg-main-title { font-size: 2rem; }\r\n        .pg-subtitle { font-size: 0.9rem; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"pg-tool-wrapper\">\r\n    <div class=\"pg-container pg-hero-content-wrapper\">\r\n        <h1 class=\"pg-main-title\">Meme Text Generator - Create Instantly<\/h1>\r\n        <p class=\"pg-subtitle\">Turn your text into viral gold. From classic bold impact to sArCaStIc mOcKiNg, extruded 3D, and heavy emoji usage\u2014create readable, copy-safe internet culture typography.<\/p>\r\n        \r\n        <div class=\"pg-generator-card\">\r\n            <div class=\"pg-controls-wrapper\">\r\n                \r\n                <!-- LEFT COLUMN: INPUT SECTION -->\r\n                <div class=\"pg-input-section\">\r\n                    <div class=\"pg-panel-label\"><i class=\"fa-solid fa-comment-dots\"><\/i> Enter Caption Here<\/div>\r\n                    <div class=\"pg-enhanced-input-wrapper\">\r\n                        <textarea class=\"pg-text-input\" id=\"pgInputText\" placeholder=\"Nobody: \r\nAbsolutely nobody: \r\nMe using this generator:\"><\/textarea>\r\n                        \r\n                        <div class=\"pg-input-toolbar\">\r\n                            <button class=\"pg-toolbar-btn\" id=\"pgBtnPaste\"><i class=\"fa-solid fa-paste\"><\/i> Paste<\/button>\r\n                            <button class=\"pg-toolbar-btn\" id=\"pgBtnSelectAll\"><i class=\"fa-solid fa-object-group\"><\/i> Select<\/button>\r\n                            <button class=\"pg-toolbar-btn\" id=\"pgBtnCopy\"><i class=\"fa-solid fa-copy\"><\/i> Copy<\/button>\r\n                            \r\n                            <select class=\"pg-preset-select\" id=\"pgPresetSelect\">\r\n                                <option value=\"\" disabled selected>\u2728 Meme Presets<\/option>\r\n                                <option value=\"They did surgery on a grape\">They did surgery...<\/option>\r\n                                <option value=\"I am once again asking for your financial support\">I am once again...<\/option>\r\n                                <option value=\"Sir, this is a Wendy's\">Wendy's<\/option>\r\n                                <option value=\"You can't just make up text styles and expect people to laugh\">You can't just...<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <!-- RIGHT COLUMN: SETTINGS -->\r\n                <div>\r\n                    <div class=\"pg-panel-label\"><i class=\"fa-solid fa-masks-theater\"><\/i> Vibe Check (Mode)<\/div>\r\n                    <div class=\"pg-grid-options\">\r\n                        <button class=\"pg-option-btn mode-btn active\" data-val=\"Sarcastic\">\r\n                            <i class=\"fa-solid fa-face-rolling-eyes\"><\/i> sArCaStIc\r\n                        <\/button>\r\n                        <button class=\"pg-option-btn mode-btn\" data-val=\"Impact\">\r\n                            <i class=\"fa-solid fa-fire\"><\/i> IMPACT BOLD\r\n                        <\/button>\r\n                        <button class=\"pg-option-btn mode-btn\" data-val=\"Extrude\">\r\n                            <i class=\"fa-solid fa-cubes\"><\/i> 3D Extruded\r\n                        <\/button>\r\n                        <button class=\"pg-option-btn mode-btn\" data-val=\"Vaporwave\">\r\n                            <i class=\"fa-solid fa-water\"><\/i> V a p o r w a v e\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div>\r\n                    <div class=\"pg-panel-label\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i> Extra Seasoning (Decor)<\/div>\r\n                    <div class=\"pg-grid-options\">\r\n                        <button class=\"pg-option-btn style-btn active\" data-val=\"Base\">\r\n                            <i class=\"fa-solid fa-ban\"><\/i> No Add-ons\r\n                        <\/button>\r\n                        <button class=\"pg-option-btn style-btn\" data-val=\"Bify\">\r\n                            <i class=\"fa-solid fa-b\"><\/i> \ud83c\udd71\ufe0f-ify Text\r\n                        <\/button>\r\n                        <button class=\"pg-option-btn style-btn\" data-val=\"Clap\">\r\n                            <i class=\"fa-solid fa-hands-clapping\"><\/i> Clap \ud83d\udc4f Back\r\n                        <\/button>\r\n                        <button class=\"pg-option-btn style-btn\" data-val=\"UwU\">\r\n                            <i class=\"fa-solid fa-cat\"><\/i> UwU Speak\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"pg-results-area\">\r\n                <div class=\"pg-result-list\" id=\"pgResultList\"><\/div>\r\n                <!-- 6 ITEMS LOAD MORE -->\r\n                <button class=\"pg-btn-load\" id=\"pgLoadMoreBtn\"><span>Load More Dankness<\/span> <i class=\"fa-solid fa-arrow-down\"><\/i><\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div id=\"pgToast\" class=\"pg-toast\"><i class=\"fa-solid fa-check-double\"><\/i> Meme Copied Successfully<\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    const inputEl = document.getElementById('pgInputText');\r\n    const resultList = document.getElementById('pgResultList');\r\n    const loadMoreBtn = document.getElementById('pgLoadMoreBtn');\r\n    const toast = document.getElementById('pgToast');\r\n    \r\n    const btnPaste = document.getElementById('pgBtnPaste');\r\n    const btnSelectAll = document.getElementById('pgBtnSelectAll');\r\n    const btnCopy = document.getElementById('pgBtnCopy');\r\n    const presetSelect = document.getElementById('pgPresetSelect');\r\n\r\n    let currentMode = 'Sarcastic';\r\n    let currentStyle = 'Base';\r\n    let limit = 6; \r\n    const LOAD_INCREMENT = 6; \r\n\r\n    \/\/ Character mappings\r\n    const baseChars = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ\";\r\n    const wideText = \"\uff41\uff42\uff43\uff44\uff45\uff46\uff47\uff48\uff49\uff4a\uff4b\uff4c\uff4d\uff4e\uff4f\uff50\uff51\uff52\uff53\uff54\uff55\uff56\uff57\uff58\uff59\uff5a\uff21\uff22\uff23\uff24\uff25\uff26\uff27\uff28\uff29\uff2a\uff2b\uff2c\uff2d\uff2e\uff2f\uff30\uff31\uff32\uff33\uff34\uff35\uff36\uff37\uff38\uff39\uff3a\";\r\n\r\n    const rand = (max) => Math.floor(Math.random() * max);\r\n\r\n    \/\/ Generate 120 configurations with Actual Keyword Based Meme Text & Emojis\r\n    const generateConfigs = () => {\r\n        const templates = [];\r\n        const memeData = [\r\n            { word: 'Doge', emoji: '\ud83d\udc15' },\r\n            { word: 'Stonks', emoji: '\ud83d\udcc8' },\r\n            { word: 'Chad', emoji: '\ud83d\uddff' },\r\n            { word: 'Pepe', emoji: '\ud83d\udc38' },\r\n            { word: 'Sponge Mock', emoji: '\ud83e\uddfd' },\r\n            { word: 'Sus', emoji: '\ud83d\udcee' },\r\n            { word: 'Sigma Grindset', emoji: '\ud83d\udc3a' },\r\n            { word: 'Brain Rot', emoji: '\ud83e\udddf' },\r\n            { word: 'Based', emoji: '\ud83d\udc51' },\r\n            { word: 'Cursed Text', emoji: '\ud83d\udc80' },\r\n            { word: 'Deep Fried', emoji: '\ud83c\udf5f' },\r\n            { word: 'Ratio', emoji: '\u2696\ufe0f' },\r\n            { word: 'Copypasta', emoji: '\ud83c\udf5d' },\r\n            { word: 'Vibe Check', emoji: '\ud83c\udfcf' },\r\n            { word: 'Shitpost', emoji: '\ud83d\udca9' },\r\n            { word: 'Karen Energy', emoji: '\ud83d\udc71\u200d\u2640\ufe0f' },\r\n            { word: 'Boomer Take', emoji: '\ud83d\udc74' },\r\n            { word: 'Zoomer Slang', emoji: '\ud83c\udfa7' },\r\n            { word: 'Touch Grass', emoji: '\ud83c\udf31' },\r\n            { word: 'No Cap', emoji: '\ud83e\udde2' },\r\n            { word: 'Skill Issue', emoji: '\ud83c\udfae' },\r\n            { word: 'Let Him Cook', emoji: '\ud83c\udf73' },\r\n            { word: 'W Rizz', emoji: '\ud83d\udcab' },\r\n            { word: 'Side Eye', emoji: '\ud83d\ude12' },\r\n            { word: 'Big Brain', emoji: '\ud83e\udde0' }\r\n        ];\r\n        \r\n        for(let i=0; i<120; i++){\r\n            const meme = memeData[i % memeData.length];\r\n            templates.push({\r\n                id: `meme-${i}`,\r\n                name: `${meme.emoji} ${meme.word} v.${Math.floor(Math.random()*999)}`,\r\n                icon: ['face-grin-tears', 'skull', 'fire', 'bolt', 'hand-sparkles', 'clapperboard'][i % 6]\r\n            });\r\n        }\r\n        \/\/ Shuffle templates for dynamic feel every load\r\n        return templates.sort(() => Math.random() - 0.5);\r\n    };\r\n\r\n    const ALL_STYLES = generateConfigs();\r\n\r\n    \/\/ Text Transformation Logic\r\n    const transformLogic = (text, mode, style, variationIndex) => {\r\n        let result = text;\r\n        \r\n        \/\/ 1. STYLE\/DECORATORS FIRST\r\n        if (style === 'Bify') {\r\n            result = result.replace(\/[bB]\/g, '\ud83c\udd71\ufe0f');\r\n            if(variationIndex % 3 === 0) result = result.replace(\/[pP]\/g, '\ud83c\udd7f\ufe0f');\r\n        } \r\n        else if (style === 'Clap') {\r\n            \/\/ Replace spaces with clap emojis, ignoring multiple spaces\r\n            result = result.split(\/\\s+\/).join(' \ud83d\udc4f ');\r\n            if (result.length > 0 && !result.endsWith('\ud83d\udc4f')) result += ' \ud83d\udc4f';\r\n        }\r\n        else if (style === 'UwU') {\r\n            result = result.replace(\/[lr]\/g, 'w').replace(\/[LR]\/g, 'W');\r\n            \/\/ Randomly add faces at the end based on variation\r\n            const faces = [' (\u30fb`\u03c9\u00b4\u30fb)', ' ;;w;;', ' owo', ' UwU', ' >w<'];\r\n            if(variationIndex % 2 === 0) result += faces[variationIndex % faces.length];\r\n        }\r\n\r\n        \/\/ 2. MODES (Typography\/Case adjustments)\r\n        if (mode === 'Sarcastic') {\r\n            let toggle = true;\r\n            result = Array.from(result).map(c => {\r\n                if (\/[a-zA-Z]\/.test(c)) {\r\n                    let newChar = toggle ? c.toLowerCase() : c.toUpperCase();\r\n                    toggle = !toggle;\r\n                    return newChar;\r\n                }\r\n                return c;\r\n            }).join('');\r\n        } \r\n        else if (mode === 'Impact') {\r\n            result = result.toUpperCase();\r\n            \/\/ Add exclamation marks based on variation for intensity\r\n            if(variationIndex % 4 === 0 && !result.endsWith('!')) result += '!!';\r\n        }\r\n        else if (mode === 'Extrude') {\r\n            \/\/ Shadow blocks\r\n            const blocks = ['\u2593', '\u2592', '\u2591', '\u2588'];\r\n            const block = blocks[variationIndex % blocks.length];\r\n            \/\/ To make it readable, we make it uppercase first\r\n            result = Array.from(result.toUpperCase()).map(c => c !== ' ' && c !== '\\n' ? `${c}${block}` : c).join('');\r\n        }\r\n        else if (mode === 'Vaporwave') {\r\n            result = Array.from(result).map(c => {\r\n                const idx = baseChars.indexOf(c);\r\n                return idx !== -1 ? wideText[idx] : (c === ' ' ? '  ' : c);\r\n            }).join('');\r\n        }\r\n\r\n        return result;\r\n    };\r\n\r\n    const render = () => {\r\n        resultList.innerHTML = '';\r\n        let raw = inputEl.value || \"Nobody:\\nAbsolutely nobody:\\nMe using this generator:\";\r\n        \r\n        const displayList = ALL_STYLES.slice(0, limit);\r\n\r\n        displayList.forEach((s, idx) => {\r\n            const out = transformLogic(raw, currentMode, currentStyle, idx);\r\n            \r\n            const card = document.createElement('div');\r\n            card.className = 'pg-result-card';\r\n            \r\n            card.innerHTML = `\r\n                <div class=\"pg-card-header\">\r\n                    <div class=\"pg-card-title\">\r\n                        <i class=\"fa-solid fa-${s.icon}\"><\/i> \r\n                        ${s.name}\r\n                    <\/div>\r\n                    <button class=\"pg-card-copy-btn\" title=\"Copy Text\"><i class=\"fa-regular fa-copy\"><\/i><\/button>\r\n                <\/div>\r\n                <div class=\"pg-card-preview\">${out}<\/div>\r\n            `;\r\n            \r\n            const copyBtn = card.querySelector('.pg-card-copy-btn');\r\n            copyBtn.addEventListener('click', (e) => {\r\n                e.stopPropagation(); \r\n                navigator.clipboard.writeText(out);\r\n                \r\n                copyBtn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i>';\r\n                copyBtn.style.background = 'var(--meme-orange)';\r\n                copyBtn.style.borderColor = 'var(--meme-orange)';\r\n                copyBtn.style.color = '#fff';\r\n                \r\n                toast.classList.add('show');\r\n                \r\n                setTimeout(() => {\r\n                    copyBtn.innerHTML = '<i class=\"fa-regular fa-copy\"><\/i>';\r\n                    copyBtn.style.background = '';\r\n                    copyBtn.style.borderColor = '';\r\n                    copyBtn.style.color = '';\r\n                    toast.classList.remove('show');\r\n                }, 2000);\r\n            });\r\n            \r\n            resultList.appendChild(card);\r\n        });\r\n\r\n        loadMoreBtn.style.display = limit >= ALL_STYLES.length ? 'none' : 'inline-flex';\r\n        const remaining = Math.max(0, ALL_STYLES.length - limit);\r\n        if (remaining > 0) {\r\n            loadMoreBtn.querySelector('span').innerText = `Load More Dankness (${remaining})`;\r\n        }\r\n    };\r\n\r\n    \/\/ Toolbar Events\r\n    inputEl.addEventListener('input', render);\r\n    \r\n    btnPaste.addEventListener('click', async () => {\r\n        try {\r\n            const text = await navigator.clipboard.readText();\r\n            inputEl.value = text;\r\n            render();\r\n        } catch (err) {\r\n            alert('Unable to paste automatically. Please use Ctrl+V \/ Cmd+V.');\r\n        }\r\n    });\r\n\r\n    btnSelectAll.addEventListener('click', () => {\r\n        inputEl.select();\r\n    });\r\n\r\n    btnCopy.addEventListener('click', () => {\r\n        if(inputEl.value) {\r\n            navigator.clipboard.writeText(inputEl.value);\r\n            toast.querySelector('i').className = 'fa-solid fa-copy';\r\n            toast.querySelector('i').nextSibling.textContent = ' Source Copied';\r\n            toast.classList.add('show');\r\n            setTimeout(() => {\r\n                toast.classList.remove('show');\r\n                setTimeout(()=> {\r\n                    toast.querySelector('i').className = 'fa-solid fa-check-double';\r\n                    toast.querySelector('i').nextSibling.textContent = ' Meme Copied Successfully';\r\n                }, 400);\r\n            }, 2500);\r\n        }\r\n    });\r\n    \r\n    presetSelect.addEventListener('change', (e) => {\r\n        if(e.target.value) {\r\n            inputEl.value = e.target.value;\r\n            render();\r\n            e.target.selectedIndex = 0; \r\n        }\r\n    });\r\n    \r\n    loadMoreBtn.onclick = () => { \r\n        limit += LOAD_INCREMENT; \r\n        render(); \r\n    };\r\n\r\n    \/\/ Options UI Switchers\r\n    document.querySelectorAll('.mode-btn').forEach(btn => {\r\n        btn.onclick = () => {\r\n            document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active');\r\n            currentMode = btn.getAttribute('data-val');\r\n            limit = 6; \r\n            render(); \r\n        };\r\n    });\r\n\r\n    document.querySelectorAll('.style-btn').forEach(btn => {\r\n        btn.onclick = () => {\r\n            document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active');\r\n            currentStyle = btn.getAttribute('data-val');\r\n            limit = 6; \r\n            render();\r\n        };\r\n    });\r\n\r\n    render();\r\n});\r\n<\/script>\r\n<!-- END OF FILE Meme Text Generator -->\r\n\r\n<!-- <content section is starting -->\r\n\r\n\r\n<div>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n    \r\n\r\n\r\n\r\n<section class=\"mtg-section mtg-sec1\">\r\n        <div class=\"mtg-inner\">\r\n\t\r\n<\/div>\r\n\t<\/section>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<section class=\"mtg-section mtg-sec1\">\r\n        <div class=\"mtg-inner\">\r\n            <h2 class=\"mtg-heading\">What Makes This <span class=\"mtg-kw\">Meme Text Generator<\/span> Essential?<\/h2>\r\n            <p class=\"mtg-sub\">Discover why creators and casual users alike rely on our meme text generator to craft hilarious, perfectly formatted meme captions instantly \u2014 no design skills required.<\/p>\r\n            <div class=\"mtg-grid\">\r\n                <div class=\"mtg-card\">\r\n                    <div class=\"mtg-icon\" style=\"background:rgba(0,184,212,0.12);color:#00b8d4;\"><i class=\"fa-solid fa-font\"><\/i><\/div>\r\n                    <div class=\"mtg-card-title\">Classic Impact Font Built-In<\/div>\r\n                    <p class=\"mtg-card-desc\">Our meme text generator includes the iconic Impact font by default, ensuring your captions look exactly like traditional viral memes every single time.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <div class=\"mtg-icon\" style=\"background:rgba(234,0,255,0.12);color:#ea00ff;\"><i class=\"fa-solid fa-arrow-up-wide-short\"><\/i><\/div>\r\n                    <div class=\"mtg-card-title\">Top & Bottom Text Control<\/div>\r\n                    <p class=\"mtg-card-desc\">Easily position your text at the top, bottom, or both \u2014 our meme text generator automatically applies proper spacing, stroke, and alignment for readability.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <div class=\"mtg-icon\" style=\"background:rgba(255,145,0,0.12);color:#ff9100;\"><i class=\"fa-solid fa-palette\"><\/i><\/div>\r\n                    <div class=\"mtg-card-title\">Custom Colors & Stroke<\/div>\r\n                    <p class=\"mtg-card-desc\">Break the standard white-black mold. Change text color, outline thickness, and background tints to match your meme's exact vibe and tone.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <div class=\"mtg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-image\"><\/i><\/div>\r\n                    <div class=\"mtg-card-title\">Upload Any Image<\/div>\r\n                    <p class=\"mtg-card-desc\">Drop your own photos, screenshots, or trending templates into our meme text generator and instantly overlay perfectly formatted text on them.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <div class=\"mtg-icon\" style=\"background:rgba(244,67,54,0.12);color:#f44336;\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i><\/div>\r\n                    <div class=\"mtg-card-title\">Smart Auto-Formatting<\/div>\r\n                    <p class=\"mtg-card-desc\">Our meme text generator automatically wraps long captions, adjusts font size to fit the image, and keeps text perfectly centered without manual tweaking.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <div class=\"mtg-icon\" style=\"background:rgba(63,81,181,0.12);color:#3f51b5;\"><i class=\"fa-solid fa-download\"><\/i><\/div>\r\n                    <div class=\"mtg-card-title\">High-Quality Export<\/div>\r\n                    <p class=\"mtg-card-desc\">Download your finished memes in crisp PNG or JPEG format \u2014 optimized for social media compression so they stay sharp on every platform.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <section class=\"mtg-section mtg-sec2\">\r\n        <div class=\"mtg-inner\">\r\n            <h2 class=\"mtg-heading\">How to Create Viral Memes with Our <span class=\"mtg-kw\">Meme Text Generator<\/span>?<\/h2>\r\n            <p class=\"mtg-sub\">Crafting hilarious meme captions is incredibly straightforward. Follow these quick steps and have your shareable meme ready to post in under a minute.<\/p>\r\n            <div class=\"mtg-grid\">\r\n                <div class=\"mtg-card\">\r\n                    <span class=\"mtg-emoji\">\ud83d\uddbc\ufe0f<\/span>\r\n                    <div class=\"mtg-card-title\">Step 1: Pick or Upload Image<\/div>\r\n                    <p class=\"mtg-card-desc\">Choose a classic meme template from our library or upload your own custom image \u2014 our meme text generator accepts JPG, PNG, and WebP formats.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <span class=\"mtg-emoji\">\u2b06\ufe0f<\/span>\r\n                    <div class=\"mtg-card-title\">Step 2: Add Top Text<\/div>\r\n                    <p class=\"mtg-card-desc\">Type your setup or reaction line in the top text field \u2014 watch it instantly appear with classic bold styling and black outline on your meme.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <span class=\"mtg-emoji\">\u2b07\ufe0f<\/span>\r\n                    <div class=\"mtg-card-title\">Step 3: Add Bottom Text<\/div>\r\n                    <p class=\"mtg-card-desc\">Complete the joke with a punchline in the bottom text area \u2014 our meme text generator aligns and scales it perfectly for maximum comedic impact.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <span class=\"mtg-emoji\">\ud83c\udf9b\ufe0f<\/span>\r\n                    <div class=\"mtg-card-title\">Step 4: Adjust & Customize<\/div>\r\n                    <p class=\"mtg-card-desc\">Fine-tune font size, stroke width, or text alignment until your meme looks exactly right \u2014 all changes preview in real-time before you export.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <span class=\"mtg-emoji\">\ud83d\udc40<\/span>\r\n                    <div class=\"mtg-card-title\">Step 5: Preview & Perfect<\/div>\r\n                    <p class=\"mtg-card-desc\">Review your meme creation on different screen sizes using the built-in preview \u2014 ensure text stays readable and the punchline lands perfectly.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <span class=\"mtg-emoji\">\ud83d\udce4<\/span>\r\n                    <div class=\"mtg-card-title\">Step 6: Download & Share<\/div>\r\n                    <p class=\"mtg-card-desc\">Hit export to save your meme as a high-res image \u2014 ready to drop into group chats, social feeds, or forum threads instantly.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <section class=\"mtg-section mtg-sec3\">\r\n        <div class=\"mtg-inner\">\r\n            <h2 class=\"mtg-heading\">Where Can You Share Your <span class=\"mtg-kw\">Meme Text Generator<\/span> Creations?<\/h2>\r\n            <p class=\"mtg-sub\">Memes thrive on sharing. Here are the most popular platforms and communities where users post memes made with our generator to maximize laughs and engagement.<\/p>\r\n            <div class=\"mtg-grid\">\r\n                <div class=\"mtg-card\">\r\n                    <div class=\"mtg-icon\" style=\"background:rgba(255,69,0,0.12);color:#ff4500;\"><i class=\"fa-brands fa-reddit-alien\"><\/i><\/div>\r\n                    <div class=\"mtg-card-title\">Reddit Meme Communities<\/div>\r\n                    <p class=\"mtg-card-desc\">Dominate subreddits like r\/memes and r\/dankmemes \u2014 properly formatted meme text generated here meets Reddit's exact formatting standards for top posts.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <div class=\"mtg-icon\" style=\"background:rgba(29,161,242,0.12);color:#1da1f2;\"><i class=\"fa-brands fa-twitter\"><\/i><\/div>\r\n                    <div class=\"mtg-card-title\">Twitter\/X Timeline<\/div>\r\n                    <p class=\"mtg-card-desc\">Meme images with clean, readable text get significantly more retweets \u2014 our meme text generator outputs perfectly sized captions for X's algorithm.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <div class=\"mtg-icon\" style=\"background:rgba(225,48,108,0.12);color:#e1306c;\"><i class=\"fa-brands fa-instagram\"><\/i><\/div>\r\n                    <div class=\"mtg-card-title\">Instagram Feed & Stories<\/div>\r\n                    <p class=\"mtg-card-desc\">Share your memes in posts or stories to boost engagement \u2014 crisp text overlays look professional and keep viewers scrolling longer on your profile.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <div class=\"mtg-icon\" style=\"background:rgba(88,101,242,0.12);color:#5865f2;\"><i class=\"fa-brands fa-discord\"><\/i><\/div>\r\n                    <div class=\"mtg-card-title\">Discord Server Channels<\/div>\r\n                    <p class=\"mtg-card-desc\">Drop custom memes in meme-channels or general chats \u2014 community servers love original meme text that matches their inside jokes and culture.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <div class=\"mtg-icon\" style=\"background:rgba(0,200,83,0.12);color:#00c853;\"><i class=\"fa-solid fa-comments\"><\/i><\/div>\r\n                    <div class=\"mtg-card-title\">WhatsApp & Telegram Groups<\/div>\r\n                    <p class=\"mtg-card-desc\">Forward hilarious memes to family and friends \u2014 our meme text generator creates lightweight, fast-loading images that open instantly on mobile apps.<\/p>\r\n                <\/div>\r\n                <div class=\"mtg-card\">\r\n                    <div class=\"mtg-icon\" style=\"background:rgba(255,0,80,0.10);color:#ff0050;\"><i class=\"fa-brands fa-tiktok\"><\/i><\/div>\r\n                    <div class=\"mtg-card-title\">TikTok Slideshows<\/div>\r\n                    <p class=\"mtg-card-desc\">Use your generated memes in TikTok photo slideshows \u2014 trending meme formats with clear text consistently drive high watch time and follower growth.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <style>\r\n        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n        :root {\r\n            --mtg-text-dark: #000000;\r\n            --mtg-text-primary: #0a0a0a;\r\n            --mtg-text-muted: #1a1a1a;\r\n            --mtg-accent: #00b8d4;\r\n            --mtg-grad1: linear-gradient(135deg, #00b8d4, #ea00ff, #ff9100);\r\n            --mtg-grad2: linear-gradient(90deg, #667eea, #764ba2, #ffd700);\r\n            --mtg-shadow-hover: 0 12px 30px rgba(0, 184, 212, 0.16);\r\n            --mtg-shadow-hover2: 0 12px 40px rgba(118, 75, 162, 0.3);\r\n            --mtg-tr: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --mtg-ff: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n\r\n        .mtg-section {\r\n            width: 100%;\r\n            padding: clamp(48px, 8vw, 96px) 20px;\r\n            position: relative;\r\n            font-family: var(--mtg-ff);\r\n            color: var(--mtg-text-primary);\r\n            line-height: 1.6;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        .mtg-inner {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            width: 100%;\r\n        }\r\n\r\n        .mtg-heading {\r\n            font-family: var(--mtg-ff);\r\n            font-size: clamp(1.5rem, 4vw, 2.25rem);\r\n            font-weight: 800;\r\n            text-align: center;\r\n            color: var(--mtg-text-dark);\r\n            margin-bottom: clamp(8px, 1.5vw, 14px);\r\n            line-height: 1.2;\r\n            letter-spacing: -0.03em;\r\n        }\r\n\r\n        .mtg-kw {\r\n            color: var(--mtg-text-dark);\r\n            position: relative;\r\n        }\r\n\r\n        .mtg-kw::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -2px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: var(--mtg-grad1);\r\n            border-radius: 3px;\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        }\r\n\r\n        .mtg-section:hover .mtg-kw::after {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .mtg-sub {\r\n            font-family: var(--mtg-ff);\r\n            font-size: clamp(0.88rem, 1.8vw, 1.02rem);\r\n            font-weight: 400;\r\n            text-align: center;\r\n            color: #1a1a1a;\r\n            max-width: 660px;\r\n            margin: 0 auto clamp(32px, 5vw, 56px);\r\n            line-height: 1.7;\r\n        }\r\n\r\n        .mtg-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: clamp(16px, 2.5vw, 26px);\r\n            align-items: stretch;\r\n        }\r\n\r\n        .mtg-card {\r\n            border-radius: 16px;\r\n            padding: clamp(22px, 3vw, 32px);\r\n            position: relative;\r\n            cursor: pointer;\r\n            -webkit-tap-highlight-color: transparent;\r\n            user-select: none;\r\n            transition: var(--mtg-tr);\r\n            display: flex;\r\n            flex-direction: column;\r\n            overflow: hidden;\r\n            backdrop-filter: blur(12px);\r\n            -webkit-backdrop-filter: blur(12px);\r\n        }\r\n\r\n        .mtg-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: -1px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: var(--mtg-grad1);\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            z-index: 4;\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .mtg-card:hover::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .mtg-card.mtg-pressed {\r\n            transform: translateY(-1px) scale(0.985) !important;\r\n        }\r\n\r\n        .mtg-card.mtg-pressed::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .mtg-card.mtg-ripple::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 1;\r\n        }\r\n\r\n        .mtg-card.mtg-ripple-out::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 0;\r\n        }\r\n\r\n        .mtg-card::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 0;\r\n            height: 0;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, rgba(0,184,212,0.10) 0%, rgba(234,0,255,0.04) 60%, transparent 100%);\r\n            transform: translate(-50%, -50%);\r\n            transition: width 0.55s ease-out, height 0.55s ease-out, opacity 0.55s ease-out;\r\n            opacity: 0;\r\n            z-index: 0;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .mtg-icon {\r\n            width: clamp(46px, 5vw, 58px);\r\n            height: clamp(46px, 5vw, 58px);\r\n            min-width: 46px;\r\n            min-height: 46px;\r\n            border-radius: 14px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: clamp(18px, 2.5vw, 24px);\r\n            margin-bottom: clamp(14px, 2vw, 20px);\r\n            transition: var(--mtg-tr);\r\n            position: relative;\r\n            z-index: 3;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .mtg-card:hover .mtg-icon {\r\n            transform: scale(1.12) rotate(-4deg);\r\n        }\r\n\r\n        .mtg-card.mtg-pressed .mtg-icon {\r\n            transform: scale(1.04) rotate(0deg);\r\n        }\r\n\r\n        .mtg-emoji {\r\n            font-size: clamp(28px, 3.5vw, 36px);\r\n            margin-bottom: clamp(12px, 1.8vw, 16px);\r\n            display: inline-block;\r\n            transition: var(--mtg-tr);\r\n            position: relative;\r\n            z-index: 3;\r\n            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .mtg-card:hover .mtg-emoji {\r\n            transform: scale(1.22) rotate(-6deg);\r\n        }\r\n\r\n        .mtg-card.mtg-pressed .mtg-emoji {\r\n            transform: scale(1.08) rotate(0deg);\r\n        }\r\n\r\n        .mtg-card-title {\r\n            font-family: var(--mtg-ff);\r\n            font-size: clamp(0.95rem, 2vw, 1.1rem);\r\n            font-weight: 700;\r\n            margin-bottom: clamp(6px, 1vw, 10px);\r\n            line-height: 1.35;\r\n            position: relative;\r\n            z-index: 3;\r\n        }\r\n\r\n        .mtg-card-desc {\r\n            font-family: var(--mtg-ff);\r\n            font-size: clamp(0.8rem, 1.5vw, 0.9rem);\r\n            font-weight: 400;\r\n            line-height: 1.65;\r\n            position: relative;\r\n            z-index: 3;\r\n            margin-top: auto;\r\n        }\r\n\r\n        \/* ========== SEC 1 ========== *\/\r\n        .mtg-sec1 {\r\n            background: #fff;\r\n        }\r\n\r\n        .mtg-sec1 .mtg-card {\r\n            background: #fff;\r\n            border: 1.5px solid #dcdce5;\r\n            box-shadow: 0 2px 8px rgba(0,0,0,0.04);\r\n        }\r\n\r\n        .mtg-sec1 .mtg-card:hover {\r\n            border-color: var(--mtg-accent);\r\n            box-shadow: var(--mtg-shadow-hover);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        .mtg-sec1 .mtg-card-title { color: #000000; }\r\n        .mtg-sec1 .mtg-card-desc { color: #1a1a1a; }\r\n        .mtg-sec1 .mtg-heading { color: #000000; }\r\n        .mtg-sec1 .mtg-sub { color: #1a1a1a; }\r\n        .mtg-sec1 .mtg-kw { color: #000000; }\r\n\r\n        \/* ========== SEC 2 ========== *\/\r\n        .mtg-sec2 {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        }\r\n\r\n        .mtg-sec2 .mtg-card {\r\n            background: rgba(255,255,255,0.95);\r\n            border: 1.5px solid rgba(255,255,255,0.55);\r\n            box-shadow: 0 4px 20px rgba(0,0,0,0.12);\r\n        }\r\n\r\n        .mtg-sec2 .mtg-card:hover {\r\n            border-color: rgba(255,255,255,0.85);\r\n            box-shadow: var(--mtg-shadow-hover2);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        .mtg-sec2 .mtg-card::before {\r\n            background: var(--mtg-grad2);\r\n        }\r\n\r\n        .mtg-sec2 .mtg-card::after {\r\n            background: radial-gradient(circle, rgba(118,75,162,0.1) 0%, rgba(102,126,234,0.05) 60%, transparent 100%);\r\n        }\r\n\r\n        .mtg-sec2 .mtg-heading { color: #000000; }\r\n        .mtg-sec2 .mtg-kw { color: #000000; }\r\n        .mtg-sec2 .mtg-kw::after { background: var(--mtg-grad2); }\r\n        .mtg-sec2 .mtg-sub { color: #000000; }\r\n        .mtg-sec2 .mtg-card-title { color: #000000; }\r\n        .mtg-sec2 .mtg-card-desc { color: #1a1a1a; }\r\n\r\n        \/* ========== SEC 3 ========== *\/\r\n        .mtg-sec3 {\r\n            background: #fff;\r\n        }\r\n\r\n        .mtg-sec3 .mtg-card {\r\n            background: rgba(245, 247, 252, 0.7);\r\n            border: 1.5px solid #d8dce4;\r\n            box-shadow: 0 2px 8px rgba(0,0,0,0.03);\r\n        }\r\n\r\n        .mtg-sec3 .mtg-card:hover {\r\n            border-color: var(--mtg-accent);\r\n            box-shadow: var(--mtg-shadow-hover);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        .mtg-sec3 .mtg-card::before {\r\n            background: var(--mtg-grad1);\r\n        }\r\n\r\n        .mtg-sec3 .mtg-heading { color: #000000; }\r\n        .mtg-sec3 .mtg-kw { color: #000000; }\r\n        .mtg-sec3 .mtg-sub { color: #1a1a1a; }\r\n        .mtg-sec3 .mtg-card-title { color: #000000; }\r\n        .mtg-sec3 .mtg-card-desc { color: #1a1a1a; }\r\n\r\n        \/* ========== RESPONSIVE ========== *\/\r\n        @media (max-width: 820px) {\r\n            .mtg-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 16px;\r\n            }\r\n            .mtg-section {\r\n                padding: clamp(36px, 6vw, 64px) 16px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 540px) {\r\n            .mtg-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 14px;\r\n            }\r\n            .mtg-card {\r\n                padding: 22px;\r\n            }\r\n            .mtg-sub {\r\n                margin-bottom: 28px;\r\n            }\r\n            .mtg-icon {\r\n                width: 46px;\r\n                height: 46px;\r\n                font-size: 18px;\r\n            }\r\n            .mtg-emoji {\r\n                font-size: 28px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 360px) {\r\n            .mtg-section {\r\n                padding: 32px 12px;\r\n            }\r\n            .mtg-card {\r\n                padding: 18px;\r\n                border-radius: 12px;\r\n            }\r\n            .mtg-heading {\r\n                font-size: 1.3rem;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <script>\r\n    (function() {\r\n        var mtgCards = document.querySelectorAll('.mtg-card');\r\n        mtgCards.forEach(function(mtgCardEl) {\r\n            function mtgRipple(el) {\r\n                el.classList.remove('mtg-ripple', 'mtg-ripple-out');\r\n                void el.offsetWidth;\r\n                el.classList.add('mtg-ripple');\r\n                setTimeout(function() {\r\n                    el.classList.add('mtg-ripple-out');\r\n                }, 300);\r\n                setTimeout(function() {\r\n                    el.classList.remove('mtg-ripple', 'mtg-ripple-out');\r\n                }, 700);\r\n            }\r\n            mtgCardEl.addEventListener('mousedown', function() {\r\n                mtgCardEl.classList.add('mtg-pressed');\r\n            });\r\n            mtgCardEl.addEventListener('mouseup', function() {\r\n                setTimeout(function() {\r\n                    mtgCardEl.classList.remove('mtg-pressed');\r\n                }, 120);\r\n                mtgRipple(mtgCardEl);\r\n            });\r\n            mtgCardEl.addEventListener('mouseleave', function() {\r\n                mtgCardEl.classList.remove('mtg-pressed', 'mtg-ripple', 'mtg-ripple-out');\r\n            });\r\n            mtgCardEl.addEventListener('touchstart', function() {\r\n                mtgCardEl.classList.add('mtg-pressed');\r\n                mtgRipple(mtgCardEl);\r\n            }, { passive: true });\r\n            mtgCardEl.addEventListener('touchend', function() {\r\n                setTimeout(function() {\r\n                    mtgCardEl.classList.remove('mtg-pressed');\r\n                }, 150);\r\n            });\r\n            mtgCardEl.addEventListener('touchcancel', function() {\r\n                mtgCardEl.classList.remove('mtg-pressed', 'mtg-ripple', 'mtg-ripple-out');\r\n            });\r\n        });\r\n    })();\r\n    <\/script>\r\n<\/div>\r\n\r\n\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-494","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Meme-Textgenerator \u2013 Sofort erstellen<\/title>\n<meta name=\"description\" content=\"Erstelle witzige Meme-Texte mit unserem kostenlosen Meme-Textgenerator. Perfekt f\u00fcr Bildunterschriften, Witze und virale Posts \u2013 einfach mit einem Klick kopieren und einf\u00fcgen.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/onlinetexteditor.io\/de\/meme-text-generator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Meme Text Generator \u2013 Create Instantly\" \/>\n<meta property=\"og:description\" content=\"Generate hilarious meme text with our free Meme Text Generator. Perfect for captions, jokes, and viral posts \u2014 copy &amp; paste in one click.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/onlinetexteditor.io\/meme-text-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"Online Text Editor\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-06T06:28:33+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/meme-text-generator\\\/\",\"url\":\"https:\\\/\\\/onlinetexteditor.io\\\/meme-text-generator\\\/\",\"name\":\"Meme Text Generator \u2013 Create Instantly\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/#website\"},\"datePublished\":\"2026-03-15T00:00:15+00:00\",\"dateModified\":\"2026-04-06T06:28:33+00:00\",\"description\":\"Generate hilarious meme text with our free Meme Text Generator. Perfect for captions, jokes, and viral posts \u2014 copy & paste in one click.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/meme-text-generator\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/onlinetexteditor.io\\\/meme-text-generator\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/meme-text-generator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/onlinetexteditor.io\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Meme Text Generator \u2013 Create Instantly\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/#website\",\"url\":\"https:\\\/\\\/onlinetexteditor.io\\\/\",\"name\":\"Online Text Editor\",\"description\":\"Free &amp; Secure Rich Text Editing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/onlinetexteditor.io\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Meme-Textgenerator \u2013 Sofort erstellen","description":"Erstelle witzige Meme-Texte mit unserem kostenlosen Meme-Textgenerator. Perfekt f\u00fcr Bildunterschriften, Witze und virale Posts \u2013 einfach mit einem Klick kopieren und einf\u00fcgen.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/onlinetexteditor.io\/de\/meme-text-generator\/","og_locale":"en_US","og_type":"article","og_title":"Meme Text Generator \u2013 Create Instantly","og_description":"Generate hilarious meme text with our free Meme Text Generator. Perfect for captions, jokes, and viral posts \u2014 copy & paste in one click.","og_url":"https:\/\/onlinetexteditor.io\/meme-text-generator\/","og_site_name":"Online Text Editor","article_modified_time":"2026-04-06T06:28:33+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/onlinetexteditor.io\/meme-text-generator\/","url":"https:\/\/onlinetexteditor.io\/meme-text-generator\/","name":"Meme Text Generator \u2013 Create Instantly","isPartOf":{"@id":"https:\/\/onlinetexteditor.io\/#website"},"datePublished":"2026-03-15T00:00:15+00:00","dateModified":"2026-04-06T06:28:33+00:00","description":"Generate hilarious meme text with our free Meme Text Generator. Perfect for captions, jokes, and viral posts \u2014 copy & paste in one click.","breadcrumb":{"@id":"https:\/\/onlinetexteditor.io\/meme-text-generator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/onlinetexteditor.io\/meme-text-generator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/onlinetexteditor.io\/meme-text-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/onlinetexteditor.io\/"},{"@type":"ListItem","position":2,"name":"Meme Text Generator \u2013 Create Instantly"}]},{"@type":"WebSite","@id":"https:\/\/onlinetexteditor.io\/#website","url":"https:\/\/onlinetexteditor.io\/","name":"Online Text Editor","description":"Free &amp; Secure Rich Text Editing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/onlinetexteditor.io\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/onlinetexteditor.io\/de\/wp-json\/wp\/v2\/pages\/494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onlinetexteditor.io\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/onlinetexteditor.io\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/onlinetexteditor.io\/de\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/onlinetexteditor.io\/de\/wp-json\/wp\/v2\/comments?post=494"}],"version-history":[{"count":3,"href":"https:\/\/onlinetexteditor.io\/de\/wp-json\/wp\/v2\/pages\/494\/revisions"}],"predecessor-version":[{"id":497,"href":"https:\/\/onlinetexteditor.io\/de\/wp-json\/wp\/v2\/pages\/494\/revisions\/497"}],"wp:attachment":[{"href":"https:\/\/onlinetexteditor.io\/de\/wp-json\/wp\/v2\/media?parent=494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}