:root{--color-black: #111017;--color-black-2: #24232c;--color-white: #ffffff;--color-green: #a4ffaf;--color-grey: #7d7c88;--color-grey-2: #b9b8c1;--color-yellow: #f3cd6a}*{margin:0;padding:0;box-sizing:border-box}main{padding-top:100px;min-height:80vh}.container{max-width:1280px;padding:0 20px;margin:auto}.main-heading{text-align:center;font-size:20px;color:var(--color-grey);margin-bottom:30px}.password-container{max-width:400px;margin:auto}.password{background-color:var(--color-black-2);color:var(--color-white);padding:20px;display:flex;align-items:center;justify-content:space-between;font-size:20px;position:relative}.password-config{margin-top:20px;padding:20px;background-color:var(--color-black-2);color:var(--color-white);font-size:14px}.password-length{display:flex;align-items:center;justify-content:space-between}.password-length-number{font-size:24px;color:var(--color-green)}input[type=range]{width:100%;margin:20px 0}input[type=range]{color:var(--color-green);--thumb-height: 20px;--track-height: 5px;--track-color: rgba(0, 0, 0, .2);--brightness-hover: 180%;--brightness-down: 80%;--clip-edges: 5px}input[type=range]{position:relative;background:var(--color-black-2);overflow:hidden}input[type=range]:active{cursor:grabbing}input[type=range],input[type=range]::-webkit-slider-runnable-track,input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;transition:all ease .1s;height:var(--thumb-height)}input[type=range]::-webkit-slider-runnable-track,input[type=range]::-webkit-slider-thumb{position:relative}input[type=range]::-webkit-slider-thumb{--thumb-radius: calc((var(--thumb-height) * .5) - 1px);--clip-top: calc((var(--thumb-height) - var(--track-height)) * .5 - .5px);--clip-bottom: calc(var(--thumb-height) - var(--clip-top));--clip-further:calc(100% + 1px);--box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;width:var(--thumb-width, var(--thumb-height));background-color:var(--color-white);box-shadow:var(--box-fill);border-radius:var(--thumb-width, var(--thumb-height));filter:brightness(100%);clip-path:polygon(100% -1px,var(--clip-edges) -1px,0 var(--clip-top),-100vmax var(--clip-top),-100vmax var(--clip-bottom),0 var(--clip-bottom),var(--clip-edges) 100%,var(--clip-further) var(--clip-further))}input[type=range]:active::-webkit-slider-thumb{filter:brightness(var(--brightness-down));cursor:grabbing}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px)}.password-label{cursor:pointer;display:flex;align-items:center;gap:20px;margin-bottom:15px}.password-label input{accent-color:var(--color-green);width:18px;height:18px}.password-strength{background-color:var(--color-black);padding:20px;margin:20px 0;display:flex;align-items:center;justify-content:space-between}.password-strength-text{color:var(--color-grey);text-transform:uppercase}.btn{width:100%;height:40px;background-color:var(--color-green);border:1px solid var(--color-green);text-transform:uppercase;font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;gap:15px;transition:background-color .3s;&:hover{background-color:transparent;border:1px solid var(--color-green);color:var(--color-green);img {filter: invert(1) saturate(120);}}}.strength-bar-meter{display:flex;align-items:center;gap:10px}.strength-bar-meter-text{color:var(--color-white);text-transform:uppercase;font-size:20px}.password-strength-bar{display:inline-flex;gap:5px}.strength-bar{display:block;width:7px;height:18px;border:1px solid var(--color-white)}.strength-bar--active{background-color:var(--color-yellow);border-color:var(--color-yellow)}.btn-copy{background:none;border:none;display:block;cursor:pointer}.copied-text{opacity:0;transition:opacity .3s;position:absolute;right:60px;font-size:14px;background-color:var(--color-black);color:var(--color-green);padding:5px 10px;text-align:center}.attribution{text-align:center;padding:20px;color:var(--color-white);a {color: var(--color-white);}}