*{margin:0;padding:0;box-sizing:border-box}html{min-height:100%}body{width:100%;height:100%;background-color:#e9e9eb;display:flex;justify-content:center;align-items:center;flex-direction:column;font-family:helvetica,Microsoft Yahei;font-size:18px;background-repeat:no-repeat;background-size:cover;background-position:center;background-attachment:fixed;overflow-x:hidden}body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;background:url(https://lzw.me/x/iapi/bing/api.php?n=10) center/cover no-repeat fixed;-webkit-filter:blur(7px);-moz-filter:blur(7px);-ms-filter:blur(7px);-o-filter:blur(7px);filter:blur(7px)}button{border:0;outline:0}.container{width:400px;height:600px;padding:10px 25px;background:#43506c;border-radius:10px;box-shadow:0 0 5px rgba(0,0,0,.45),0 4px 8px rgba(0,0,0,.35),0 8px 12px rgba(0,0,0,.15);font-family:Montserrat;position:absolute;transform:translate(-50%,-50%);top:50%;left:50%}.container h2.title{font-size:1.75rem;margin:10px -5px 30px;color:#fff}.result{position:relative;width:100%;height:65px;overflow:hidden}.result__info{position:absolute;bottom:4px;color:#fff;font-size:.8rem;transition:150ms ease-in-out;transform:translateY(200%);opacity:0}.result__info.right{right:8px}.result__info.left{left:8px}.result__viewbox{width:100%;height:100%;background:rgba(255,255,255,.08);border-radius:25px;color:#fff;text-align:center;line-height:65px}.result #copy-btn{position:absolute;top:var(--y);left:var(--x);width:38px;height:38px;background:#fff;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(0);transition:350ms cubic-bezier(.175, .885, .32, 1.275);cursor:pointer;z-index:2}.result #copy-btn:active{box-shadow:0 0 0 200px rgba(255,255,255,.08)}.result:hover #copy-btn{opacity:1;transform:translate(-50%,-50%) scale(1.35)}.field-title{position:absolute;top:-10px;left:8px;transform:translateY(-50%);font-weight:800;color:rgba(255,255,255,.5);text-transform:uppercase;font-size:.65rem;pointer-events:none;user-select:none}.options{width:100%;height:auto;margin:50px 0}.range__slider{position:relative;width:100%;height:calc(65px - 10px);display:flex;justify-content:center;align-items:center;background:rgba(255,255,255,.08);border-radius:25px;margin:30px 0}.range__slider::after,.range__slider::before{position:absolute;color:#fff;font-size:.9rem;font-weight:700}.range__slider::before{content:attr(data-min);left:10px}.range__slider::after{content:attr(data-max);right:10px}.range__slider .length__title::after{content:attr(data-length);position:absolute;right:-16px;font-variant-numeric:tabular-nums;color:#fff}#slider{-webkit-appearance:none;width:calc(100% - (70px));height:2px;border-radius:5px;background:rgba(255,255,255,.314);outline:0;padding:0;margin:0;cursor:pointer}#slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;cursor:pointer;transition:.15s ease-in-out}#slider::-webkit-slider-thumb:hover{background:#d4d4d4;transform:scale(1.2)}#slider::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:#fff;cursor:pointer;transition:background .15s ease-in-out}#slider::-moz-range-thumb:hover{background:#d4d4d4}.settings{position:relative;height:auto;widows:100%;display:flex;flex-direction:column}.settings .setting{position:relative;width:100%;height:calc(65px - 10px);background:rgba(255,255,255,.08);border-radius:25px;display:flex;align-items:center;padding:10px 25px;color:#fff;margin-bottom:8px}.settings .setting input{opacity:0;position:absolute}.settings .setting input+label{user-select:none}.settings .setting input+label::after,.settings .setting input+label::before{content:"";position:absolute;transition:150ms cubic-bezier(.24, 0, .5, 1);transform:translateY(-50%);top:50%;right:10px;cursor:pointer}.settings .setting input+label::before{height:30px;width:50px;border-radius:30px;background:rgba(214,214,214,.434)}.settings .setting input+label::after{height:24px;width:24px;border-radius:60px;right:32px;background:#fff}.settings .setting input:checked+label:before{background:#ef4b4c;transition:150ms cubic-bezier(0, 0, 0, .1)}.settings .setting input:checked+label:after{right:14px}.settings .setting input:focus+label:before{box-shadow:0 0 0 2px rgba(255,255,255,.75)}.btn.generate{user-select:none;position:relative;width:100%;height:50px;margin:10px 0;border-radius:25px;color:#fff;border:none;background-color:#3d6198;letter-spacing:1px;font-weight:700;text-transform:uppercase;cursor:pointer;transition:150ms}.btn.generate:active{transform:translateY(-3%);box-shadow:0 4px 8px rgba(255,255,255,.08)}.support{position:fixed;right:10px;bottom:10px;padding:10px;display:flex}a{color:#fff;transition:.4s}a:hover{color:#222}footer{text-align:center;padding:15px;margin:auto;max-width:80vw;color:#eee;font-size:14px;position:absolute;bottom:0}@media screen and (max-width:768px){.container{margin:0 auto;position:relative;transform:none;left:0;top:0}}