@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&display=swap');
.info,code,h2{margin-bottom:15px}body{font-family:'Fira Code',monospace;text-align:center;margin:20px;background-color:#0d0d0d;color:#0f0}#togglePassword,.output p,button,code{font-family:Consolas,monospace}.password-wrapper input,h2{color:#0f9;text-align:center}h2{font-size:24px;letter-spacing:1px}.info{font-size:15px;color:#dcdcdc;text-align:center;line-height:1.5}.password-wrapper{position:relative;display:inline-block;width:90%;max-width:400px}.password-wrapper input{width:100%;padding:14px 55px 14px 14px;border:2px solid #0f6;background:#000;font-size:18px;border-radius:8px;box-sizing:border-box;transition:.2s ease-in-out}.password-wrapper input:focus{outline:0;border-color:#00e6e6;box-shadow:0 0 10px rgba(0,230,230,.5)}#togglePassword{position:absolute;right:14px;top:50%;transform:translateY(-50%);cursor:pointer;color:#00d7ff;font-size:14px;user-select:none;display:none;transition:color .2s}#togglePassword:hover{color:#0ff;text-decoration:underline}button{background-color:#033;color:#0fc;border:1px solid #0fc;cursor:pointer;padding:12px 22px;margin:12px 6px;border-radius:6px;font-size:16px;transition:.25s ease-in-out}button:hover{background-color:#077;box-shadow:0 0 8px rgba(0,255,204,.4)}.reset-button{background:0 0;border:1px solid #ff4d4d;color:#ff4d4d}.reset-button:hover{background-color:rgba(255,0,0,.1);box-shadow:0 0 6px rgba(255,0,0,.5)}.output{margin:30px auto;padding:20px;background:#111;border:1px solid #0f6;border-radius:8px;display:none;width:90%;max-width:650px;word-wrap:break-word;text-align:center;box-shadow:0 0 12px rgba(0,255,102,.2)}.output p{color:grey;font-size:20px;margin-bottom:12px}code{color:#00d7ff;background-color:#000;padding:12px;border-radius:6px;display:block;word-break:break-word;font-size:15px}.notification{margin-top:12px;font-size:16px;color:#0f6;display:none}.icon-check{display:inline-block;width:22px;height:22px;background:url('data:image/svg+xml;utf8,<svg fill="green" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.285 6.709a1 1 0 0 0-1.414-1.418l-9.192 9.193-4.243-4.243a1 1 0 0 0-1.415 1.414l5 5a1 1 0 0 0 1.415 0l10-10z"/></svg>') center/contain no-repeat;vertical-align:middle;margin-right:3px}.error{color:#ff4d4d;font-size:15px;margin-top:12px}@media (max-width:600px){h2{font-size:22px}input{font-size:16px}button{font-size:14px;padding:10px 18px}code{font-size:13px}}