*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

:root{
    --background:#594c7f;
    --calculator:white;
    --display:#975e5e;
    --button:#ddd;
    --text:black;
}


.light{
    --background:#babacf;
    --calculator:#35354a;
    --display:#875b5b;
    --button:#282830;
    --text:white;
}


body{
    background:var(--background);
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
}


/* Main wrapper */
.container{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:40px;
}



/* Calculator */
.calculator{

    width:100%;
    max-width:460px;
    background:var(--calculator);
    padding:25px;
    border-radius:20px;
    box-shadow:0 0 25px rgba(0,0,0,.4);

}



/* Theme button */
.theme-btn{

    width:60%;
    height:45px;
    margin-bottom:15px;
    border-radius:12px;
    font-size:22px;
}



/* Display */

#display{

    width:100%;
    height:80px;
    background:var(--display);
    color:var(--text);

    border:none;
    outline:none;

    border-radius:12px;

    font-size:35px;
    text-align:right;

    padding:15px;
    margin-bottom:20px;

}



/* Buttons layout */

.buttons{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;

}



button{

    height:70px;

    border:none;
    border-radius:12px;

    background:var(--button);
    color:var(--text);

    font-size:25px;
    cursor:pointer;

    transition:
    transform .15s ease,
    box-shadow .15s ease,
    background .3s ease;

}



button:hover{

    transform:translateY(-3px);

    box-shadow:
    0 5px 12px rgba(0,0,0,.25);

}



button:active{

    transform:scale(.92);

}



/* Operators */

.operator{

    animation:glow 2s infinite alternate;

}



/* Equal button */

.equal{

    background:#28a745;
    color:white;
    grid-row:span 2;
    height:100%;

}


.equal:hover{

    background:#218838;

}



/* Clear */

.clear{

    background:#dc3545;

}


.clear:hover{

    background:#c82333;

}



/* Zero button */

.zero{

    grid-column:span 2;

}



/* History */
.history{
    display:none;

    width:380px;
    background:#2d2d44;
    color:white;
    padding:25px;
    border-radius:20px;
    box-shadow:0 0 20px rgba(0,0,0,.3);
}

.history-box{
    display:none;
    position:absolute;
    top:20px;
    right:20px;
    width:250px;
    background:white;
    padding:20px;
    border-radius:10px;
    box-shadow:0 0 10px gray;
}


.history-box ul{
    list-style:none;
    padding:0;
}


.history-box li{
    padding:8px;
    border-bottom:1px solid #ddd;
}


.history-btn{
    margin:10px;
    padding:10px;
    border-radius:8px;
    cursor:pointer;
}

.history{

    width:380px;

    background:#2d2d44;

    color:white;

    padding:25px;

    border-radius:20px;

    box-shadow:0 0 20px rgba(0,0,0,.3);

}



.history h3{

    text-align:center;
    font-size:25px;

    margin-bottom:20px;

}



.history ul{

    list-style:none;

    max-height:230px;

    overflow-y:auto;

}



.history li{

    padding:12px;

    border-bottom:1px solid gray;

    font-size:18px;

}



.history-btn{

    margin-top:15px;

    width:100%;

    height:50px;

    background:#dc3545;

    color:white;

    border:none;

    border-radius:10px;

    font-size:20px;

}


.history-btn:hover{

    background:#c82333;

}



/* Animation */

@keyframes glow{

    from{

        box-shadow:0 0 5px #ff9800;

    }


    to{

        box-shadow:0 0 15px #ff9800;

    }

}



/* Mobile */

@media(max-width:900px){


    body{

        height:auto;
        padding:20px;

    }


    .container{

        flex-direction:column;

    }


    .calculator{

        width:100%;
        max-width:460px;

    }


    .history{

        width:100%;

    }


    .buttons{

        grid-template-columns:repeat(4,1fr);

    }


    button{

        height:60px;

        font-size:20px;

    }





    #display{

        font-size:28px;

    }

}



/* Small phones */

@media(max-width:350px){


    button{

        height:50px;

        font-size:18px;

    }


    #display{

        height:60px;

        font-size:22px;

    }

}