/* html {
  height: 100%;
  width: 100%;
} */

body {
    font-family: Arial, sans-serif;
    background-image: url('https://c7.alamy.com/comp/2D9N00E/javascript-inscription-against-laptop-and-code-background-learn-javascript-programming-language-computer-courses-training-2D9N00E.jpg');
  background-repeat: no-repeat;;  
  background-size: cover;  
}

.calculator {
    width: 300px;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: rgb(36, 36, 36);
  box-shadow: 25px 25px 75px hsla(0, 0%, 0%, 0.25),
  10px 10px 70px rgba(0, 0, 0, 0.25),
  inset -5px -5px 15px rgba(0, 0, 0, 0.5),
  inset 5px 5px 15px rgba(0, 0, 0, 0.5);
}

#button{
  width: 100%;
}
.button {
    width: 50px;
    height: 50px;
    font-size: 20px;
    margin: 10px;
    margin-left: 11.5px;
    cursor: pointer;
    background-color: #f0f0f0;
    background: linear-gradient(180deg, #2f2f2f, #3f3f3f);
    box-shadow: inset -8px 0 8px rgba(0, 0, 0, 0.15),
        inset 0 -8px 8px rgba(0, 0, 0, 0.25),
        0 0 0 2px rgba(0, 0, 0, 0.75),
        10px 20px 25px rgba(0, 0, 0, 0.4);
    color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: background-color 0.2s ease;
    user-select: none;
    font-weight: 400;      
}

.button:hover {
    color: #F7980a;  
}


.button::before:hover{
  background-color: #e5e0e0;
}
#display {
    width: 100%;
    height: 2.5em;
    font-size: 20px;
    margin: 10px 5em 10px 0;
    /* padding: 5px; */
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.75);
    text-align: right;
}

.calculator button::before{
  background: linear-gradient(90deg, #2d2d2d, #4d4d4d);
  border-radius: 10px;
  box-shadow: -5px -5px 15px rgba(0, 0, 0, 0.1),
      10px 5px 10px rgba(0, 0, 0, 0.15);
}

.color-red{
  background: #ff0000;
}
.color-yelow{
  background: #F7980a;
}