styles.css

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Courier New', Courier, monospace;
} 

body { 
    background: #ecf0f3;
} 

.dark-mode {
    background: #1f1f1f;
    color: #fff;
}

.container { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    user-select: none;
} 

#icon {
    padding: 20px;
    cursor: pointer;
}

.calculate { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
    border-radius: 8px; 
    padding: 20px; 
    box-shadow: 10px 10px 20px #cbced1, -1px -1px 20px #cbced1;
} 

#screen { 
    margin-bottom: 0; 
    width: 350px; 
    height: 60px; 
    font-size: 30px; 
    outline: none; 
    border: none; 
    text-align: right; 
    padding-right: 0.5em; 
    background: #ecf0f3; 
    border-radius: 6px 6px 0 0; 
    box-shadow: inset 0 8px 8px #cbced1;
} 

#ans {
    margin-bottom: 0.6em;
    width: 350px; 
    height: 60px; 
    font-size: 30px; 
    outline: none; 
    border: none; 
    text-align: right; 
    padding-right: 0.5em; 
    background: #ecf0f3; 
    border-radius: 0 0 6px 6px; 
    box-shadow: inset 0 -8px 8px #cbced1;
}

.buttons { 
    display: grid; 
    grid-template-columns: repeat(6, 60px); 
    grid-template-rows: repeat(7, 55px);
} 
        
button { 
    font-size: 16px; 
    font-weight: 600; 
    border: none; 
    outline: none; 
    margin: 5px; 
    border-radius: 4px; 
    transition: .1s; 
    box-shadow: 5px 5px 8px #00000020, -5px -5px 8px #cbced1;
} 

button:hover { 
    box-shadow: inset 5px 5px 8px rgba(16, 16, 16, .1), inset -5px -5px 8px #cbced1; 
    background: #ecf0f3;
} 

#ce { 
    background: #ff3399; 
    color: #fff;
} 

#ce:hover { 
    box-shadow: inset 5px 5px 8px #e60073, inset -5px -5px 8px #e60073;
} 

#equal { 
    background: #33ccff; 
    color: #fff;
} 

#equal:hover { 
    box-shadow: inset 5px 5px 8px #00ace6, inset -5px -5px 8px #00ace6;
} 

#ac { 
    background: #33cc33; 
    color: #fff;
} 

#ac:hover { 
    box-shadow: inset 5px 5px 8px #2eb82e, inset -5px -5px 8px #2eb82e;
}

#zero, #one, #two, #three, #four, #five, #six, #seven, #eight, #nine, #ten { 
    background: #f7f749;
} 

#zero:hover, #one:hover, #two:hover, #three:hover, #four:hover, #five:hover, #six:hover, #seven:hover, #eight:hover, #nine:hover, #ten:hover { 
    box-shadow: inset 5px 5px 8px #e6cf00, inset -5px -5px 8px #e6cf00;
}