body{
    text-align: center;
    font-family: monospace;
    font-size:2.5em;
    background: url(back.jpg) center fixed;
}

*{
    border-radius: 0.5em;
}

#calc{
    background-color: gray;
    display:flex;
    width:40%;
    margin:1.5% 30% 1.5% 30%;
    flex-direction: column;
}

#screen{
    background-color: white;
    width:90%;
    margin:auto;
    margin-top: 2.5%;
    margin-bottom: 2.5%;
    height: 3.75em;
    border-width: 0.15em;
    border-style:solid;
    text-align:right;
}

#exp{
    margin-right: 2.5%;
    margin-top: 1.5%;
}

#res{
    margin-right: 2.5%;
    margin-top: 2%;
    font-size: 1.5em;
}

#keypad{
    display:grid;
    width:90%;
    margin:auto;
    margin-top: 2.5%;
    margin-bottom: 2.5%;
    height: 14em;
    grid-template-columns: repeat(3,20%) 25%;
    row-gap: 0.5em;
    column-gap: 5%;
}

.num{
    color:white;
    background-color: blue;
    border-radius: 3em;
}

.op{
    color:white;
    background-color: red;
    border-radius: 1.5em;
}

button{
    all:unset;
    background-color: white;
    border-radius: 1em;
    font-size: 1em;
    transition: 0.5s;
    cursor: pointer;
}

button:hover{
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    transform: scale(1.05);
    transition: transform 0.5s;
}

button:active{
    transform: scale(0.95);
    transition: transform 0.25s;
}