.subtitle { font-size: 1.2rem; opacity: 0.9; max-width: 600px; margin: 0 auto; line-height: 1.6; } .typography-art { margin: 0 auto; line-height: 1.6; text-align: center; position: relative; padding: 2rem; background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); border-radius: 16px; backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.1); } .word { display: inline-block; margin: 0.3rem; padding: 0.5rem 0.8rem; cursor: pointer; transition: all 0.3s ease; border-radius: 8px; position: relative; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .word:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .small { font-size: 1.3rem; font-weight: 300; color: #a8edea; } .medium { font-size: 2rem; font-weight: 400; color: #fed6e3; } .large { font-size: 2.8rem; font-weight: 600; color: #ffcbf2; } .x-large { font-size: 3.8rem; font-weight: 700; color: #c5fad5; } .popup-card { position: absolute; background: rgba(15, 15, 25, 0.95); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 16px; padding: 1.5rem; width: 320px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); z-index: 100; opacity: 0; visibility: hidden; transition: all 0.3s ease; transform: translateY(15px); text-align: left; } .popup-card.visible { opacity: 1; visibility: visible; transform: translateY(0); } .popup-card h3 { margin-bottom: 1rem; color: #4facfe; font-size: 1.5rem; border-bottom: 2px solid rgba(79, 172, 254, 0.3); padding-bottom: 0.5rem; } .popup-card p { margin-bottom: 1.2rem; font-size: 1rem; line-height: 1.6; color: #e6e6e6; } .popup-card .category { display: inline-block; background: linear-gradient(90deg, rgba(79, 172, 254, 0.2), rgba(0, 242, 254, 0.2)); padding: 0.4rem 0.8rem; border-radius: 20px; font-size: 0.85rem; margin-bottom: 1.2rem; color: #a8edea; font-weight: 500; } .popup-card a { color: #00f2fe; text-decoration: none; font-size: 0.95rem; display: inline-block; margin-top: 0.5rem; transition: all 0.2s ease; font-weight: 500; } .popup-card a:hover { color: #4facfe; text-decoration: underline; transform: translateX(5px); } .loading { text-align: center; padding: 2rem; font-size: 1.3rem; color: #a8edea; } @media (max-width: 768px) { body { padding: 1rem; } h1 { font-size: 2.2rem; } .typography-art { padding: 1.5rem; text-align: left; } .x-large { font-size: 2.8rem; } .large { font-size: 2.2rem; } .medium { font-size: 1.7rem; } .small { font-size: 1.2rem; } .popup-card { width: 280px; left: 50% !important; transform: translateX(-50%) translateY(15px); } .popup-card.visible { transform: translateX(-50%) translateY(0); } } /* Animation for words */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .word { animation: fadeIn 0.5s ease forwards; opacity: 0; } /* Create staggered animation delays */ .word:nth-child(1) { animation-delay: 0.1s; } .word:nth-child(2) { animation-delay: 0.2s; } .word:nth-child(3) { animation-delay: 0.3s; } .word:nth-child(4) { animation-delay: 0.4s; } .word:nth-child(5) { animation-delay: 0.5s; } .word:nth-child(6) { animation-delay: 0.6s; } .word:nth-child(7) { animation-delay: 0.7s; } .word:nth-child(8) { animation-delay: 0.8s; } .word:nth-child(9) { animation-delay: 0.9s; } .word:nth-child(10) { animation-delay: 1.0s; } .word:nth-child(11) { animation-delay: 1.1s; } .word:nth-child(12) { animation-delay: 1.2s; } .word:nth-child(13) { animation-delay: 1.3s; } .word:nth-child(14) { animation-delay: 1.4s; } .word:nth-child(15) { animation-delay: 1.5s; }