*{box-sizing:border-box}html{min-height:100%;display:flex;justify-content:center;align-items:center;font-family:"Trebuchet MS",sans-serif;background:url(/3452c09346c73808335623c7dba5ba3af99acbf5/bg.png)}body{margin:0}#gFrom,#gTo,#num,#result,.all,.all button{text-align:center;font-size:1.5rem;color:rgba(0,0,0,.85)}.all{padding:45px;border:1px solid rgba(0,0,0,.5);background:rgba(255,255,255,.65)}.all div{margin:10px 0}.all button{margin-top:20px;padding:3px 25px;cursor:pointer;font-size:1.4rem;background-image:linear-gradient(to bottom,#fff,#ededed);border:1px solid #b7b7b7;outline:0;border-radius:50px}.all button:hover{background-image:linear-gradient(to bottom,#fff,#dcdcdc);color:#000}#num{width:200px;outline:0;border:none;background-color:transparent;border-bottom:2px solid rgba(0,0,0,.2);transition:border-bottom .5s}#result{margin:15px 0;position:absolute;top:0;left:0;right:0;font-weight:700;font-size:2.5rem}.bar{position:relative;display:block;width:200px}.bar:after,.bar:before{content:'';height:2px;width:0;bottom:0;position:absolute;background:rgba(0,0,0,.5);transition:.2s ease all}.bar:before{left:119px}.bar:after{right:81px}input:focus~.bar:after,input:focus~.bar:before{width:50%}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none}