body{margin:0;font-family:Karla,sans-serif;color:#fff}h1{padding:0;margin:0}button{height:40px;width:120px;font-size:14px;border:none;background-color:#273549;color:#4adf86;text-align:center}#main{padding:40px;width:550px;background-color:#1f2937;margin:40px auto;border:4px solid #fff;box-shadow:0 0 3px #000;border-radius:10px}.title{padding:0;margin:0;line-height:10px}.highlight{color:#4adf86}#sub-title{padding:0;margin:0;font-weight:400;font-size:20px}#settings{font-size:16px;margin:60px auto 40px}.strength-cont{display:flex;justify-content:center;margin:20px auto 40px}.str-meter{height:20px;width:160px;border:none;border-radius:6px;margin:40px 0;background-color:#273549;border-top:1px solid #fff;border-bottom:1px solid #fff}#weak{border-top-right-radius:0;border-bottom-right-radius:0}#medium{border-radius:0}#strong{border-top-left-radius:0;border-bottom-left-radius:0}.strength-btn{border:none;background-color:#273549;color:#4adf86;margin:0 10px;box-shadow:0 0 3px #fff;border-radius:6px}.strength-btn:hover{background-color:#1f2937}#length-cont{display:flex;justify-content:center;align-items:center;width:120px;box-shadow:0 0 3px #fff;border-radius:6px;margin:20px 10px}.length-number{height:40px;width:40px;font-size:18px;text-align:center;background-color:#273549;color:#4adf86;border:none}.length-number:hover:active{color:#fff}#length-text{line-height:40px;color:#fff}#minus-btn{border-bottom-left-radius:6px;border-top-left-radius:6px;font-size:26px}#plus-btn{border-top-right-radius:6px;border-bottom-right-radius:6px;font-size:26px}.length-number:hover{color:#73b09bfd}#result{display:flex;flex-direction:column}#generate-btn{width:180px;margin:0 auto 20px;background-color:#0b8b60;color:#fff;border-radius:6px;box-shadow:0 0 2px #fff}#generate-btn:hover{background-color:#056545}#generate-btn:hover:active{background-color:#fff;color:#0b8b60;border:2px solid #0b8b60}.password-cont{display:flex;justify-content:center;border-top:2px solid #273549}.password-btn{margin:20px;width:180px;border-radius:6px;box-shadow:0 0 4px #0b8b60;color:#4adf86}.password-btn:hover{border:2px solid #fff}.password-btn:hover:active{background-color:#3b4f6c}.meter-cont{display:flex;flex-direction:column;align-items:center;margin-top:-6px}#meter{width:280px;height:40px;border:1px solid #ccc;border-radius:6px;margin:0 auto 20px}#meter-text{color:#fff;font-size:18px;font-weight:700;text-shadow:0 0 3px #fff;margin:-52px auto 60px;z-index:2;opacity:0}#gen-text{margin:30px auto 10px;color:#fff}.container{max-width:590px;margin:40px auto;padding:20px;text-align:center;border:4px solid #fff;box-shadow:0 0 3px #000;border-radius:10px;background-color:#1f2937}.footer{max-width:590px;margin:40px auto;text-align:center;padding:40px;padding-top:5px;padding-bottom:10px;color:#3b3636;font-size:18px}.footer ul{list-style:none;margin:0;padding-right:20px;text-align:center}.footer li{display:inline-block;margin-right:20px}.footer a{color:#1f2937;text-decoration:none}.footer a:hover{text-decoration:underline}@media screen and (max-width: 768px){#main{width:70%;margin:10px auto}.strength-cont{flex-direction:column}.str-meter{max-width:100%}.form-column{display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.form-group{margin-right:10px}.form-group:last-child{margin-right:0}#settings{font-size:14px;margin:10px auto}.length-number{height:30px;width:30px;font-size:16px}}