@font-face{font-family:"GoogleSans";src:url(../assets/fonts/GoogleSans-VariableFont_GRAD\,opsz\,wght.ttf) format("truetype");font-weight:100 1000;font-style:normal;font-display:swap}:root{--william:#36656B;--william-RGB:54, 101, 107;--comfort-green:#75B06F;--comfort-green-RGB:117, 176, 111;--citrusy-mustard:#DAD887;--citrusy-mustard-RGB:218, 216, 135;--citrusy-green-yellow:#F0F8A4;--citrusy-green-yellow-RGB:240, 248, 164;--dark-seafoam:#18B779;--white:#FFF;--black:#000;font-family:"GoogleSans",Roboto,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;font-size:20px;scroll-behavior:smooth;color:var(--white)}::selection{background-color:var(--william);color:var(--citrusy-green-yellow)}::-moz-selection{background-color:var(--william);color:var(--citrusy-green-yellow)}::-webkit-scrollbar{width:.62rem}::-webkit-scrollbar-track{background-color:var(--william)}::-webkit-scrollbar-thumb{background-color:rgb(var(--comfort-green-RGB),75%)}::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--comfort-green-RGB),100%)}*{box-sizing:border-box}body{height:100vh;display:flex;flex-direction:column;align-content:space-between;background-color:var(--citrusy-green-yellow)}button,input{font:inherit}button:disabled,input:disabled{opacity:50%;cursor:not-allowed}header,footer{background-color:var(--william);padding:1rem}header{position:sticky;top:0;z-index:1}nav{width:100%;display:flex;align-items:center;justify-content:center}nav>#page-title{font-size:1.8rem;font-weight:700}.container{width:60%;background-color:var(--comfort-green)}.splitter{width:100%;outline:none;border:none;background-color:var(--white);height:2px}.btn{display:flex;flex-grow:1;align-items:center;justify-content:center;cursor:pointer;font-weight:700;padding:.5rem;border:none;background:var(--white);color:var(--comfort-green);border-radius:.42rem;-webkit-border-radius:.42rem;-moz-border-radius:.42rem;-ms-border-radius:.42rem;-o-border-radius:.42rem;transition:all 150ms ease-out;-webkit-transition:all 150ms ease-out;-moz-transition:all 150ms ease-out;-ms-transition:all 150ms ease-out;-o-transition:all 150ms ease-out}.btn:active:enabled{transform:scale(.98);-webkit-transform:scale(.98);-moz-transform:scale(.98);-ms-transform:scale(.98);-o-transform:scale(.98)}.hidden{display:none;visibility:hidden}#main-page.hidden,#saved-passwords-page.hidden{display:none}#menu{display:flex;align-items:center;justify-content:space-between;flex-direction:column;cursor:pointer;gap:6px;position:sticky;left:100%;user-select:none}#menu>span{width:36px;height:6px;border:none;border-radius:500px;background:var(--white);display:block;transition:all 150ms ease-out;-webkit-transition:all 150ms ease-out;-moz-transition:all 150ms ease-out;-ms-transition:all 150ms ease-out;-o-transition:all 150ms ease-out}#menu>.close-line{transform-origin:center;margin:0;position:absolute;transition:all 150ms}#main-page{height:100%;display:flex;align-items:center;flex-direction:column;justify-content:space-between}#inputs{display:flex;flex-direction:column;justify-content:space-between;gap:1rem;padding:2rem 1rem;border-radius:0 0 1.25rem 1.25rem;-webkit-border-radius:0 0 1.25rem 1.25rem;-moz-border-radius:0 0 1.25rem 1.25rem;-ms-border-radius:0 0 1.25rem 1.25rem;-o-border-radius:0 0 1.25rem 1.25rem}#password-configurations{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem}#password-configurations>input{flex-grow:1;user-select:text;display:flex;align-items:center;justify-content:center;border:none;outline:none;padding:.24rem;border-radius:.42rem;-webkit-border-radius:.42rem;-moz-border-radius:.42rem;-ms-border-radius:.42rem;-o-border-radius:.42rem;transition:all 150ms ease-out;-webkit-transition:all 150ms ease-out;-moz-transition:all 150ms ease-out;-ms-transition:all 150ms ease-out;-o-transition:all 150ms ease-out}#password-configurations>input::placeholder,#password-configurations>input#password-length{text-align:center}#password-characters{display:flex;flex-direction:column;gap:1rem;width:100%}#password-characters>.characters{display:flex;justify-content:space-between;gap:.5rem}#password-characters>.characters>label{display:flex;user-select:none;cursor:pointer}#password-characters>.characters>label>input{appearance:none;-webkit-appearance:none;cursor:pointer;border:none;margin:0 .32rem 0 0;padding:.42rem;height:.76rem;width:.76rem;background-color:var(--white);display:flex;align-items:center;justify-content:center;transition:all 150ms ease-out;-webkit-transition:all 150ms ease-out;-moz-transition:all 150ms ease-out;-ms-transition:all 150ms ease-out;-o-transition:all 150ms ease-out;border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;-o-border-radius:100%}#password-characters>.characters>label>input:checked{background-color:var(--dark-seafoam)}#password-characters>.characters>label>input:checked::before{content:"✔";color:var(--white)}#password-characters>.characters>p{letter-spacing:3px;overflow-wrap:anywhere}#generated-password-box{border:none;gap:.5rem;padding:2rem;display:flex;justify-content:space-evenly;border-radius:1.25rem;-webkit-border-radius:1.25rem;-moz-border-radius:1.25rem;-ms-border-radius:1.25rem;-o-border-radius:1.25rem;transition:all 150ms ease-out;-webkit-transition:all 150ms ease-out;-moz-transition:all 150ms ease-out;-ms-transition:all 150ms ease-out;-o-transition:all 150ms ease-out}#generated-password{opacity:1;cursor:initial;flex-grow:1;padding:.24rem;border:none;outline:none;background:var(--white);font-size:.84rem;color:var(--comfort-green);font-weight:600;letter-spacing:1px;font-family:monospace;border-radius:.42rem;-webkit-border-radius:.42rem;-moz-border-radius:.42rem;-ms-border-radius:.42rem;-o-border-radius:.42rem;transition:all 150ms ease-out;-webkit-transition:all 150ms ease-out;-moz-transition:all 150ms ease-out;-ms-transition:all 150ms ease-out;-o-transition:all 150ms ease-out}#save-password-btn{max-width:5rem;padding:.24rem;transition:all 150ms ease-out;-webkit-transition:all 150ms ease-out;-moz-transition:all 150ms ease-out;-ms-transition:all 150ms ease-out;-o-transition:all 150ms ease-out}#alerts{--color:var(--dark-seafoam);color:var(--color);text-shadow:0 0 12px var(--color)}#alerts.error{--color:#7A0000}#action-buttons{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border-radius:1.25rem 1.25rem 0 0;-webkit-border-radius:1.25rem 1.25rem 0 0;-moz-border-radius:1.25rem 1.25rem 0 0;-ms-border-radius:1.25rem 1.25rem 0 0;-o-border-radius:1.25rem 1.25rem 0 0}#saved-passwords-page{display:flex;align-items:flex-start;justify-content:center;padding:.84rem 0}#saved-passwords{width:80%;display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;gap:.84rem}.saved-password{--color:var(--william);--border-color:var(--comfort-green);background:var(--color);padding:.84rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;position:relative;border:1px solid var(--border-color);border-radius:1.25rem;-webkit-border-radius:1.25rem;-moz-border-radius:1.25rem;-ms-border-radius:1.25rem;-o-border-radius:1.25rem}.saved-password:nth-child(even){--color:var(--comfort-green);--border-color:var(--william)}.saved-password::before{--side-size:0.84rem;--padding:0.12rem;content:attr(data-number);text-align:center;position:absolute;padding:var(--padding);font-size:var(--side-size);width:var(--side-size);height:var(--side-size);line-height:1.1;font-weight:500;top:calc(0% - ((var(--side-size) - var(--padding)) / 2));left:calc(0% - ((var(--side-size) - var(--padding)) / 2));background-color:var(--color);border:1px solid var(--border-color);border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;-o-border-radius:100%}.saved-password>.password-title{font-weight:700}.saved-password>input[name="password"]{text-align:center;background-color:var(--white);width:100%;border:none;padding:0;cursor:initial;user-select:all;opacity:1;font-weight:600;color:var(--color);border-radius:.42rem;-webkit-border-radius:.42rem;-moz-border-radius:.42rem;-ms-border-radius:.42rem;-o-border-radius:.42rem}.saved-password>.password-action-buttons{width:100%;display:flex;align-items:center;gap:.42rem;font-size:.84rem;color:var(--color)}.saved-password>.password-action-buttons>.btn{padding:.24rem .42rem;color:inherit}.saved-password>.create-date{font-size:.72rem;letter-spacing:1px;font-family:monospace}footer{text-align:center}footer a{--color:var(--citrusy-green-yellow);color:inherit;text-decoration:none;position:relative;transition:all 150ms ease-out;-webkit-transition:all 150ms ease-out;-moz-transition:all 150ms ease-out;-ms-transition:all 150ms ease-out;-o-transition:all 150ms ease-out}footer a::before{content:"";width:0;height:2px;background-color:var(--white);position:absolute;top:100%;border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px;-ms-border-radius:100px;-o-border-radius:100px;transition:all 150ms ease-out;-webkit-transition:all 150ms ease-out;-moz-transition:all 150ms ease-out;-ms-transition:all 150ms ease-out;-o-transition:all 150ms ease-out}footer a:hover{color:var(--color)}footer a:hover::before{width:100%;background-color:var(--color)}@media (max-width:768px){:root{font-size:18px}.container{width:80%}#password-characters>.characters>p{letter-spacing:2px}}@media (max-width:576px){:root{font-size:16px}body{background-color:var(--comfort-green)}.container{width:100%}#password-characters>.characters{flex-direction:column}#password-characters>.characters>p{letter-spacing:1.5px}#inputs,#generated-password-box,#action-buttons{border-radius:0;-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;-o-border-radius:0}#generated-password-box{padding:1rem}#generated-password{font-size:1rem}#alerts,#alerts.error{--color:var(--black)}#saved-passwords-page{background-color:var(--citrusy-green-yellow);flex-grow:1}}