* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
:root{
    --cl-white: #fff;
}
.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-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-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;
}
body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: var(--cl-bg-main);
    font-family: Arial, sans-serif;
    color: var(--White);
}

.main {
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
}

.calculater {
    border-radius: 5px;
    padding: 0.87rem;
    width: 100%;
    /* max-width: 400px; */
    background-color: var(--cl-bg-keypad);
    display: grid;
    gap: 0.8rem;
    grid-template-areas:
        "seven eight nine del"
        "four five six plus"
        "one two three min"
        "dot zero devide multiply"
        "reset reset equl equl";
}

.one {
    grid-area: one;
}
.two {
    grid-area: two;
}
.three {
    grid-area: three;
}

.four {
    grid-area: four;
}

.five {
    grid-area: five;
}

.six {
    grid-area: six;
}

.seven {
    grid-area: seven;
}

.eight {
    grid-area: eight;
}

.nine {
    grid-area: nine;
}

.zero {
    grid-area: zero;
}

/* Fixed missing zero */
.dot {
    grid-area: dot;
}

.devide {
    grid-area: devide;
    color: var(--White);
}

.plus {
    grid-area: plus;
}

.min {
    grid-area: min;
}

.multiply {
    grid-area: multiply;
}

.equl {
    grid-area: equl;
    color: var(--cl-white) !important;
    background-color: var(--cl-key-equal) !important;
    box-shadow: 0px 2px 0px var(--cl-key-equal-shadow) !important;
}
.equl:active{
    background-color:var(--cl-key-equal-active-bg) ;
}

/* Fixed from "equal" */
.del {
    grid-area: del;
    background-color:var(--cl-key-reset) !important;
    box-shadow: 0px 2px 0px var(--cl-key-reset-shadow) !important;
    color: var(--cl-white) !important;
    text-transform: uppercase;
}
.del:active{
    background-color: var(--cl-key-reset-active-bg) !important;
    box-shadow:var(--cl-key-reset-shadow)
}

.reset {
    grid-area: reset;
    color: var(--cl-white) !important;
    background-color:var(--cl-key-reset) !important;
    box-shadow: 0px 2px 0px var(--cl-key-reset-shadow) !important;
    text-transform: uppercase;
}
.reset:active{
    background-color: var(--cl-key-reset-active-bg) !important;
    box-shadow:var(--cl-key-reset-shadow)
}

.btn {
    border: none;
    background-color:var(--cl-key-bg);
    border-radius: 5px;
    padding: 0.2rem;
    height: 50px;
    font-weight: 700;
    font-size: 20px;
    box-shadow: 0px 2px 0px var(--cl-key-shadow);
    color:var(--cl-text) ;
}
.btn:hover{
    cursor: pointer;
    opacity: 0.7;
}
.btn:active{
    background-color: var(--cl-active-key-bg);
    transform: scale(0.88);
}

.display {
    width: 100%;
    background-color: var(--cl-bg-screen);
    align-items: end;
    text-align: right;
    border-radius: 5px;
    padding: 1.4rem;
    color: var(--cl-header-text, var(--cl-text));
    font-size : 32px;
    font-weight: 700;
  
}
.toggle-box {

    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--cl-header-text, var(--cl-text));
    /* color:var(--cl-header-text) !important; */
}

.theme-box {
    display: flex;
    align-items: center;
}

.calc{
    font-size: 32px;
    font-weight: 700;
    text-transform: lowercase;
}
.theme-box{
    display: flex;
    align-items: center;
    gap: 1rem;
    text-transform: uppercase;
}
.theme-box .theme{
    font-size: 13px;
}
.theme-btns{
    display: flex;
  /* flex-direction: row-reverse; */

  background-color: var(--cl-bg-screen);
    border-radius: 18px;
    height: 1.3rem;
    width: 5rem;
    justify-content: center;
    align-items: center;
}
.theme-box label{
    display: flex;
    flex-direction: column;
    transform: translateY(-10px); 
    width: 100%;
    align-items: center;
    gap: 0.2rem;
}
.theme-btns input {
    appearance: none; 
    width: 20px;
    height: 20px !important;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block; 
}

.theme-btns input:checked {
    background-color: var(--cl-key-equal);
}


@media (max-width:550px) {
    .main {
        width: 100%;
    }
}