@import"https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{background-color:#111;color:#d8e9a8;font-family:Arial,Helvetica,sans-serif;line-height:1.5;display:grid;place-content:center;margin-top:20vh;font-family:IBM Plex Mono,monospace}main{min-width:350px;display:grid;background:linear-gradient(155.8deg,rgba(40,175,38,.2) 2.32%,rgba(54,70,54,.2) 25.02%,rgba(45,57,45,.2) 49.26%,rgba(31,37,32,.2) 76.19%),linear-gradient(0deg,#060e07,#060e07),linear-gradient(0deg,#1f2520,#1f2520);border:1px solid hsl(130deg,9%,13%);overflow:hidden;border-radius:5px;color:#f0fff0}header{text-align:center;text-transform:uppercase;width:100%;position:relative;z-index:1;padding-block:10px}header:before{position:absolute;content:"";height:100%;width:100%;top:0;left:0;background:linear-gradient(118.61deg,rgba(31,37,32,0) 46.5%,#0f790d 95.37%);filter:blur(14px);z-index:-1}header h1{font-family:Chakra Petch,sans-serif;color:#d8e9a8;font-size:.75rem;letter-spacing:.05em;font-weight:400;opacity:.6}.wrapper{padding:1.125rem;padding-block-start:1rem;display:grid;gap:.75rem}.password-strength{display:flex;align-items:baseline;gap:.5rem;justify-content:flex-end}.password-strength p{text-transform:uppercase;font-size:12px}.password-strength .signal-bars{display:flex;gap:2px;align-items:baseline}.password-strength .signal-bars .bar{width:5px;height:6px;background-color:#364636}.password-strength .signal-bars .bar.filled{background-color:#d8e9a8}.password-strength .signal-bars .bar:nth-child(2){height:12px}.password-strength .signal-bars .bar:nth-child(3){height:18px}.password-strength .signal-bars .bar:nth-child(4){height:24px}.password-box{border:1px solid hsl(119deg,14%,52%);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding-inline:10px;padding-block:5px;cursor:pointer}.password-box .password{font-family:Chakra Petch,sans-serif;font-size:2rem;letter-spacing:0px;font-weight:700}.password-box .info{color:#749673;font-size:small}.password-box:active{filter:brightness(1.3)}form{margin-block-start:1rem;display:grid;gap:7px;letter-spacing:.015em}form label{padding-inline:10px}form label input{margin-inline-end:10px;accent-color:#d8e9a8}form label input[type=range]{display:block;width:100%}form .slider{display:grid;margin-block:10px}form .slider .char-label{display:flex;justify-content:space-between;align-items:baseline}form .slider .char-length{font-size:24px;font-weight:500}form .slider input{margin-block-start:10px}input[type=submit]{font-family:Chakra Petch,sans-serif;font-weight:700;margin-block-start:10px;padding-block:10px;text-transform:uppercase;font-size:20px;letter-spacing:.025em;border-radius:0;background-color:#83d581;color:#191a19;border:1px solid #364636;transition:all .2s ease-in-out}input[type=submit]:not(:disabled){cursor:pointer}input[type=submit]:disabled{background-color:#364636}input[type=submit]:active{transform:translateY(1px);background-color:#5dc85b}