style.css

:root {
  --backgroundColor: #0A101D;
  --borderColor: #A3C5C0;
}

* {
  text-align: center;
}

body {
  background-color: var(--backgroundColor);
  color: var(--borderColor);
  font-family: sans-serif;
}

table {
  margin-left: auto;
  margin-right: auto;
  width: 560px;
  height: 560px;
  border-collapse: collapse;
  border-spacing: 1px;
}

td {
  padding: 0;
  border: solid var(--borderColor) 2px;
  vertical-align: middle;
}

.box-oline-top {
  border-top: solid var(--borderColor) 4px;
}

.box-oline-bottom {
  border-bottom: solid var(--borderColor) 4px;
}

.box-oline-left {
  border-left: solid var(--borderColor) 4px;
}

.box-oline-right {
  border-right: solid var(--borderColor) 4px;
}

input {
  background: #1A202D;
  color: white;
  height: 100%;
  width: 100%;
  padding: inherit;
  border: 0;
  font-size: 25px;
  vertical-align: middle;
  resize: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

button {
  background-color: var(--borderColor);
  color: var(--backgroundColor);
  border: 0;
  height: 25px;
  width: 80.55px;
  border-radius: 50px;
}

button:hover {
  background-color: #D3F5F0;
  cursor: pointer;
}