*,:before,:after{box-sizing:border-box}*{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Open Sans,Helvetica Neue,sans-serif}body{color:#fff;background-color:#221f2f;justify-content:center;align-items:center;min-height:100vh;padding:0 1em;display:flex;overflow:hidden}body:before{content:"";filter:blur(140px);background-color:#db7093;width:120px;height:120px;position:absolute;top:30%;left:15%}body:after{content:"";filter:blur(140px);background-color:#8a2be2;width:120px;height:120px;position:absolute;bottom:30%;right:15%}.container{backdrop-filter:blur(7px);background-color:#0003;border:1px solid #0000001a;border-radius:1rem;width:30em;padding:1.5em 2.5em;box-shadow:0 4px 30px #0000001a}h1{text-align:center;margin-inline:auto;width:100%;margin-bottom:1em;font-size:1.7rem;font-weight:700}h2{color:#ffffffe6;margin-bottom:.3em;font-size:1.2rem}form input{color:#fff;background-color:#0000;border:1px solid #999;border-radius:4px;width:100%;padding:.6rem;font-size:1rem;transition:all .3s}form input:hover,form input:focus{border-color:#8a2be2}.convert{flex-direction:column;justify-content:space-between;display:flex}.from,.to{width:100%}.select-input{cursor:pointer;border:1px solid #999;border-radius:5px;align-items:center;width:100%;padding:.6em;transition:all .3s;display:flex}.select-input img{max-width:30px}.select-input select{cursor:pointer;color:#fff;background:0 0;border:none;width:100%;margin:0 -5px 0 5px;font-size:1rem}.select-input select option{color:#000}.amount{margin-bottom:1em}.reverse{margin-inline:auto;cursor:pointer;margin-top:1rem;rotate:90deg}.reverse img{fill:#fff}.result p{text-align:center;margin-block:1.5em;font-size:1rem}.btn{text-transform:uppercase;color:#fff;cursor:pointer;background-color:#20232c;border:1px solid #2b2f3b;border-radius:5px;width:100%;padding:1rem;font-size:.9rem;font-weight:600;transition:background .3s}.btn:hover{background-color:#2b2f3b}