!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pharmacology 1 Theoretical Handbook</title> <style> :root { --bg-color: #0f172a; --card-bg: #1e293b; --accent-blue: #38bdf8; --accent-green: #34d399; --accent-purple: #c084fc; --text-primary: #f8fafc; --text-secondary: #94a3b8; --border-color: #334155; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } body { background-color: var(--bg-color); color: var(--text-primary); min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; } .deck-container { width: 100%; max-width: 900px; height: 550px; background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.04); display: flex; flex-direction: column; justify-content: space-between; padding: 40px; position: relative; overflow: hidden; } .slide { display: none; flex-direction: column; height: 100%; opacity: 0; transition: opacity 0.3s ease-in-out; } .slide.active { display: flex; opacity: 1; } .slide-header { margin-bottom: 24px; border-bottom: 2px solid var(--border-color); padding-bottom: 12px; } .slide-tag { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent-blue); margin-bottom: 6px; } .slide-title { font-size: 1.8rem; color: var(--text-primary); font-weight: 700; } .slide-content { flex-grow: 1; overflow-y: auto; font-size: 1.05rem; line-height: 1.6; color: var(--text-secondary); } .slide-content h3 { color: var(--accent-green); margin: 16px 0 8px 0; font-size: 1.2rem; } .slide-content ul { list-style-type: none; padding-left: 0; } .slide-content li { margin-bottom: 12px; position: relative; padding-left: 24px; } .slide-content li::before { content: "•"; color: var(--accent-blue); font-size: 1.5rem; position: absolute; left: 4px; top: -4px; } .slide-content strong { color: var(--text-primary); } .title-slide { justify-content: center; align-items: center; text-align: center; } .title-slide h1 { font-size: 2.8rem; color: var(--accent-blue); margin-bottom: 16px; } .title-slide h2 { font-size: 1.4rem; color: var(--text-secondary); font-weight: 400; margin-bottom: 24px; } .title-slide .badge { background-color: rgba(56, 189, 248, 0.1); color: var(--accent-blue); border: 1px solid var(--accent-blue); padding: