*,*::after, *::before {
  box-sizing: border-box;
}

:root {
  --cell-size: 100px;
  --mark-size: calc(var(--cell-size) * .9);
  --back-color: rgba(0, 136, 204, .3);
}

body {
  overflow: hidden;
}

.container {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  justify-items: center;
  top: 50%;
  left: 80%;
  transform: translate(-80%, -50%);
}

.board1 {
  display: grid;
  padding: 10px 10px;
  background: grey;
  grid-gap: 10px;
  grid-template-columns: repeat(4, auto);
  grid-template-rows: repeat(4, auto);
}

.text-wrap {
  display: grid;
  grid-template-rows: repeat(4, auto);
  grid-gap: 10px;
}

.text-wrap1 {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 10px;
  top: -100px;
  left: 110px;
}

.cell {
  background: lightgrey;
  width: var(--cell-size);
  height: var(--cell-size);
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.cell-text {
  width: var(--cell-size);
  height: var(--cell-size);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.text {
  width: var(--cell-size);
  height: var(--cell-size);
  font-size: calc(var(--mark-size) * .7);
  border: 1px solid transparent;
  border-bottom: 1px solid black;
  text-align: center;
}

.backcolor {
  background-color: rgba(0, 136, 204, .2);
}

.block2 {
  background: #eed8be;
}

.text-style {
  position: relative;
  color: black;
  font-size: 25px;
}

.btn {
  margin-left: 20px;
  margin-bottom: 20px;
  color: black;
  font-size: 25px;
}

.gtype {
  padding-left: 10px;
  color: black;
  font-size: 35px;
}

.red {
  color: rgba(255, 0, 0, 1);
  padding-bottom: 10px;
}

.blue {
  color: rgba(0, 0, 255, 1);
  padding-bottom: 10px;
}

.green {
  color: rgba(51, 204, 51, 1);
  padding-bottom: 10px;
}

.yellow {
  color: rgba(204, 204, 0, 1);
  padding-bottom: 10px;
}