/* ========================= RESET ========================= */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ========================= DEFAULT / LIGHT MODE ========================= */ body { font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif; background: #f0f2f5; color: #222222; padding: 40px 20px; transition: background-color 0.3s ease, color 0.3s ease; } /* ========================= CONTAINER ========================= */ .container { width: 100%; max-width: 700px; margin: 0 auto; padding: 30px; background: #ffffff; border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); transition: background-color 0.3s ease, box-shadow 0.3s ease; } /* ========================= HEADINGS ========================= */ h2 { text-align: center; color: #333333; font-size: 26px; margin-bottom: 25px; transition: color 0.3s ease; } h3 { margin-top: 15px; margin-bottom: 10px; color: #555555; transition: color 0.3s ease; } /* ========================= TEXTAREA ========================= */ textarea { width: 100%; min-height: 150px; padding: 14px; font-family: inherit; font-size: 15px; border-radius: 10px; border: 1px solid #cccccc; resize: vertical; margin-bottom: 20px; background-color: #fafafa; color: #222222; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } textarea::placeholder { color: #888888; } textarea:focus { outline: none; border-color: #4A90E2; background-color: #ffffff; box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.15); } /* ========================= BUTTONS ========================= */ button { padding: 10px 18px; font-family: inherit; font-size: 15px; font-weight: 500; margin: 0 10px 20px 0; border: none; border-radius: 8px; cursor: pointer; background: linear-gradient( to right, #4A90E2, #357ABD ); color: #ffffff; transition: background 0.3s ease, transform 0.1s ease; } button:hover { background: linear-gradient( to right, #5AA0F3, #468BD9 ); transform: translateY(-1px); } button:active { transform: translateY(0); } /* ========================= OUTPUT ========================= */ #output { width: 100%; padding: 15px; border-radius: 10px; background: #fafafa; color: #222222; border: 1px solid #cccccc; overflow-wrap: break-word; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* ========================= FOOTER ========================= */ .footer { text-align: center; margin-top: 40px; font-size: 13px; color: #999999; transition: color 0.3s ease; } /* ========================= MODE SWITCH ========================= */ .mode-switch { position: absolute; top: 20px; right: 20px; display: flex; align-items: center; } .mode-switch label { margin-left: 10px; color: #4A90E2; font-weight: 600; cursor: pointer; } /* ================================================== DARK MODE Activated by: ================================================== */ body.dark-mode { background: #121212; color: #e0e0e0; } /* Container */ body.dark-mode .container { background: #1e1e1e; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } /* Headings */ body.dark-mode h2 { color: #ffffff; } body.dark-mode h3 { color: #cccccc; } /* Textarea */ body.dark-mode textarea { background-color: #2a2a2a; color: #f0f0f0; border-color: #444444; } body.dark-mode textarea::placeholder { color: #888888; } body.dark-mode textarea:focus { background-color: #333333; border-color: #4A90E2; } /* Output */ body.dark-mode #output { background: #2a2a2a; color: #e0e0e0; border-color: #444444; } /* Footer */ body.dark-mode .footer { color: #999999; } /* Mode switch */ body.dark-mode .mode-switch label { color: #5AA0F3; } /* ========================= RESPONSIVE ========================= */ @media (max-width: 768px) { body { padding: 25px 15px; } .container { padding: 20px; } h2 { font-size: 22px; } button { width: 100%; margin-right: 0; margin-bottom: 10px; } .mode-switch { position: static; justify-content: center; margin-bottom: 20px; } } /* ========================= SMALL MOBILE ========================= */ @media (max-width: 480px) { body { padding: 20px 10px; } .container { padding: 16px; } h2 { font-size: 20px; } textarea { min-height: 120px; } }