* {border:0;padding:0;margin:0;}
html {width:100%;height:100%;}
body {display:flex;align-items:center;justify-content:center;flex-direction:column;height:100%;font-family:'Lato', sans-serif;color:#58595b;}
.copiedtext {position:absolute;left:0;top:0;right:0;text-align:center;opacity:0;transform:translateY(-1em);color:#000;transition:all .500s;}
.copied .copiedtext {opacity:1;transform:translateY(-2em);}
h1 {font-family:'Lato', sans-serif;color:#5aa69d;text-transform:uppercase;font-size:1.6rem;}
textarea, button {font-size:1em;font-family:'Lato', sans-serif;}
textarea {display:block;width:300px;max-width:100%;height:80px;line-height:60px;background:#fff;resize:none;text-align:center;font-size:40px;color:#58595b;}
button {position:relative;padding:8px 20px;border:0;font-size:0.835em;text-transform:uppercase;color:#FFF;background:#58595b;transition:background .275s;}
button:hover,button:focus {background:#5aa69d;cursor:pointer;}
a.back {position:absolute;bottom:20px;color:#58595b;font-size:2rem;}
a.back:hover {color:#5aa69d;}
.app {padding:2rem;width:90%;max-width:600px;display:flex;align-items:center;flex-direction:column;justify-content:center;}
#password-output {background:none;border:none;font-size:1.5rem;width:100%;text-align:center;line-height:2;color:#5aa69d;}
#password-output:focus-visible {outline:none;}
#password {background:none;border:none;font-size:1.6rem;font-weight:bold;width:100%;}
.range-container {display:flex;width:100%;margin:3rem auto 0 auto;flex-direction:column;align-items:center;justify-content:center;}
input[type="range"] {-webkit-appearance:none;appearance:none;width:80%;background:#5aa69d;}
input[type="range"]::-webkit-slider-runnable-track {-webkit-appearance:none;appearance:none;height:4px;}
input[type="range"]::-webkit-slider-thumb {-webkit-appearance:none;appearance:none;width:10px;height:40px;background:#58595b;cursor:pointer;transform:translateY(-18px);transition:.15s ease;cursor:grab;}
input[type="range"]::-webkit-slider-thumb:active {cursor:grabbing;transform:scale(1.2) translateY(-15px);}
#display-password-length {width:30px;background:transparent;border:none;font-size:1rem;font-weight:bold;text-align:center;margin-top:2rem;font-family:'Lato', sans-serif;}
.checkbox-container {margin:36px 0 25px;display:flex;justify-content:space-around;align-items:center;gap:1rem;}
input[type="checkbox"] {display:none;}
label {user-select:none;height:60px;width:60px;display:grid;justify-items:center;align-items:center;transition:.2s ease;cursor:pointer;border-radius:50%;background:#58595b;color:#fff;}
input[type="checkbox"]:checked + label {background:#5aa69d;}