* { box-sizing: border-box; }

html { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-family: 'Roboto'; }

body { background: #E8E8E8; }

.calculator { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 350px; height: 525px; border-radius: 20px; box-shadow: 0px 20px 40px #041936; background: #062145; }

.calculator .cal-header { position: relative; width: 100%; height: 109px; text-align: right; border-radius: 20px 20px 0px 20px; background: #041936; }

.calculator .cal-header .formula { position: absolute; top: 16px; right: 0px; padding: 0 16px; width: 100%; font-size: 16px; line-height: 1.2; color: #00C4FF; word-wrap: break-word; }

.calculator .cal-header .result { position: absolute; bottom: 16px; right: 16px; font-size: 56px; display: block; line-height: 1.2; color: #fff; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; }

.calculator .cal-body { width: 100%; padding: 0 8px; background: #062145; display: flex; flex-wrap: wrap; text-align: center; justify-content: space-between; border-radius: 0px 0px 20px 20px; }

.calculator .cal-body span { display: block; margin: 8px 0; text-align: center; width: 72px; height: 64px; line-height: 64px; border-radius: 16px; font-size: 24px; color: #fff; cursor: pointer; transition: .3s; }

.calculator .cal-body span:hover { transition: .3s; background: rgba(255, 255, 255, 0.1); }

.calculator .cal-body span.oper { background: #041936; }

.calculator .cal-body span.oper:hover { background: rgba(255, 255, 255, 0.1); }

.calculator .cal-body span.sum { padding: 0 30px 0 0; width: 152px; text-align: right; background: linear-gradient(to right, #00c4ff 0%, #6c00ff 100%); }

.calculator .cal-body span.sum:hover { background: rgba(255, 255, 255, 0.1); }

.calculator .cal-body span.back, .calculator .cal-body span.clear { color: #00C4FF; }