*{box-sizing:border-box;margin:0;padding:0}html{font-size:62.5%}body{font-size:1.6rem;font-family:sans-serif;display:flex;align-items:center;justify-content:center}.calculator{margin-top:5em;padding:1em;border:1px solid #c7c6c6;border-radius:5px;box-shadow:1px 1px 10px #00000021}.calculator--result{display:flex;align-items:center;justify-content:end;font-size:2rem;border:1px solid #c7c6c6;border-radius:5px;padding:1em .5em;margin-bottom:1em;max-width:100%;height:60px;background-color:#f3f1f1}.calculator__box{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:1em}.calculator__box--operator{background-color:#a0a0a0;color:#fff}.calculator__box--operator:hover{background-color:gray}.calculator__box--clear{background-color:tomato;color:#fff}.calculator__box--clear:hover{background-color:#fc4424}.calculator__box--equals{grid-column:4;background-color:orange;color:#fff}.calculator__box--equals:hover{background-color:#d98f04}.calculator__box--de{grid-column:3;background-color:#4169e1;color:#fff}.calculator__box--de:hover{background-color:#5d84f7}input{padding:1.2em;border:none;aspect-ratio:1;border-radius:5px;font-size:1.8rem;cursor:pointer;transition:background-color .3s}input:hover{background-color:#e2dede}