html,body{margin:0;padding:0}body,input{display:flex;justify-content:center;align-items:center;}*,*:before,*:after{box-sizing:border-box}html,body{width:100%;height:100%;font-family:"Poppins",sans-serif}body{width:100%;height:100%;overflow:hidden;background:#d4fce4}.container{position:relative;bottom: 50px;border-radius:100vw;width:300px;height:60px;}.ripple{position:absolute;width:180px;height:70px;z-index:90;right:0;transition:-webkit-transform 0.2s;transition:transform 0.2s;transition:transform 0.2s,-webkit-transform 0.2s;transition:transform 0.2s;display:flex;justify-content:flex-end;align-items:center;padding:0 25px;overflow:hidden;border-radius:100vw;pointer-events:none}.ripple.animate:before{-webkit-animation:clicked 0.4s forwards cubic-bezier(0.5,0.61,0.36,1);animation:clicked 0.4s forwards cubic-bezier(0.5,0.61,0.36,1)}.ripple:before{content:"";background:rgba(0,0,0,0.1);width:100px;height:100px;position:absolute;top:50%;right:41px;border-radius:50%;opacity:0;-webkit-transform:translate(50%,-50%) scale(0.5);transform:translate(50%,-50%) scale(0.5);pointer-events:none}@-webkit-keyframes clicked{0%{opacity:0;-webkit-transform:translate(50%,-50%) scale(0.5);transform:translate(50%,-50%) scale(0.5)}10%{opacity:0.8}100%{opacity:0;-webkit-transform:translate(50%,-50%) scale(1.2);transform:translate(50%,-50%) scale(1.2)}}@keyframes clicked{0%{opacity:0;-webkit-transform:translate(50%,-50%) scale(0.5);transform:translate(50%,-50%) scale(0.5)}10%{opacity:0.8}100%{opacity:0;-webkit-transform:translate(50%,-50%) scale(1.2);transform:translate(50%,-50%) scale(1.2)}}.toggle{position:absolute;width:85px;height:60px;background:transparent;z-index:100;right:0;top:0;transition:-webkit-transform 0.2s;transition:transform 0.2s;transition:transform 0.2s,-webkit-transform 0.2s;display:flex;justify-content:center;align-items:center;padding:0;overflow:hidden;border-radius:100vw;cursor:pointer}.toggle:before{content:"";display:block;position:absolute;left:35px;top:25px;height:2px;background:black;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:rotateZ(46deg);transform:rotateZ(46deg);transition:width 0.13s ease-out}.toggle[data-state="visible"]:before{width:25px}.toggle[data-state="hidden"]:before{width:0}.toggle .eye{fill:#000000;transition:-webkit-transform .13s linear;transition:transform .13s linear;transition:transform .13s linear,-webkit-transform .13s linear;stroke-width:0;-webkit-transform:scale(1) rotateY(0);transform:scale(1) rotateY(0)}.toggle .eye path{fill:none;stroke-width:1.5;stroke-miterlimit:5;stroke:#000000}.toggle:active{-webkit-transform:scale(0.9);transform:scale(0.9)}.toggle:active + input{-webkit-transform:rotateY(1deg);transform:rotateY(1deg);letter-spacing:1.5px;box-shadow:3px 0px 15px 0px #c1e6d0;cursor:text}.toggle:active + input.password{letter-spacing:3px}.toggle:active:before{-webkit-transform:rotateZ(46deg) rotateY(5deg);transform:rotateZ(46deg) rotateY(5deg)}.toggle:active .eye{-webkit-transform:scale(0.75) rotateY(5deg);transform:scale(0.75) rotateY(5deg)}input{width:300px;height:60px;background:#ffffff;border-radius:10px;will-change:transform;border-radius:100vw;transition:all 0.2s ease;cursor:pointer;color:#ffffff;font-size:22px;color:#000000;outline:none;text-align:left;border:0;padding:10px 80px 10px 30px;-webkit-transform-origin:left center;transform-origin:left center;transition:-webkit-transform 0.13s;transition:transform 0.13s;transition:transform 0.13s,-webkit-transform 0.13s;font-family:"Poppins",sans-serif;box-shadow:0px 0px 30px 0px #f2d3da;transition:letter-spacing 0.13s ease-out,box-shadow 0.13s ease-out}input::-moz-selection{background:#d4fce4}input::selection{background:#d4fce4}input::-webkit-input-placeholder{color:#c1e6d0}input:-ms-input-placeholder{color:#c1e6d0}input::-ms-input-placeholder{color:#c1e6d0}input::placeholder{color:#c1e6d0}input.password{letter-spacing:1px}.box{background:#ffffffd4;height:100vh;width:100%;text-align:center;display:flex;justify-content:center;align-items:center}