:root{--ff-league-spartan:"League Spartan",sans-serif;--cl-white:#fff;--padding-default:2rem;--mt-15:1.5rem;--gap-default:2.5rem;--gap-buttons:1.5rem;--radius-default:.7rem;--radius-btn:.6rem;font-size:62.5%}*,:after,:before{box-sizing:border-box;margin:0;padding:0}button{background-color:transparent;border:none}button:active{transform:scale(.95)}body{display:flex;font-family:var(--ff-league-spartan);font-size:1.6em;justify-content:center;min-height:100vh;min-height:100dvh;place-items:center;align-items:center;background-color:var(--cl-bg-main);color:var(--cl-text);width:100vw;width:100dvw}.theme-1{--cl-bg-main:#3a4564;--cl-bg-keypad:#232c43;--cl-bg-screen:#192034;--cl-key-bg:#eae3dc;--cl-active-key-bg:var(--cl-white);--cl-key-shadow:#aea4a2;--cl-active-key-shadow:var(var(--cl-key-shadow));--cl-key-equal:#d13e2e;--cl-key-equal-active-bg:#f96c5d;--cl-key-equal-shadow:#93261a;--cl-key-equal-active-shadow:var(--cl-key-equal-shadow);--cl-key-reset:#65729a;--cl-key-reset-active-bg:#a3b3e1;--cl-key-reset-shadow:#404d6d;--cl-text:#444b5a;--cl-header-text:var(--cl-white)}.theme-2{--cl-bg-main:#e6e6e6;--cl-bg-keypad:#d4cece;--cl-bg-screen:#ededed;--cl-key-bg:#eae3dc;--cl-active-key-bg:var(--cl-white);--cl-key-shadow:#a8a099;--cl-active-key-shadow:var(var(--cl-key-shadow));--cl-key-equal:#c65301;--cl-key-equal-active-bg:#ff8b38;--cl-key-equal-shadow:#7e4115;--cl-key-equal-active-shadow:var(--cl-key-equal-shadow);--cl-key-reset:#387f85;--cl-key-reset-active-bg:#61b5bd;--cl-key-reset-shadow:#185d62;--cl-text:#2d2d25}.theme-3{--cl-bg-main:#160628;--cl-bg-keypad:#1e0835;--cl-bg-screen:var(--cl-bg-keypad);--cl-key-bg:#321b4b;--cl-active-key-bg:#6c34ad;--cl-active-key-shadow:#8330b0;--cl-key-shadow:#802097;--cl-key-equal:#00e0d1;--cl-key-equal-active-bg:#94fffa;--cl-key-equal-shadow:#6df8ef;--cl-key-equal-active-shadow:#478294;--cl-key-reset:#1e0835;--cl-key-reset-active-bg:#8531af;--cl-key-reset-shadow:#a924d6;--cl-text:#fae242;--cl-key-equal-font-color:#000}.calculator{display:flex;flex-direction:column;gap:var(--gap-default);width:33rem}.header{align-items:center;color:var(--cl-header-text,var(--cl-text));display:flex;justify-content:space-between}.heading{text-transform:lowercase}.theme-slider{align-items:center;display:flex;gap:1rem;text-transform:uppercase}.theme-slider .theme-label{font-size:.8em;translate:0 2px}.theme-slider .slider{background-color:var(--cl-bg-screen);display:flex;height:1.6rem;justify-content:space-between;width:5rem}.theme-slider .slider label{display:block;display:grid;gap:.5rem;place-content:center;place-items:center;transform:translateY(calc(-50% - .1rem))}.theme-slider input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--cl-key-equal);border-radius:50%;cursor:pointer;height:1.6rem;opacity:0;width:1.6rem}.theme-slider input[type=radio]:checked{opacity:1}.display{background-color:var(--cl-bg-screen);color:var(--cl-header-text,var(--cl-text));direction:rtl;display:flex;font-size:2em;font-weight:700;overflow:clip;overflow-clip-margin:content-box;padding:calc(var(--padding-default) + 1rem) var(--padding-default)}.buttons,.display,.slider{border-radius:var(--radius-default)}.buttons{background-color:var(--cl-bg-keypad);display:grid;gap:var(--gap-buttons);grid-template-columns:repeat(4,1fr);padding:var(--padding-default);text-transform:uppercase}.buttons>button{border-radius:var(--radius-btn);color:inherit;font-size:large;font-weight:700;padding-block:1rem;text-transform:inherit}.buttons>button:not(#reset,#equal,#del){background-color:var(--cl-key-bg);box-shadow:inset 0 -2px 0 0 var(--cl-key-shadow)}.buttons>button:not(#reset,#equal,#del):active{background-color:var(--cl-active-key-bg);box-shadow:inset 0 -2px 0 0 var(--cl-active-key-shadow)}#del,#equal,#reset{color:var(--cl-white)}#equal,#reset{grid-column:span 2}#del,#reset{background-color:var(--cl-key-reset);box-shadow:inset 0 -2px 0 0 var(--cl-key-reset-shadow)}#del:active,#reset:active{background-color:var(--cl-key-reset-active-bg)}#equal{background-color:var(--cl-key-equal);box-shadow:inset 0 -2px 0 0 var(--cl-key-equal-shadow);color:var(--cl-key-equal-font-color,var(--cl-white))}#equal:active{background-color:var(--cl-key-equal-active-bg);box-shadow:inset 0 -2px 0 0 var(--cl-key-equal-active-shadow)}