/* Google Fonts - Poppins */
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "Poppins", sans-serif;
 }
 body {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   background-image: url("https://images.wallpaperscraft.com/image/single/gradient_blur_abstraction_157512_1920x1080.jpg");
 }
 .wrapper {
   position: relative;
   max-width: 300px;
   width: 100%;
   background: #fff;
   border-radius: 12px;
   padding: 30px 25px;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
 }
 .wrapper .password-box {
   position: relative;
   height: 50px;
 }
 .password-box input {
   height: 100%;
   width: 100%;
   border-radius: 8px;
   padding: 0 45px 0 15px;
   border: 1px solid #aaa;
   background-color: transparent;
 }
 .password-box .copy-icon {
   position: absolute;
   right: 15px;
   top: 50%;
   color: #707070;
   font-size: 20px;
   cursor: pointer;
   transform: translateY(-50%);
 }
 .copy-icon:hover {
   color: #826afb;
 }
 .wrapper .range-box {
   display: flex;
   align-items: center;
   margin-top: 20px;
 }
 .range-box input {
   width: 100%;
   height: 5px;
   accent-color: #826afb;
   cursor: pointer;
 }
 .range-box .slider-number {
   min-width: 30px;
   text-align: right;
   font-size: 17px;
   color: #707070;
 }
 
 .wrapper .generate-button {
   width: 100%;
   color: #fff;
   padding: 12px 0;
   margin-top: 20px;
   background: #927dfc;
   background: rgb(63,94,251);
   background: rgb(2,0,36);
   background: rgb(23,45,252);
   background: linear-gradient(90deg, rgba(23,45,252,1) 0%, rgba(4,199,240,1) 49%, rgba(29,0,255,0.9893207282913166) 100%);
   border: none;
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s ease;
 }
 .generate-button:hover {
   background-color: #826afb;
 }