*{margin:0;padding:0;box-sizing:border-box;font-family:Lato,sans-serif}html,body{width:100%;height:100%;background-color:#f8fafb;overflow:hidden}.container{display:flex;flex-direction:column}h2{color:#121212;display:flex;justify-content:center;margin-top:3rem}.btn-container{display:flex;justify-content:center;gap:15px;margin-top:2rem}.btn-encode,.btn-decode{width:220px;height:56px;border:none;border-radius:4px;cursor:pointer;font-size:18px;font-weight:700;line-height:24px;transition:all .2s cubic-bezier(.22,.61,.36,1)}.btn-encode{background-color:#2563eb;color:#fff;box-shadow:#013c8880 0 -1px 3px inset,#002c611a 0 3px 6px}.btn-encode:hover{background-color:#1450d5;transform:translateY(-2px)}.btn-decode{background-color:#fb5959;color:#fff;box-shadow:#8801016e 0 -1px 3px inset,#002c611a 0 3px 6px}.btn-decode:hover{background-color:#fc1f1f;transform:translateY(-2px)}.text-fields{margin-top:3rem;display:flex;justify-content:center;gap:15px}.text-field-input,.text-field-output{width:45%;height:55vh;letter-spacing:1.6px;border:none;border-radius:10px;box-shadow:#2123261a 0 10px 10px -10px;cursor:pointer;color:#282828;padding:14px}.text-field-input{background-color:#fff}.text-field-output{position:relative;padding-right:40px;background-color:#ecf1f4;outline:none}.text-fields::-webkit-scrollbar{width:10px}.text-fields::-webkit-scrollbar-thumb{background:#c9c9c9;border-radius:10px}.text-field-input:focus{outline:none}.text-field-input:hover{box-shadow:#11111a1a 0 4px 16px,#11111a1a 0 8px 24px,#11111a1a 0 16px 56px}.copy-icon-btn{position:absolute;top:11rem;right:6rem;padding:.25rem 1rem;background-color:#fff;border:none;border-radius:.3rem;color:#555;line-height:1.25rem;text-align:center;font-size:10px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;cursor:pointer;z-index:10;transition:color .2s ease}.copy-icon-btn:hover{background-color:#f9fafb}.copy-icon-btn:focus{outline:2px solid transparent;outline-offset:2px}.tooltip{position:absolute;top:12rem;right:8rem;background:#333;color:#fff;padding:5px 10px;border-radius:5px;font-size:12px;box-shadow:#0003 0 4px 6px;opacity:0;z-index:10;transform:translateY(-10px);transition:opacity .2s ease,transform .2s ease}.tooltip-visible{opacity:1;transform:translateY(0)}.error-message{position:absolute;top:-20px;left:0;width:100%;height:3rem;text-align:center;padding:1rem;color:#fff;background:linear-gradient(135deg,#e5636b,#f2170f);border-radius:10px;font-size:22px;font-weight:700}@media (max-width: 480px){.btn-encode,.btn-decode{width:150px;height:40px;font-size:14px}.text-fields{flex-direction:column;gap:10px}.text-field{width:100%;height:35vh;font-size:12px}h2{font-size:18px}}@media (max-width: 640px){html,body{overflow-y:scroll}body::-webkit-scrollbar{width:8px}body::-webkit-scrollbar-track{background:#f1f1f1}body::-webkit-scrollbar-thumb{background:#888;border-radius:10px}body::-webkit-scrollbar-thumb:hover{background-color:#555}.btn-encode,.btn-decode{width:180px;height:48px;font-size:16px}.text-fields{flex-direction:column;gap:15px}.text-field{width:100%;height:40vh;font-size:14px}}@media (max-width: 768px){.container{display:flex;flex-direction:column;align-items:center}h2{font-size:16px;margin-top:2rem}.btn-container{display:flex;flex-direction:row;align-items:center;margin-bottom:2rem;gap:10px}.btn-encode,.btn-decode{width:150px;height:45px;font-size:16px}.text-fields{display:flex;flex-direction:column;width:100%;height:90vh;max-width:90%;margin:0 auto;align-items:center;gap:5px}.text-field-input,.text-field-output{width:100%;max-width:400px;padding:10px;font-size:12px}.text-field-input{margin-bottom:.5rem}.copy-icon-btn{position:sticky}.tooltip-visible{display:none}.error-message{font-size:18px}}