*{font-family:"Open Sans";user-select:none}body{margin:0;padding:0;background:gray;width:100%;height:100vh}body .calculator{background:#c8d4d8;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);max-width:250px;height:fit-content;border-radius:2rem}body .calculator .screenResult{background:linear-gradient(180deg, #edecec 28%, #c8d4d8 84%);text-align:center;border-radius:2rem 2rem 0 0;width:100%;overflow:hidden}body .calculator .screenResult::before{content:"";width:60%;height:2rem;background:gray;border-radius:15px;position:absolute;top:-13px;left:50%;transform:translateX(-50%);box-sizing:border-box}body .calculator .screenResult .screenContainer{float:right;width:90%;height:12rem;overflow:hidden;position:relative}body .calculator .screenResult .screenContainer .currentOperation{font-size:3rem;font-weight:bold;color:#575858;white-space:nowrap;text-overflow:ellipsis;background:none;border:none;width:min-content;outline:none;position:absolute;top:50%;right:2rem}body .calculator .screenResult .screenContainer .currentOperation::after{content:"";position:absolute;top:0;left:0;height:100%;width:1rem}body .calculator .screenResult .screenContainer .currentOperation.errorMsg{font-size:1.7rem;padding-top:20px}body .calculator .screenResult .screenContainer .prevOperation{position:absolute;top:4.5rem;left:50%;transform:translate(-50%, 0);font-weight:bold;color:#575858;font-style:italic}body .calculator .screenButtons{padding:3rem 1.2rem 5px 1.2rem;box-sizing:border-box;border-radius:10px 10px 2rem 2rem;background:#f1f5f6;display:grid;grid-auto-flow:row;grid-template-columns:repeat(4, 50px);grid-gap:5px}body .calculator .screenButtons .button{outline:none;border-radius:6px;background-color:transparent;padding:10px 20px;border:none;font-family:"Open Sans";font-size:20px;display:flex;align-items:center;justify-content:center;color:#575858;cursor:pointer;transition:.3s background-color;animation-timing-function:cubic-bezier(0.075, 0.82, 0.165, 1)}body .calculator .screenButtons .button:hover{background-color:rgba(165,165,165,.253)}body .calculator .screenButtons .button.doubleSpace{grid-column-start:1;grid-column-end:3;justify-content:flex-start}body .calculator .screenButtons .button.equalButton{background:#575858;color:#fff;border-radius:50%}body .calculator .screenButtons .button.equalButton:hover{background:#747575}