@charset "UTF-8";:root{--calc-width: 38rem;--switch-dims: 1.175rem;--switcher-width: 5rem;--switcher-height: 1.65rem;--border: .6rem;--spacing: 2rem;--gap: 1.5rem;--grid-rows: 5rem;--grid-columns: 7.5rem}:root.theme-1{--clr-main-bg: hsl(222, 26%, 31%);--clr-toggle-bg: hsl(223, 31%, 20%);--clr-screen-bg: hsl(224, 36%, 15%);--key-bg-1: hsl(225, 21%, 49%);--key-shadow-1: hsl(224, 28%, 35%);--key-bg-2: hsl(6, 63%, 50%);--key-shadow-2: hsl(6, 70%, 34%);--key-bg-3: hsl(30, 25%, 89%);--key-shadow-3: hsl(28, 16%, 65%);--txt-primary: hsl(221, 14%, 31%);--txt-secondary: hsl(0, 0%, 100%)}:root.theme-2{--clr-main-bg: hsl(0, 0%, 90%);--clr-toggle-bg: hsl(0, 5%, 81%);--clr-screen-bg: hsl(0, 0%, 93%);--key-bg-1: hsl(185, 42%, 37%);--key-shadow-1: hsl(185, 58%, 25%);--key-bg-2: hsl(25, 98%, 40%);--key-shadow-2: hsl(25, 99%, 27%);--key-bg-3: hsl(45, 7%, 89%);--key-shadow-3: hsl(35, 11%, 61%);--txt-secondary: hsl(60, 10%, 19%);--txt-primary: hsl(60, 10%, 19%)}:root.theme-3{--clr-main-bg: hsl(268, 75%, 9%);--clr-toggle-bg: hsl(268, 71%, 12%);--clr-screen-bg: hsl(268, 71%, 12%);--key-bg-1: hsl(281, 89%, 26%);--key-shadow-1: hsl(285, 91%, 52%);--key-bg-2: hsl(176, 100%, 44%);--key-shadow-2: hsl(177, 92%, 70%);--key-bg-3: hsl(268, 47%, 21%);--key-shadow-3: hsl(290, 70%, 36%);--txt-secondary: hsl(52, 100%, 62%);--txt-primary: hsl(52, 100%, 62%)}*,*:before,*:after{box-sizing:border-box;transition:all .275s cubic-bezier(.65,.05,.36,1)}i:before,i:after{transition:initial}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}a{text-decoration:none}img,picture{max-width:100%;display:block}html{font-size:16px}body{font-family:"Spartan",sans-serif;font-weight:700}h1{color:var(--txt-secondary);font-size:2.5rem;text-align:center}@media (max-width: 700px){h1{font-size:2.25rem}}@media (max-width: 640px){h1{font-size:2rem}}@media (max-width: 540px){h1{font-size:1.5rem}}@media (max-width: 508px){h1{font-size:1.35rem}}@media (max-width: 440px){h1{font-size:1.15rem}}h2{font-size:1.475rem}@media (max-width: 440px){h2{font-size:.9rem}}h3{color:var(--txt-primary);font-size:1.15rem;text-align:right}@media (max-width: 440px){h3{font-size:.8rem}}.header h3{color:var(--txt-secondary)}p{text-transform:uppercase;color:var(--txt-secondary);font-size:.875rem}@media (max-width: 440px){p{font-size:.675rem}}.output h1{text-align:right}.switch-container p{letter-spacing:.5rem}@media (max-width: 700px){:root{--calc-width: 35rem;--grid-rows: 4rem;--grid-columns: 6.5rem}}@media (max-width: 640px){:root{--calc-width: 30rem;--grid-rows: 3rem;--grid-columns: 5.5rem}}@media (max-width: 540px){:root{--switcher-width: 4.75rem;--switcher-height: 1.35rem;--switch-dims: .9rem;--calc-width: 27rem;--grid-rows: 2.75rem;--grid-columns: 4.5rem}}@media (max-width: 508px){:root{--calc-width: 23rem;--grid-rows: 2.5rem;--grid-columns: 3.5rem}}@media (max-width: 440px){:root{--switcher-width: 4.5rem;--switcher-height: 1rem;--switch-dims: .55rem;--spacing: 1.5rem;--calc-width: 17.5rem;--grid-rows: 2rem;--grid-columns: 3rem;--gap: 1.25rem}}body{background:var(--clr-main-bg);padding:calc(var(--spacing) / 2)}section{width:var(--calc-width);margin:var(--spacing) auto}section:first-child{--spacing: 4rem}@media (max-width: 540px){section:first-child{--spacing: 2rem}}section.header{display:flex;flex-direction:row;justify-content:space-between;align-items:initial;gap:initial}section.header .theme{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:calc(var(--spacing) / 2)}section.header .theme .switch-container p{margin-top:-1.45rem;margin-left:.5rem}section.header .theme .switch-container .switcher{width:var(--switcher-width);height:var(--switcher-height);border-radius:2.5rem;background:var(--clr-toggle-bg);position:relative;cursor:pointer}section.header .theme .switch-container .switcher .switch{width:var(--switch-dims);height:var(--switch-dims);border-radius:1.5rem;background:var(--key-bg-2);position:absolute;top:.25rem;left:.15rem;margin-left:0}section.output{background:var(--clr-screen-bg);border-radius:var(--border);padding:calc(var(--spacing) / 2)}section.input{background:var(--clr-toggle-bg);display:grid;place-content:center;grid-template-rows:repeat(5,var(--grid-rows));grid-template-columns:repeat(4,var(--grid-columns));grid-gap:var(--gap);padding:var(--spacing) 0;border-radius:var(--border)}section.input *{border-radius:var(--border)}section.input .special-button:last-child{grid-column:1/3;grid-row:5}section.input .for-grid{grid-column:3/5;grid-row:5}section.input .btn.disabled{pointer-events:none;box-shadow:none;opacity:.9}section.input .basic-button{background:var(--key-bg-3);box-shadow:0 .2rem 0 0 var(--key-shadow-3);text-align:center;padding:0;border:none;outline:none;cursor:pointer;font:inherit}section.input .basic-button h1{color:var(--txt-primary)}section.input .basic-button:hover{box-shadow:0 0,0 0 1.15rem .25rem var(--key-shadow-3) inset}section.input .operator-button{background:var(--key-bg-3);box-shadow:0 .2rem 0 0 var(--key-shadow-3);text-align:center;padding:0;border:none;outline:none;cursor:pointer;font:inherit}section.input .operator-button h1{color:var(--txt-primary)}section.input .operator-button:hover{box-shadow:0 0,0 0 1.15rem .25rem var(--key-shadow-3) inset}section.input .special-button{background:var(--key-bg-1);box-shadow:0 .2rem 0 0 var(--key-shadow-1);text-align:center;padding:0;border:none;outline:none;cursor:pointer;font:inherit}section.input .special-button h1{color:#fff}section.input .special-button:hover{box-shadow:0 0,0 0 1.15rem .25rem var(--key-shadow-1) inset}section.input .equal-button{background:var(--key-bg-2);box-shadow:0 .2rem 0 0 var(--key-shadow-2);text-align:center;padding:0;border:none;outline:none;cursor:pointer;font:inherit}section.input .equal-button h1{color:#fff}section.input .equal-button:hover{box-shadow:0 0,0 0 1.15rem .25rem var(--key-shadow-2) inset}