# 📝 OFFLINE NOTEPAD FORMATTING GUIDE

---

## 🛠️ STANDARD MARKDOWN
* **Bold Text**: **Text** or __Text__
* *Italic Text*: *Text* or _Text_
* ***Bold Italics***: ***Text***
* ~~Strikethrough~~: ~~Text~~
* `Inline Code`: `Text`
* [Hyperlink](https://offlinenotepad.com): `[Text](URL)`
* 📊 **Task Checkboxes**:
  - [ ] Completed task
  - [ ] Pending task

---

## 🎨 ADVANCED HTML TEXT STYLING
* <u>Underlined Text</u>: `<u>Text</u>`
* <small>Small Text</small>: `<small>Text</small>`
* <mark>Highlighted Text</mark>: `<mark>Text</mark>`
* <del>Deleted Text</del>: `<del>Text</del>`
* <ins>Inserted Text</ins>: `<ins>Text</ins>`
* <kbd>Keyboard Key Style</kbd>: `<kbd>Text</kbd>`
* <abbr title="This is a tooltip description!">Hover for Tooltip</abbr>: `<abbr title="Tooltip text">Text</abbr>`

---

## 📐 ALIGNMENT & DESIGN LAYOUTS
<center>🎯 Centered Layout Element</center>
<p align="right">👉 Right Aligned Text</p>
<span style="writing-mode: vertical-rl; background:#eee; padding:5px;">📐 Sideways Text</span>
<bdo dir="rtl">reversed text reading layout</bdo>

### Visual Variations
* <span style="color: #ff4757; font-size: 18px; font-weight: bold;">Custom Color & Size</span>
* <span style="font-family: 'Courier New', monospace;">Monospace Font Switch</span>
* <span style="border: 2px dashed #5352ed; padding: 4px; border-radius: 8px;">Dashed Rounded Border</span>
* <span style="text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">Drop Shadow Styling</span>
* <span style="-webkit-text-stroke: 1px #2f3542; color: transparent; font-weight: bold; font-size: 20px;">Hollow Outlined Font</span>
* <span style="font-variant: small-caps; letter-spacing: 2px;">Small Capital Letters Layout</span>
* <span style="filter: blur(3px);" onmouseover="this.style.filter='none'" onmouseout="this.style.filter='blur(3px)'">Hover over this to reveal blurry hidden text</span>

---

## 📂 INTERACTIVE CARDS & GRADIENTS
<details style="background: linear-gradient(135deg, #74b9ff, #a29bfe); padding: 12px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); color: #fff; margin-bottom: 10px;">
  <summary style="font-weight: bold; cursor: pointer; list-style: '📌 ';">Click to Expand Accordion Card</summary>
  <p style="margin-top: 8px; color: #fff; font-size: 14px;">This panel acts as a collapsible container featuring smooth gradient logic backgrounds.</p>
</details>

<span style="-webkit-box-reflect: below -2px linear-gradient(transparent, rgba(0,0,0,0.15); font-weight: bold; font-size: 22px; color: #2d3436;">Reflected Text Title</span>

<div style="height: 30px;"></div>

---

## ⚡ SPECIAL INTERACTIVE EFFECTS
* <div style="cursor: help; display: inline-block; padding: 4px; background: #ffeaa7;">Hover mouse here to change pointer into a help question mark</div>
* <div style="cursor: crosshair; display: inline-block; padding: 4px; background: #fab1a0;">Hover mouse here to transform pointer into a crosshair target grid</div>

---

## 🎬 LIVE MOTION & ANIMATIONS

### 🟢 Neon Glow Effect
<span style="text-shadow: 0 0 8px #00ffff, 0 0 15px #00ffff; font-weight: bold; color: #fff; background: #000; padding: 5px 10px; border-radius: 4px;">NEON GLOW TITLE</span>

### 🟢 Native Marquee Scroll
<marquee bgcolor="#dfe6e9" scrollamount="5" style="padding: 5px; border-radius: 4px;">Standard browser marquee banner scrolling smoothly from right to left...</marquee>

### 🟢 Breathing Pulse Text
<span style="display: inline-block; animation: pulse 1.5s infinite ease-in-out; font-weight: bold; color: #e84393;">Pulsing Text Core</span>

### 🟢 Rainbow Wave Animation
<span style="animation: rainbow 4s linear infinite; font-weight: bold; font-size: 18px;">Color Shifting Text Transition</span>

### 🟢 Ticker Loop (With Pause Function)
<div style="overflow: hidden; white-space: nowrap; width: 100%; background: #2d3436; color: #00cec9; padding: 6px; border-radius: 4px;">
  <span style="display: inline-block; animation: ticker 12s linear infinite;" onmouseover="this.style.animationPlayState='paused';" onmouseout="this.style.animationPlayState='running';">👉 Move your cursor over this scrolling message track to pause its animation ticker instantly! 👈</span>
</div>

### 🟢 Smooth Fading Text
<div style="animation: fade 2.5s ease-in-out infinite; font-weight: bold; color: #6c5ce7;">Fading phantom element strings...</div>

### 🟢 Retro Typewriter Engine
<div style="font-family: monospace; white-space: nowrap; overflow: hidden; border-right: 3px solid; width: 15ch; animation: typing 3.5s steps(15) infinite, blink 0.5s step-end infinite alternate; font-weight: bold;">Typing text track...</div>

### 🟢 Digital Glitch Distortions
<h1 style="position: relative; font-family: sans-serif; font-size: 26px; color: #fff; background: #000; padding: 6px 12px; display: inline-block; margin: 10px 0;">
  <span style="position: absolute; top: 0; left: 2px; text-shadow: -1px 0 #ff0000; background: #000; animation: glitch-1 2s infinite linear alternate-reverse;">GLITCH SIGNAL</span>
  GLITCH SIGNAL
  <span style="position: absolute; top: 0; left: -2px; text-shadow: -1px 0 #0000ff; background: #000; animation: glitch-2 3s infinite linear alternate-reverse;">GLITCH SIGNAL</span>
</h1>

### 🟢 Matrix Digital Terminal Code Drops
<div style="background: #000; color: #00ff00; font-family: monospace; padding: 15px; overflow: hidden; position: relative; height: 110px; border-radius: 6px;">
  <div style="position: absolute; top: -100px; left: 15%; animation: matrix 3s linear infinite;">1<br>0<br>1<br>1</div>
  <div style="position: absolute; top: -100px; left: 50%; animation: matrix 4s linear infinite 1s;">0<br>1<br>0<br>0</div>
  <div style="position: absolute; top: -100px; left: 80%; animation: matrix 2.5s linear infinite 0.5s;">1<br>1<br>0<br>1</div>
  <span style="position: relative; z-index: 2; background: rgba(0,0,0,0.8); padding: 4px; border: 1px solid #00ff00;">Terminal Core Active</span>
</div>

---

/* 🎛️ SHARED ENGINE STYLE REPOSITORIES - DO NOT DELETE THIS LOWER SECTION */
<style>
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes rainbow { 0%, 100% { color: #ff7675; } 25% { color: #ffeaa7; } 50% { color: #55efc4; } 75% { color: #74b9ff; } }
@keyframes ticker { 0% { transform: translate3d(100%, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }
@keyframes fade { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }
@keyframes typing { from { width: 0 } }
@keyframes blink { 50% { border-color: transparent } }
@keyframes glitch-1 { 0% { clip-path: inset(20% 0 30% 0); } 100% { clip-path: inset(10% 0 50% 0); } }
@keyframes glitch-2 { 0% { clip-path: inset(35% 0 15% 0); } 100% { clip-path: inset(60% 0 5% 0); } }
@keyframes matrix { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(220px); opacity: 0; } }
</style>