@import"https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;800&family=Roboto+Mono:wght@400;700&display=swap";[data-theme=dark]{--body-bg: radial-gradient(circle, rgba(0, 0, 0, .806) 0%, rgba(0, 0, 0, .842) 100%);--container-border: 5px solid rgb(190, 190, 190);--container-bg: rgb(125, 125, 125);--container-bg-image: linear-gradient(to bottom, rgba(68, 102, 133, .591), rgba(137, 37, 62, .473));--h2-gradient: linear-gradient(90deg, #2b2b2b 0%, rgb(50, 50, 50) 60%, rgb(114, 129, 203) 85%, rgba(227, 182, 225, 1) 90%, rgba(255, 205, 179, 1) 95%, rgb(255, 192, 192) 100%);--clipboard-bg: linear-gradient(45deg, rgba(142, 73, 103, .596) 0%, rgba(39, 79, 129, .655) 100%);--generate-btn-bg: linear-gradient(200deg, rgba(11, 32, 50, .747), rgba(98, 16, 36, .87));--label-color: #d8d8d8;--h2-color: rgba(255, 255, 255, 0)}.switch{display:block;margin:0 auto;--width-of-switch: 70px;--height-of-switch: 35px;--size-of-icon: 25px;--slider-offset: 5px;position:relative;width:var(--width-of-switch);height:var(--height-of-switch);transition:all 1s ease-out}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#f4f4f5;-webkit-transition:.4s;transition:.4s;border-radius:30px}.slider:before{position:absolute;content:"";height:var(--size-of-icon, 22px);width:var(--size-of-icon, 22px);border-radius:20px;left:var(--slider-offset, 5px);top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);background:linear-gradient(40deg,#ff0080,#ff8c00 70%);-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#303136}input:checked+.slider:before{left:calc(100% - (var(--size-of-icon, 22px) + var(--slider-offset, 5px)));background:#303136;-webkit-box-shadow:inset -3px -2px 5px -2px #8983f7,inset -10px -4px 0 0 #a3dafb;box-shadow:inset -3px -2px 5px -2px #8983f7,inset -10px -4px #a3dafb}:root{--body-bg: radial-gradient(circle, rgba(226, 226, 226, .7982725512079832) 0%, rgba(247, 247, 247, .69547143075980393) 100%);--container-bg: hsla(0, 0%, 100%, 1);--container-bg-image: radial-gradient(at 49% 46%, hsla(145, 25%, 71%, .235) 0px, transparent 60%), radial-gradient(at 92% 11%, hsla(189, 62%, 56%, .217) 0px, transparent 60%), radial-gradient(at 64% 27%, hsla(349, 61%, 93%, .317) 0px, transparent 60%), radial-gradient(at 84% 83%, hsla(340, 46%, 71%, .212) 0px, transparent 60%), radial-gradient(at 11% 84%, hsla(22, 44%, 71%, .258) 0px, transparent 60%), radial-gradient(at 57% 60%, hsla(240, 44%, 63%, .199) 0px, transparent 60%), radial-gradient(at 0% 0%, hsla(342, 61%, 76%, .203) 0px, transparent 60%);--container-border: 5px solid rgb(250, 250, 250);--h2-gradient: linear-gradient(90deg, #272727 0%, #3f3f3f 40%, rgb(148, 161, 225) 85%, rgb(239, 178, 236) 90%, rgb(244, 166, 123) 95%, rgb(249, 113, 113) 100%);--clipboard-bg: linear-gradient(45deg, rgba(238, 174, 202, .7) 0%, rgba(148, 187, 233, .7475722710959384) 100%);--generate-btn-bg: linear-gradient(35deg, hsl(334deg 65% 81%) -1%, hsl(268deg 34% 78%) 26%, hsl(212deg 66% 75%) 100%);--label-color: #333333}*{margin:0;padding:0;box-sizing:border-box;font-family:Manrope,sans-serif}body{font-size:18px;background:var(--body-bg)}section{height:100vh;position:relative;display:flex;justify-content:center;align-items:center}.container{margin:30px auto;padding:20px 40px 60px;border:var(--container-border);border-radius:10px;width:100%;max-width:500px;min-width:360px;-webkit-box-shadow:0px 39px 51px -24px rgba(0,0,0,.2);-moz-box-shadow:0px 39px 51px -24px rgba(0,0,0,.2);box-shadow:0 39px 51px -24px #0003;background-color:var(--container-bg);background-image:var(--container-bg-image);animation:bg-gradient-animation infinite;transition:all .5s ease-in-out}.h2-gradient{font-size:30px;padding-bottom:30px;text-align:center;-webkit-user-select:none;user-select:none;background:var(--h2-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;-moz-background-clip:text;-moz-text-fill-color:transparent;background-clip:text;background-size:800%!important;-webkit-animation:Gradient 15s ease-in-out infinite!important;-moz-animation:Gradient 15s ease-in-out infinite!important;animation:Gradient 15s ease-in-out infinite!important}#generator{-webkit-animation:replaceLetters 5s linear;-moz-animation:replaceLetters 5s linear;animation:replaceLetters 5s linear}form{border-radius:0 0 12px 12px}.result{display:flex;padding-bottom:30px;color:#000}.result .clipboard{width:85px;height:55px;padding:10px;background:var(--clipboard-bg);border-radius:0 10px 10px 0;cursor:pointer;border-top:1px solid rgba(255,255,255,.9);box-shadow:0 3px 5px #3c3c3c33;-webkit-user-select:none;user-select:none}#clipboard{display:block;max-width:100%;margin-left:auto;margin-right:auto;width:70%;-webkit-user-select:none;user-select:none}#clipboard:active{-webkit-animation:jello-horizontal .3s both;animation:jello-horizontal .3s both}#result{font-family:Roboto Mono,sans-serif;font-size:25px;font-weight:700;width:100%;border:none;border-bottom:1px solid rgb(201,201,201);border-top:1px solid rgb(255,255,255);border-right:1px solid rgb(201,201,201);padding:0 20px;background-color:#e9e9ed;border-radius:10px 0 0 10px;box-shadow:0 3px 3px #8686861a}input[type=text]::placeholder{font-size:16px;-webkit-user-select:none;user-select:none}.field{display:flex;justify-content:space-between;align-items:center;padding:5px 0}.field label{font-family:Roboto Mono,sans-serif;font-size:20px;font-weight:600;margin-left:20px;color:var(--label-color);-webkit-user-select:none;user-select:none}.field input[type=number]{font-family:Roboto Mono,sans-serif;font-weight:800;width:50px;height:30px;border:none;border-bottom:1px solid rgb(201,201,201);border-right:1px solid rgb(201,201,201);border-top:1px solid rgb(255,255,255);background-color:#e9e9ed;color:#333;border-radius:5px;text-align:center;padding-right:0;font-size:20px;margin-right:8px}.container input[type=checkbox]{opacity:.5;cursor:pointer;height:20px;width:20px;transform:translate(-30px)}#generate-button{width:100%;border:none;border-radius:10px;border-top:1px solid rgba(255,255,255,.815);font-size:23px;font-family:Roboto Mono,sans-serif;font-weight:800;background-image:var(--generate-btn-bg);color:#fff;margin-top:20px;padding:10px;cursor:pointer;box-shadow:0 3px 4px #3c3c3c30;-webkit-user-select:none;user-select:none}#generate-button:active,.clipboard:active{transform:translateY(-1px);box-shadow:none;animation:none;border-top:1px solid rgba(151,151,151,.393)}@media screen and (max-width: 420px){.container{padding:20px 30px 40px;border-radius:25px}input[type=text]::placeholder{font-size:13px}.field label{font-size:15px}.h2-gradient{font-size:24px}.result .clipboard{height:50px;padding:3px}#result{font-size:18px}}@-webkit-keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scaleZ(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scaleZ(1)}}@keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scaleZ(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scaleZ(1)}}@-webkit-keyframes bg-gradient-animation{0%{background-position:52% 0%}50%{background-position:49% 100%}to{background-position:52% 0%}}@-moz-keyframes bg-gradient-animation{0%{background-position:52% 20%}50%{background-position:25% 100%}to{background-position:52% 20%}}@keyframes bg-gradient-animation{0%{background-position:52% 20%}50%{background-position:25% 100%}to{background-position:52% 20%}}@-webkit-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 0%}to{background-position:0% 50%}}@-moz-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 0%}to{background-position:0% 50%}}@keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 0%}to{background-position:0% 50%}}