:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{padding:0;margin:0;box-sizing:border-box}:root{--t1ScreenBg: hsl(224, 36%, 15%);--t2ScreenBg: hsl(0, 0%, 93%);--t3ScreenBg: hsl(268, 71%, 12%);--t1mainBg:hsl(222, 26%, 31%);--t2mainBg:hsl(0, 0%, 90%);--t3mainBg: hsl(268, 75%, 9%);--t1keypadBg: hsl(223, 31%, 20%);--t2keypadBg: hsl(0, 5%, 81%);--t3keypadBg: hsl(268, 71%, 12%);--t1keyShadow: hsl(224, 28%, 35%);--t2keyShadow: hsl(185, 58%, 25%);--t3keyShadow:hsl(290, 70%, 36%);--t1keyBg: hsl(30, 25%, 89%);--t2keyBg: hsl(185, 42%, 37%);--t3keyBg: hsl(281, 89%, 26%);--t1equal:hsl(6, 63%, 50%);--t2equal: hsl(25, 98%, 40%);--t3equal:hsl(176, 100%, 44%);--t1eqShadow:hsl(6, 70%, 34%);--t2eqShadow:hsl(25, 99%, 27%);--t3eqShadow: hsl(177, 92%, 70%);--t1del: hsl(225, 21%, 49%);--t2del:hsl(185, 42%, 37%);--t3del:hsl(285, 91%, 52%);--t1delShadow:hsl(224, 28%, 35%);--t2delShaddow:hsl(185, 58%, 25%);--t3delShaddow:hsl(290, 70%, 36%)}.container{display:flex;flex-direction:column;align-items:center;height:100dvh;justify-content:center}.container>*{margin-block:10px}.theme1{background-color:var(--t1mainBg);color:#fff}.theme2{background-color:var(--t2mainBg)}.theme3{background-color:var(--t3mainBg);color:#ebcd36}.screen1{background-color:var(--t1ScreenBg);color:#fff}.screen2{background-color:var(--t2ScreenBg)}.screen3{color:#ebcd36;background-color:var(--t3ScreenBg)}.header{display:grid;grid-template-columns:3fr 1fr;align-items:end;width:33.3vw;padding-inline:5px}.header .theme-wrapper{display:flex;align-items:end;flex-direction:row;justify-content:space-between}.header .theme-wrapper .toggle-container{display:flex;flex-direction:column;align-items:end}.header .theme-wrapper .number-container{display:flex;justify-content:space-between;align-items:center;width:100%;flex-direction:row}.header .theme-wrapper .toggleButton{height:20px;width:40px;display:flex;align-items:center;border-radius:20px}.header .theme-wrapper .toggleButton .toggleBult1{width:10px;height:10px;background-color:var(--t1equal);border-radius:50%}.header .theme-wrapper .toggleButton .toggleBult2{width:10px;height:10px;background-color:var(--t2equal);border-radius:50%}.header .theme-wrapper .toggleButton .toggleBult3{width:10px;height:10px;background-color:var(--t3equal);border-radius:50%}.header .theme-wrapper .toggleButton2{justify-content:center}.header .theme-wrapper .toggleButton3{justify-content:end}.header,.screen{margin-bottom:16px}.keypad{width:33.3dvw;display:grid;grid-template-columns:repeat(4,1fr);padding:10px;height:auto;gap:8px}.keypad :nth-last-child(-n+2){grid-column:span 2}.keypad1{background-color:var(--t1keypadBg)}.keypad2{background-color:var(--t2keypadBg)}.keypad3{background-color:var(--t3keypadBg)}.screen{height:60px;display:flex;align-items:center;justify-content:center;width:33.3dvw;font-size:3rem;font-weight:700}.btn{border-radius:5px;height:30px;border:none;font:1.5rem bolder;display:flex;align-items:center;justify-content:center}.btn1{background-color:var(--t1keyBg);color:#444b5a;box-shadow:0 3px #b4a597}.btn2{background-color:var(--t1keyBg);color:#35352c;box-shadow:0 3px #a69d91}.btn3{color:#ebcd36;background-color:#341c4f;box-shadow:0 3px #bc15f4;font-weight:700}.del1,.reset1{background-color:var(--t1del);box-shadow:0 3px #404e72;color:#fff}.del2,.reset2{background-color:var(--t2del);box-shadow:0 3px #1b5f65;color:#fff}.equal1{background-color:var(--t1equal);color:#fff;box-shadow:0 3px #93261a}.reset3,.del3{background-color:var(--t3keyBg);box-shadow:0 3px #be2fda;color:#fff;font-weight:700}.equal3{background-color:var(--t3equal);box-shadow:0 3px #6cf9f2}.equal,.reset,.del{height:30px;border:none;font-size:1.5rem;font-weight:medium;border-radius:5px}.equal2{color:#f5f5f5;box-shadow:0 3px #893901;background-color:var(--t2equal)}@media (max-width: 430px){.wrapper{width:100%;height:100vh}.header,.screen,.keypad{width:90%;margin-inline:5%}.keypad{padding:30px 5px;gap:5px}.reset,.del,.equal,.btn{height:50px}}