body{display:flex;justify-content:center;align-items:center;background-color:#ab61e4;min-height:100vh;overflow:hidden;color:#fff}.calculator{--header-bg:hsla(0,0%,100%,.2);--body-bg:hsla(0,0%,100%,.3);--button-bg:hsla(0,0%,100%,.2);--button-bg-hover:hsla(0,0%,100%,.3);--button-highlight-bg:hsla(0,0%,100%,.5);--button-highlight-bg-hover:hsla(0,0%,100%,.3);transition:all .8s cubic-bezier(.075,.82,.165,1) 0s;position:relative;width:280px;box-shadow:0 40px 80px #18204f,inset 0 0 0 .5px #fff;border-radius:15px;z-index:10}.calculator:hover{margin-bottom:5px}.calculator:hover~.calculator-back{transform:skewY(18deg);width:35%}.calculator.dark{--header-bg:rgba(2,14,39,.2);--body-bg:rgba(2,14,39,.3);--button-bg:rgba(2,14,39,.2);--button-bg-hover:hsla(0,0%,100%,.1);--button-highlight-bg:rgba(2,14,39,.5);--button-highlight-bg-hover:hsla(0,0%,100%,.15)}.calculator-header{position:relative;background-color:var(--header-bg);padding:30px 30px 15px 30px;text-align:right;border-top-left-radius:15px;border-top-right-radius:15px;-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);box-shadow:inset 0 2px 1px hsla(0,0%,100%,.1)}.calculator-body{position:relative;background-color:var(--body-bg);padding:15px;border-bottom-left-radius:15px;border-bottom-right-radius:15px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);min-height:250px}.calculator-operation{display:flex;justify-content:end;height:20.5px;font-size:18px;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;-webkit-transition:font-size .1s}.calculator-operation.active{font-size:140%}.calculator-operation-result{height:48.5px;font-size:42px;font-weight:700;-webkit-transition:line-height .2s;line-height:1}.calculator-operation-result.active{line-height:4}.calculator-button{position:relative;display:block;height:100%;background-color:var(--button-bg);font-size:20px;cursor:pointer;color:#fff;border:1px solid hsla(0,0%,100%,0);-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:all .2s ease-in-out;will-change:auto;z-index:2}.calculator-button:hover{box-shadow:0 10px 25px rgba(4,37,100,.12);border-radius:4px;background-color:var(--button-bg-hover);border-color:hsla(0,0%,100%,.15);z-index:5;transform:scale(1.35)}.calculator-button:focus{outline:none}.calculator-button.equal{grid-row-start:span 2;grid-column-start:4}.calculator-button.highlight{background-color:var(--button-highlight-bg)}.calculator-button.highlight:hover{background-color:var(--button-highlight-bg-hover)}.calculator-button-wrapper{position:absolute;top:132px;right:15px;bottom:15px;left:15px;display:grid;grid-gap:2px;grid-template-columns:repeat(4,auto);grid-template-rows:repeat(5,45px)}.calculator-back{position:absolute;top:0;right:0;bottom:0;left:0;width:85%;background-image:linear-gradient(#bd1d8c,#7a41ce);border-radius:15px;transform:skewY(8deg);transform-origin:left top;transition:all .8s cubic-bezier(.075,.82,.165,1) 0s;z-index:5}.calculator-wrapper{position:relative}.title{position:absolute;top:0;right:0;bottom:0;left:0;font-size:calc(62px + 1vw);font-weight:900;color:#1f3e5a;letter-spacing:-.065em;-webkit-user-select:none;-moz-user-select:none;user-select:none}.title:nth-child(2){mix-blend-mode:screen;opacity:.75}.title-wrapper{top:100%;left:0;transform:rotate(-90deg) translate(-80px,-65px);mix-blend-mode:difference;-webkit-backdrop-filter:opacity(1);backdrop-filter:opacity(1);z-index:10}.bg-item,.title-wrapper,.toggle-theme{position:absolute}.toggle-theme{top:0;left:0;font-size:13px;padding:8px 12px;background-color:var(--button-bg);border-top-left-radius:15px;border-bottom-right-radius:15px;color:#fff;cursor:pointer;border:none;outline:none;will-change:auto;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:all .1s ease-in-out;z-index:5}.toggle-theme:hover{box-shadow:0 10px 25px rgba(4,37,100,.12);background-color:var(--button-bg-hover);border-color:hsla(0,0%,100%,.08);transform:scale(1.25)}#bg-1{filter:blur(10px)}#bg-2{filter:blur(36px)}#bg-4{filter:blur(50px)}#bg-6{filter:blur(40px)}#bg-7{filter:blur(30px)}#bg-9{filter:blur(20px)}