@keyframes check{to{stroke-dashoffset:0}}@keyframes loadIn{0%{opacity:0;transform:translateY(-50vh)}50%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100vh)}}*{box-sizing:border-box;margin:0;padding:0}.App{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:100vh;padding:0 1rem;background:#08070B;font-family:JetBrains Mono}.App.copy{position:relative}.App.copy:after{content:"";width:100%;height:100%;top:0;left:0;position:absolute;background:#151619;opacity:.5}button,input{font-family:JetBrains Mono}header h1{font-size:16px;line-height:21px;color:#817d92}.sr-only{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.CopyModal{display:none;align-items:center;justify-content:center;position:absolute;color:#e6e5ea;background-color:#151619;padding:1rem 0;width:250px;border-radius:10px}.CopyModal p{margin-right:.5rem}.CopyModal .line-one{stroke-dasharray:15;stroke-dashoffset:15;animation:check .6s linear forwards;animation-iteration-count:1}.CopyModal .line-two{stroke-dasharray:20;stroke-dashoffset:20;animation:check .25s linear forwards;animation-iteration-count:1;animation-delay:.25s}.CopyModal.appear{display:flex;z-index:10;animation:loadIn 2.5s ease infinite}@media only screen and (min-width: 48rem){header h1{font-size:24px;line-height:32px}}main{display:flex;flex-direction:column;width:100%;max-width:540px;margin-top:1rem}main .password{display:flex;align-items:center;justify-content:space-between;padding:1rem;background:#24232C}main .password input{border:none;height:100%;font-size:24px;font-weight:700;color:#e6e5ea;white-space:nowrap;overflow:hidden;text-align:left;text-overflow:ellipsis;background:transparent}main .password ::placeholder{font-size:24px;font-weight:700}main .password :focus{outline:none}main .password button{border:none;background-color:transparent}main .password button svg path{fill:#a4ffaf;transition:fill .3s ease}main .password button:hover{cursor:pointer}main .password button:hover svg path{fill:#fff}main section{margin-top:1.5rem;padding:1rem;background:#24232C}main section .password-properties{display:flex;flex-direction:column;gap:1rem 0;margin-bottom:2rem}main section .password-properties .pass-length{display:grid;grid-template-columns:repeat(2,1fr);margin-bottom:1.625rem}main section .password-properties .pass-length p{font-size:24px;line-height:32px;font-weight:700;color:#a4ffaf;margin-left:auto}main section .password-properties .pass-length input{width:100%;grid-column:span 2;margin-top:18px;-webkit-appearance:none;appearance:none;background:#18171F;height:8px}main section .password-properties .pass-length input::-webkit-slider-thumb{width:28px;height:28px;border-radius:50%;background:#E6E5EA;-webkit-appearance:none;appearance:none;cursor:pointer}main section .password-properties .pass-length .progress{position:absolute;height:100px;background-color:#a4ffaf}main section .password-properties .pass-length input::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#E6E5EA}main section .password-properties label{display:flex;position:relative;align-items:center;font-weight:700;color:#e6e5ea}main section .password-properties label input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;height:0;width:0}main section .password-properties label .checkbox{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:2px solid white;margin-right:1.25rem;cursor:pointer;transition:.3s ease;transition-property:border,background-color}main section .password-properties label .checkbox svg{display:none}main section .password-properties label .checkbox:hover{border:2px solid #A4FFAF;background-color:#a4ffaf}main section .password-properties label input:checked~.checkbox{border:2px solid #A4FFAF;background-color:#a4ffaf}main section .password-properties label input:checked~.checkbox svg{display:initial}main section .strength-indicator{display:flex;align-items:center;justify-content:space-between;padding:.875rem 1rem;margin-bottom:1rem;background:#18171F}main section .strength-indicator p{font-weight:700;text-align:center;color:#817d92;text-transform:uppercase}main section .strength-indicator .strength{display:flex;align-items:center;gap:.5rem}main section .strength-indicator .strength p{color:#e6e5ea;margin-right:.5rem}main section .strength-indicator .strength .level{width:10px;height:28px;border:2px solid #E6E5EA;transition:ease .3s;transition-property:background-color,border-color}main section .strength-indicator .strength .level:nth-child(2){transition-duration:.6s}main section .strength-indicator .strength .level:nth-child(3){transition-duration:.9s}main section .strength-indicator .strength .level:nth-child(4){transition-duration:1.2s}main section button{width:100%;padding:1.0625rem 0;font-size:16px;font-weight:700;color:#24232c;text-transform:uppercase;border:2px solid #A4FFAF;background-color:#a4ffaf;cursor:pointer;transition:.3s ease;transition-property:color,background-color}main section button svg{margin-left:1.5rem}main section button svg path{fill:#24232c;transition:fill .3s ease}main section button:hover{color:#a4ffaf;background-color:transparent}main section button:hover svg path{fill:#a4ffaf}@media only screen and (min-width: 48rem){main{margin-top:2rem}main .password{padding:1.1875rem 2rem}main .password input{font-size:32px}main section{padding:1.5rem 2rem 2rem}main section .password-properties{gap:1.25rem 0}main section .password-properties .pass-length{margin-bottom:1.375rem}main section .password-properties .pass-length label{font-size:18px}main section .password-properties .pass-length p{font-size:32px;line-height:42px}main section .password-properties .pass-length input{margin-top:1.625rem}main section .password-properties label{font-size:18px}main section .strength-indicator{margin-bottom:2rem;padding:1.3125rem 2rem 1.25rem}main section .strength-indicator p{font-size:18px}main section .strength-indicator .strength p{font-size:24px}main section button{font-size:18px;padding:1.1875rem 0}}