style.css

.digit-span-text {
	text-align:center;
	font-size: 80px;
	position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}


/* css for numpad */
.square {
    float:left;
    position: relative;
    width: 30%;
    height: 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    background-color:#505050;
    overflow:hidden;
    color: #fff;
    border-radius:15px;
}

.submit_button, .clear_button {
    float:left;
    position: relative;
    width: 47%;
    height: 15%; /* = width for a 1:1 aspect ratio */
    margin:1.5%;
    background-color:#505050;
    overflow:hidden;
    color: #fff;
    border-radius:15px;
    font-size: 20px;
}

.square:hover, .submit_button:hover, .clear_button:hover {
	color: red;
}

.square:active, .submit_button:active, .clear_button:active {
	background-color: black;
}

.numbers{
    font-weight:900;
    text-align: center;
    font-size: 50px;
    position: relative;
    top: 50%; 
}

.numbox {
  width:30vw;
  height: 30vw;
  position:absolute;
  top:50%;
  left:50%;
  margin-right:-50%;
  transform: translate(-50%,-50%);
}