style.css

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

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

.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%);
}

.responded {
    -webkit-animation: color-change .3s forwards;
    -moz-animation: color-change .3s forwards;
    -o-animation: color-change .3s forwards;
    -ms-animation: color-change .3s forwards;
    animation: color-change .3s forwards;
}

@-webkit-keyframes color-change {
    0% { color: #fff; }
    50% { color: red; }
    100% { color: #fff; }
}
@-moz-keyframes color-change {
    0% { color: #fff; }
    50% { color: red; }
    100% { color: #fff; }
}
@-ms-keyframes color-change {
    0% { color: #fff; }
    50% { color: red; }
    100% { color: #fff; }
}
@-o-keyframes color-change {
    0% { color: #fff; }
    50% { color: red; }
    100% { color: #fff; }
}
@keyframes color-change {
    0% { color: #fff; }
    50% { color: red; }
    100% { color: #fff; }
}