*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}.preload *{transition:none!important;-webkit-transition:none!important;-moz-transition:none!important;-ms-transition:none!important;-o-transition:none!important}body{font-family:Roboto,Arial,Helvetica,sans-serif;min-height:100vh;display:grid;place-content:center;background-image:linear-gradient(to right,rgba(41,50,60,1) 0%,rgba(72,85,99,1) 50%,rgba(41,50,60,1) 100%)}h1{color:#eee;font-size:36px;text-align:center;margin-bottom:16px}button{display:grid;place-content:center;font-size:28px;padding:8px;background-color:#f5f5f5;outline:none;border:2px solid #fff;transition:background-color .25s ease-out;overflow:hidden}button:hover{cursor:pointer;background-color:#cecece}.container{display:grid;grid-template-columns:repeat(4,100px);grid-template-rows:minmax(120px,auto) repeat(5,100px);border-radius:8px;overflow:hidden}.function{background-color:#ebebeb}.clear{grid-column:span 2;background-color:orange}.clear:hover{background-color:#e69500}.equals{background-color:#6cb1e9;border-bottom-right-radius:8px}.plus-minus{border-bottom-left-radius:8px}.equals:hover{background-color:#619fd2}.output{grid-column:1 / -1;background-color:#000000bf;display:flex;align-items:flex-end;justify-content:space-around;flex-direction:column;padding:10px;word-wrap:break-word;word-break:break-all}.output .history{color:#ffffffbf;font-size:24px;display:flex}.output .primary-operand{color:#fff;font-size:40px}.output .secondary-operand{margin-right:6px}