@keyframes copyAnimation{0%{opacity:1}to{opacity:0}}:root{--black: #323233;--white: #ffffff;--grey: #b1b1b1;--blue: #0066cc;--red: #cd262c}*{box-sizing:border-box;padding:0;margin:0}body,html{position:relative;background:black;font-size:62.5%;font-family:Inter,sans-serif}#app{width:100%;height:100vh;display:flex;align-items:center;justify-content:center}.title{margin:10px 0;font-size:3rem;color:var(--white);font-weight:black}.subtitle{font-size:1.5rem;text-align:center;color:var(--grey);margin-bottom:10px}.password-generator-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:300px;width:100%;max-width:500px;margin:auto;padding:10px 20px;color:var(--white)}.password-output-container{display:flex;justify-content:space-between;align-items:center;width:100%;margin:10px 0;padding:15px;font-size:1.6rem;color:var(--grey);background:var(--black);border-radius:10px}.password-configuration-container{border-radius:10px;width:100%;padding:15px;margin:15px 0;background:var(--black)}.password-length-info{display:flex;justify-content:space-between;align-items:center;margin:20px 0;font-size:1.4rem;font-weight:500}.password-length-info h3{font-size:2.4rem;font-weight:700}.range-input{width:100%}.input-container{display:flex;align-items:center;justify-content:flex-start;margin:20px 0}.input-container h2{font-size:1.8rem;margin-left:17px}.input-container input[type=checkbox]{width:20px;height:20px}.output-strength-container{display:flex;align-items:center;justify-content:space-between;margin:20px 0;font-size:1.2rem}.password-configuration-container button{height:50px;width:100%;margin:10px 0}.rectangle-container{display:flex;height:30px}.rectangle{width:10px;height:30px;margin:0 5px;background:var(--white)}.button{padding:10px;border-radius:8px;border:none;background:var(--blue);color:var(--white);font-weight:700;cursor:pointer}.button:hover{transition:background-color .3s ease;background:var(--white);color:var(--black)}.button-copy{background-color:var(--red);color:var(--white)}.copy-alert-container{display:none;position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;align-items:center;justify-content:center;width:150px;height:75px;background:var(--white);font-size:2rem;border-radius:15px;animation-name:copyAnimation;animation-duration:1s;animation-fill-mode:both}