html,body{margin:0;padding:0}h1,p{margin:0}.main-container{height:100vh;display:flex;justify-content:center;align-items:center;flex-direction:column}.calculator{border-radius:1rem;padding:2rem 1.5rem 1.5rem;width:90%;max-width:350px;background-color:var(--bgCalc);display:flex;flex-direction:column;gap:2rem;box-shadow:0 0 30px #186477}.calculator__display{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding-right:1rem;border:var(--borderCalculator);background:var(--bgDisplayCalc);height:6rem;overflow:hidden;white-space:nowrap;box-sizing:border-box;border-radius:.5rem;box-shadow:inset -5px 10px 15px -7px #000000a8}.calculator__buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.calculator__procedure{font-size:2.4rem;border-right:2px solid #008fb3;padding-left:5px;animation:blink .9s infinite linear}@keyframes blink{20%{border-right:2px solid #008fb3}50%{border-right:2px solid #008fb300}to{border-right:2px solid #008fb3}}@media only screen and (max-height: 320px){.calculator__buttons>.btn{padding:.1rem 0}}@media only screen and (max-width: 767px){.calculator{padding:1rem .5rem;gap:.5rem}.calculator__display{height:3rem;padding-right:.4rem}.calculator__buttons{gap:2px}.calculator__buttons>.btn{font-size:1.4rem;margin:.2rem}.calculator__procedure{font-size:1.5rem}}@media only screen and (min-width: 768px) and (max-width: 1023px){.calculator{padding:1rem;gap:1rem}.calculator__display{height:4rem}.calculator__buttons>.btn{font-size:1.8rem}.calculator__procedure{font-size:2rem}}.btn{font-size:2rem;cursor:pointer;padding:.5rem 0;border:none;border-radius:12px;color:var(--textColor);outline:none}.btn:hover{filter:brightness(var(--brightnessButton));transition:all .2s ease}.btn--blue:hover{filter:brightness(var(--brightnessButtonBlue))}.btn__text--red{color:var(--redButton);font-weight:700}.btn--rotate{transform:rotate(180deg)}.btn--dark{color:var(--colorButtonDark);background-color:var(--backgroundColorDark)}.btn--light{background-color:var(--backgroundColorLight)}.btn--blue{background-color:#107f9b;color:#fff}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#333;background-color:#fff;--redButton: #da301d;--textColor: #333;--bgCalc: #e7e7e7;--colorButtonDark: #299ab6;--bgDisplayCalc: #d8d8d8;--borderCalculator: solid 2px #008fb3;--borderButtons: solid 2px #05a0c7d3;--backgroundColorDark: #cacaca;--backgroundColorLight: #b4b4b4;--brightnessButton: 90%;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme: dark){:root{color:#fff;background-color:#202020;--redButton: #bd3526;--bgCalc: #2c2c2c;--textColor: #d8d8d8;--bgDisplayCalc: #3d3d3d;--borderCalculator: solid 2px #1d6070;--borderButtons: solid 1px rgb(241, 0, 0);--colorButtonDark: #268097;--backgroundColorDark: #222;--backgroundColorLight: #181818;--brightnessButton: 150%;--brightnessButtonBlue: 120%}}