body{display:flex;justify-content: center;align-items: center;padding: 2em;background: #ddd;}  
section{background:linear-gradient(to right,rgb(2, 127, 253),rgb(2, 253, 2));display:flex;justify-content: center;align-items: center;border-radius: 1em;width: 100%; height: 33em;;}
.container{transition: all 1s; border-radius: .5em;; background: #ddd; width:17%;box-shadow: 9px 9px 6px #444,-12px -12px 16px rgba(250,250,250,.5);border:2px solid black;padding:.5em;}
.container:hover{transform: scale(1.05);box-shadow: 11px 11px 6px #444;}
#display{text-align: right;border-radius: .2em; background: #555;color:white; overflow-x: hidden; margin-top:.5em; user-select: none;padding: .1em .2em;margin-bottom:.2em; height: 1em;line-height: 1em;font-size: 2em;border:1px solid black;}
.buttons{border:1px solid black;margin-top:1em;border-radius: .3em;transition: 3s;background: white; display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;padding:.2em;}
.buttons:hover{background: rgb(226, 188, 252);}
.button{text-align: center;border:.5px solid black; transition:.5s; color:white;user-select: none;margin:.2em;cursor:pointer; border-radius: .3em;width:2.5em;height: 2.5em;line-height:2.5em;font-size:1em;background: #999; }
.button:hover{background: #666;}
p{margin:0.2em auto;text-align: center;user-select: none;}
span{font-style: italic;}