#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.bold{font-weight:900}header{text-align:left;max-width:800px;margin:0 auto}header h1{color:#f19e00}main{margin:2rem auto;padding:2rem;width:100%;max-width:800px;background-color:var(--color-background-secondary);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px}.app-background{position:fixed;z-index:-1;top:0;left:0;width:100%;height:100vh}.app-background img{width:100%;height:100%;object-fit:cover}.password__types{margin:2rem auto 3rem;width:max-content;height:5rem;display:flex;justify-content:center;background-color:var(--color-background-secondary);border-radius:30px}.password__types button{padding:.5rem 3rem;font-size:1.6rem;font-weight:700;border:none;color:var(--text-color);border-radius:30px;cursor:pointer}.password__types button.active{color:#fff;background-color:var(--checkbox-color)}form{max-width:600px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-top:2rem;gap:1rem}.form__field{width:100%;text-align:left}.theme{position:fixed;bottom:1rem;right:1rem}.theme button{aspect-ratio:1/1;display:flex;justify-content:center;align-items:center;border-radius:50%}input[type=checkbox]{display:none}.label__checkbox{position:relative}.field__example{text-decoration:line-through}.field__example.tachado{text-decoration:unset}.label__checkbox:before{content:"";display:inline-block;width:2rem;height:2rem;margin-right:1rem;border:1px solid var(--checkbox-color);border-radius:3px}.label__checkbox:after{content:"✔";position:absolute;top:-.2rem;left:0;width:2rem;height:2rem;display:none;place-content:center;color:#fff;font-size:2.2rem;line-height:2rem}@media screen and (max-width: 768px){.label__checkbox:after{font-size:1.6rem}}input[type=checkbox]:checked+.label__checkbox:before{background-color:var(--checkbox-color);border:1px solid transparent}input[type=checkbox]:checked+.label__checkbox:after{display:grid}input[type=checkbox]:checked+.label__checkbox .field__example{text-decoration:unset}input[type=checkbox]:checked+.label__checkbox .field__example.tachado{text-decoration:line-through}.field__example{margin-left:1rem;padding:.5rem 1rem;font-size:1.6rem;font-weight:700;background-color:var(--btn-color-hover);border-radius:8px}.password__container{position:relative;margin:0 auto;padding:1rem;max-width:600px;display:grid;grid-template-columns:1fr 4rem 4rem;justify-content:center;align-content:center;text-align:left;font-family:Roboto Mono,monospace;background-color:var(--password-background);color:#000;border-radius:10px}.password__container button{border:none;aspect-ratio:1/1;position:relative}.password__text{display:flex;flex-wrap:wrap;align-items:center}.password__text span{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.password__text span{display:inline-block}.password__text span.to-select{position:absolute;display:block;width:calc(100% - 8rem);white-space:normal;word-wrap:break-word;overflow-wrap:break-word;color:transparent;-webkit-touch-callout:unset;-webkit-user-select:unset;-khtml-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset}.char__letter{color:#70f}.char__number{color:#da3eda}.char__symbol{color:#248f44}.description__container{margin:3rem auto;padding-left:2rem;max-width:650px;font-size:1.6rem;text-align:left}.description__container h2{margin:5rem 0 1rem}.description__container p{margin:1rem 0}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none}.custom-range-container{display:flex;align-items:center;gap:10px}.custom-range-container button{aspect-ratio:1/1;width:30px;height:30px}.custom-range-container button svg{width:20px;height:20px}.custom-range-slider{margin:1rem 0;width:100%;max-width:300px;height:5px;border-radius:10px;outline:none;opacity:.7;-webkit-transition:.2s;transition:opacity .2s}.custom-range-slider:hover{opacity:1}.custom-range-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background:var(--checkbox-color);cursor:pointer;border-radius:50%}.custom-range-slider::-moz-range-thumb{width:20px;height:20px;background:var(--checkbox-color);cursor:pointer}.custom-range-slider:before{content:"";position:absolute;top:-10px;left:0;width:100%;height:10px;border-radius:10px}.range-value{min-width:40px;text-align:center}@keyframes rotateX{0%{transform:rotateX(0)}to{transform:rotateX(360deg)}}span.rotateX{animation:rotateX var(--speed) linear infinite}:root{font-family:Mulish,sans-serif;font-optical-sizing:auto;font-weight:400;font-style:normal;letter-spacing:.2px;line-height:1.5;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-background: #f8f8f8;--color-background-secondary: #ffffff65;--password-background: #f8f8f8;--color-text: #333;--color-text-light: #5f6368;--btn-color: #2E4756;--btn-color-hover: #e8f0fe;--checkbox-color: #2E6380}[data-theme=dark]{--color-background: #202124;--color-background-secondary: #ffffff1c;--password-background: #f1f1f1;--color-text: #dadce0;--color-text-light: #9aa0a;--btn-color: #8ab4f8;--btn-color-hover: #8ab4f836;--checkbox-color: #498c99}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{font-size:62.5%;scroll-behavior:smooth}body{font-size:2rem;background-color:var(--color-background);color:var(--color-text)}@media screen and (max-width: 768px){body{font-size:1.6rem}h1{line-height:1.2}}a{color:unset;text-decoration:none}img,a,label{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}button{padding:.5rem 1rem;display:grid;place-content:center;color:var(--btn-color);font-family:Mulish,sans-serif;font-optical-sizing:auto;font-weight:400;font-size:1.6rem;font-style:normal;letter-spacing:.2px;line-height:1.5;font-synthesis:none;text-rendering:optimizeLegibility;border:1px solid var(--btn-color);border-radius:2rem;background-color:unset}button:hover{background-color:var(--btn-color-hover);cursor:pointer}