@import 'main.css';
* {
    box-sizing: border-box;
}

.calculator {
    background-color: rgb(240, 240, 240);
    padding: 20px;
    /* this padding is the space between buttons and the edge of the calculator */
    width: 370px;
    border-radius: 10px;
    box-shadow: 0px 1px 4px 1px rgba(128, 128, 128, 0.3), inset 0px 1px 2px rgba(71, 71, 71, 0.4);
    /* first shadow is outter shadow, second shadow is inner shadow */
}
button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: bolder;
    text-shadow: 0px -1px 1px rgba(168, 168, 168, 0.5);
    text-align: center;
    margin: 9px;
    padding: 20px;
    border-radius: 8px;
    width: 68px;
}
.numbers {
    background-image: linear-gradient(#fffdfd, #f0f0f0); /* gradient background color */
    color: darkslategray;
    box-shadow: 0px 1px 4px 1px rgba(128, 128, 128, 0.5), inset 0px 1px 2px rgba(71, 71, 71, 0.5);
    /* first shadow is outter shadow, second shadow is inner shadow */
}
.numbers:active {
    background-image: linear-gradient(#e9e9e9, #e0e0e0);
    /* transition-duration: 0.4s; doesn't work */
}
.control {
    background-image: linear-gradient(#888787, #6b6b6b); /* gradient background color */
    color: white;
    box-shadow: 0px 1px 4px 1px rgba(128, 128, 128, 0.5), inset 0px 1px 0px rgba(240, 240, 240, 0.6);
    /* first shadow is outter shadow, second shadow is inner shadow */
}
.control:active {
    background-image: linear-gradient(#747474, #505050);
    /* transition: 0.9s;doesn't work  */
}
.display {
    background-color: rgb(224, 245, 223);
    box-shadow: inset 0px 1px 3px 1px rgba(117, 117, 117, 0.6);
    border: 7px solid rgb(73, 56, 23);
    border-radius: 10px;
    width: 330px;
    height: 130px;
    margin: 10px 10px; /* thsi margin is between the display frame and edge of calculator*/
    padding: 20px; /* this space is the one between the numbers and display frame*/
}
.button_container {
    margin: 1px;
    display: grid;
    grid-template-columns: repeat(4,86px);
    grid-template-rows:repeat(5,80px);
    justify-items:stretch;
    justify-content:space-around;
}
.display_content {
    position: relative;
    bottom: -30px;
    font-family: digital;
    font-size: 50px;
    text-align: right;
    line-height: 70px;
    overflow: hidden;
}

.left_col {
    /* position: relative; */
}
#number_0 {
    width: 153px;
    grid-column-start: 1;
    grid-column-end: 3;  
}
#number_equal {
    grid-row-start: 4;
    grid-row-end: 6;  
    grid-column-start: 4;
    background-image: linear-gradient(#ff8d23, #f17612);
}
#number_equal:active {
    background-image: linear-gradient(#f18621, #e47114);
}
#outcome {
    padding: 10px;
}
@font-face {
    font-family: digital;
    src: url('../Fonts/digital.ttf');
}