@import"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap";@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap";:root{--main-color: #eee;--background-color: #263238;--form-background1: #555;--form-background2: #455a64;--form-border-color: #37474f;--submit-background-color: #00796b;--submit-hover-color: #006d60}*{border:0;line-height:1;margin:0;padding:0;box-sizing:border-box}html{color:var(--main-color);background:var(--background-color);font-size:62.5%}body{font-family:Poppins,sans-serif;font-size:1.6rem;font-weight:400;min-height:100vh;overflow:hidden}.logo{display:flex;text-align:center;justify-content:center;align-items:center;height:12vh}.logoContent{display:flex;gap:1rem;align-items:center}.logo svg{width:4.8rem;color:var(--submit-background-color)}.logo h1{text-align:center;font-size:2.6rem}main{display:flex;flex-direction:column;gap:1.8rem;max-width:1080px;margin:auto;padding:0 10px}form{background:var(--form-background2);border-radius:1rem;padding:1.5rem 2.5rem;display:flex;justify-content:space-between;align-items:center;font-size:1.8rem}input{border-radius:5px;width:10rem;font-size:2.2rem;padding:.5rem;margin:.2rem;background-color:var(--main-color)}input:focus,input:active{outline:3px solid var(--submit-background-color)}button{font-family:inherit;background:var(--submit-background-color);border-radius:5px;color:var(--main-color);font-size:2.2rem;letter-spacing:.7px;font-weight:600;padding:.75rem 1.4rem;text-transform:uppercase;cursor:pointer;transition:.2s ease-out}button:focus,button:active{outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}button:hover{background:var(--submit-hover-color);box-shadow:0 10px 20px #0000001a;color:#fff}button:active{transform:translateY(3px);box-shadow:0 5px 10px #0000001a}.calculate{margin-right:.4rem}.clearAll{height:6rem}#percentageDifference br{display:none}@media (max-width: 760px){form{flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem;gap:2rem;line-height:2}}@media (max-width: 520px){form{padding:.8rem;height:22vh}#percentageDifference .values{line-height:2.5}#percentageDifference br{display:block}input{font-size:1.8rem}button{font-size:1.6rem;padding:.75rem}}@media (max-width: 390px){form{padding:0;font-size:1.6rem}input{width:8rem;font-size:1.6rem}button{font-size:1.4rem}}