*{
    box-sizing: border-box;
    margin:0;
    padding:0;
}

body {
    font-family: monospace;
    font-size: 25px;
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}

.buttons{
    width: 100px;
    height: 100px;
    text-align: center;
    color: white;
    background-color: rgb(0, 162, 255);
    border: 2px solid rgb(24, 16, 70);
    vertical-align: middle;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.buttons:hover{
    border: 4px solid rgb(0, 86, 136) 
}

.calbut{
    display: grid;
    grid-template-areas:
    
    "bk cl di mu"
    "se ei ni su"
    "fo fi si pl"
    "on tw th eq"
    "ze ze de eq";
    grid-gap: 0px 0px;
    justify-content: center;
    align-items: center;
}

#zero{
    grid-area: ze;
    width:200px
}
#one{
    grid-area: on;
}
#two{
    grid-area: tw;
}
#three{
    grid-area: th;
}
#four{
    grid-area: fo;
}
#five{
    grid-area: fi;
}
#six{
    grid-area: si;
}
#seven{
    grid-area: se;
}
#eight{
    grid-area: ei;
}
#nine{
    grid-area: ni;
}
#equals{
    grid-area: eq;
    height: 200px
}
#C{
    grid-area: bk;
}
#AC{
    grid-area: cl;
}
#divide{
    grid-area: di;
}
#multiply{
    grid-area: mu;
}
#subtract{
    grid-area: su;
}
#add{
    grid-area: pl;
}
#decimal{
    grid-area: de;
}

#display {
    width: 400px;
    height: 100px;
    text-align: right;
    margin: 0 auto;
    margin-top: 5vh;
    padding: 20px 20px;
    color:white;
    background-color: rgb(24, 16, 70);
}

footer{
    color: white;
    background-color: gray;
    width:100%;
    position: absolute;
    font-size:20px;
    padding: 20px 0px;
    text-align:center;
    bottom: 0;
    left:0;
}