body,html{
    margin: 0;
    padding: 0;
    width: 100%;
    height:100%;
}
body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(197, 197, 145);

}

#container{
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: space-evenly;
    height:80vh;
    width:54vh;
    background-color: rgb(82, 78, 78);
    border: black solid 3px;
    border-radius: 25px;
    flex-direction: column;
    

}
@media screen and (max-width: 600px) {
    #container{
        width: 80%;
    }
}
#display{
    background-color:rgb(178, 238, 178);
    height: 10vh;
    width: 90%;
    border: rgb(41, 40, 40) solid 4px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 10px;
    
}
#buttonContainer{
    display: grid;
    height: 50vh;
    width:90%;
    border-top: rgb(37, 37, 37) solid 4px;
    border-radius: 9px;
    padding: 5px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-gap: 10px;
    grid-template-areas: 
    "clear clear delete delete "
    "button7 button8 button9 division"
    "button4 button5 button6 multi"
    "button1 button2 button3 minus"
    "button0 equal equal plus";
}
.button{
    border: black solid 1px;
    border-radius: 10px;
    font-size: large;
}
.button:hover{
    filter: brightness(90%);
} 
.button:active{
    filter: brightness(80%);

}
  
    

#delete{
    grid-area: delete;
    background-color: tomato;
}
#clear{
    grid-area: clear;
    background-color: lightblue;
}
#button9{
    grid-area: button9;
}
#button8{
    grid-area: button8;
}
#button7{
    grid-area: button7;
}
#button6{
    grid-area: button6;
}
#button5{
    grid-area: button5;
}
#button4{
    grid-area: button4;
}
#button3{
    grid-area: button3;
}
#button2{
    grid-area: button2;
}#button1{
    grid-area: button1;
}
#button0{
    grid-area: button0;
}
#plusButton{
    grid-area: plus;
    background-color: rgb(236, 207, 152);
}
#minus{
    grid-area: minus;
    background-color: rgb(236, 207, 152);
}
#division{
    grid-area: division;
    background-color: rgb(236, 207, 152);
}
#multiply{
    grid-area: multi;
    background-color: rgb(236, 207, 152);
}
#equal{
    grid-area: equal;
    background-color: rgb(236, 170, 144);
}
#currentValue{
    margin-top: 0px;
    font-weight: bolder;
    font-size: 30px;
    margin-right: 5px;
   
   
   
}
#previousValue{
    margin-top: 2;
    height: 5px;
    margin-right: 3px;
    font-size: 13px;
    
    
    

}