/* ==================================================================================================================== */
/*                                                GENERAL STYLES                                                        */ 
/* ==================================================================================================================== */

body{
    background-color: #99c089;
    color: white;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height:auto;
    font-family: 'Orbitron', sans-serif;
}

footer{
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    margin-bottom: 20px;
}

footer  i{
    color: white; 
    margin-left: 15px;
}

/* ==================================================================================================================== */
/*                                                END GENERAL STYLES                                                    */ 
/* ==================================================================================================================== */


/* ==================================================================================================================== */
/*                                                CALCULATOR STYLES                                                     */ 
/* ==================================================================================================================== */

#calculator{
    background-color: #575757;
    border-radius: 30px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 550px;
    width: 500px;
}

#screen{
    background-color: #bbd0bf;
    width: 100%;
    height: 100px;
    border-radius: 30px;
    border: 3px solid #494949;
    box-shadow: 5px 5px #292929;
}

#display{
    margin-left: auto;
    width: 90%;
    display: flex;
    margin-right: 2px;
    flex-direction: column;
    align-items: end;
    gap: 2x;
    height: 100px;
}

#display > p {
    margin: 2px;
}

#display > span{
    margin-right: 25px;
    height: 20px;
}

#display-text{
    font-size: 50px;
}

#display-history{
    font-size: 16px;
}

.first-button{
    margin-left: auto;
}

#topbuttons, #buttons{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
}

#topbuttons{   
    height: 20%; 
    margin-top: 5%;
}

#topbuttons .clear{
    background-color: #f5a34d;
    color: white;   
    height: 80%;
    width: 23%; 
    border: 3px solid #575757;
    border-radius: 30px;
    box-shadow: 2px 3px #292929;
    font-size: 30px;
    align-items: center;
    display: flex;
    justify-content: center;
}

#buttons{  
    gap: 5px;
    justify-content: space-between;
    height: 90%;
}

.number, .op, .equal{
    width: 22%;
    height: 22%;
    border: 3px solid #575757;
    border-radius: 30px;
    text-align: center;
    align-self: center;
    box-shadow: 2px 3px #292929;
    font-size: 30px;    
    display: flex;
    align-items: center;
    justify-content: center;
}

.number{
    background-color: #ebebeb;
    color: #373737;
}

.op{
    background-color: #5bc0eb;
    color: white;
}

.equal{
    background-color: #f5a34d;
    color: white;
}

#buttons div:active, #topbuttons div:active{
    box-shadow: 2px 3px #575757;
    border: 3px solid #575757;
}



/* ==================================================================================================================== */
/*                                                END CALCULATOR STYLES                                                 */ 
/* ==================================================================================================================== */