@import"https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap";@import"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/solid.min.css";*{margin:0;padding:0;font-family:Roboto Mono,monospace}:root{--primary-color: #a3ffab;--secondary-color: #24232b;--text-color: #e5e4ea;--background-color: #100f15}html{background-color:var(--background-color);color:var(--text-color)}body{display:flex;align-items:center;justify-content:center;height:100dvh}#root{display:flex;flex-direction:column;justify-content:center;align-items:center;width:20rem;gap:1.5rem}.header{color:#6f6f6f}.output{display:flex;width:100%;justify-content:space-between;align-items:center;background-color:var(--secondary-color);border-radius:5px;-webkit-user-select:none;user-select:none;padding:1rem;font-size:17px;color:var(--text-color)}.output input{background:none;border:none;font-size:17px;-webkit-user-select:none;user-select:none;outline:none;color:#9c9c9c;margin-left:.2rem;width:85%}.output input:hover{cursor:default}.copyToClipboard{transition:all .4s;padding:.5rem;margin:-.5rem;color:var(--primary-color)}.copyToClipboard:hover{transform:scale(1.2);cursor:pointer}.input{border-radius:5px;background-color:var(--secondary-color);padding:1rem;width:100%;display:flex;flex-direction:column;justify-content:center;align-content:center;gap:.2rem}.input .charLength{display:flex;justify-content:space-between;align-items:center;padding:0 .2rem}.input .charLength p:nth-child(1){font-size:13px}.input input[type=range]{width:94%;height:4px;margin:20px 3%;background:var(--primary-color);border-radius:2px;border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.input input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background-color:var(--secondary-color);border-radius:50%;border:2px solid var(--primary-color);cursor:pointer}.charLength{display:flex;gap:10%}.charLength p:nth-child(2){color:var(--primary-color)}.checkBoxes{display:flex;flex-direction:column;font-size:12px;gap:.5rem;padding:.5rem 0 .2rem 1rem}.checkBoxes div{display:flex;align-items:center;gap:.5rem;margin:.1rem 0}.checkBoxes input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:all .3s;height:18px;width:18px;border-radius:3px;border:2px solid var(--primary-color);background-color:var(--secondary-color);cursor:pointer;outline:none;display:flex;justify-content:center;align-items:center}.checkBoxes input[type=checkbox]:after{font-family:"Font Awesome 6 Free";content:"";font-weight:900;color:var(--background-color);font-size:15px;display:none}.checkBoxes input[type=checkbox]:checked{background-color:var(--primary-color)}.checkBoxes input[type=checkbox]:checked:after{display:block}.strength{display:flex;justify-content:space-between;background-color:#19171d;padding:1rem;margin:1rem .5rem;font-size:14px;border-radius:3px}.strength .sth-mode-select{display:flex;align-items:center;gap:.3rem}.strength .sth-mode-select .sth-mode{margin-right:.4rem;font-size:12px;color:#979797}.strength .sth-mode-select div{height:10px;width:3px;border:2px solid var(--text-color);transition:all .3s}.generate-btn{padding:.8rem 0;border-radius:2px;background-color:var(--primary-color);border:2px solid var(--primary-color);transition:all .3s;font-weight:900;color:var(--secondary-color)}.generate-btn:hover{background-color:var(--secondary-color);border:2px solid var(--primary-color);color:var(--primary-color);font-weight:500}footer{font-size:11px;color:#6f6f6f}@media (max-width: 460px){*{font-size:95%}#root{width:17rem;gap:1rem}.input .charLength p:nth-child(1){font-size:11px}.output input{font-size:15px}}