body {
  background-image: linear-gradient(to right, #434343 0%, black 100%);
  padding-right: 400px;
}
.grid {
  width: 606px;
  height: 606px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.main {
  position: absolute;
  top: 50%;
  padding-top: 30px;
  left: 50%;
  transform: translate(-50%, -50%);
}
.square {
  height: 200px;
  width: 200px;
  border: solid rgb(218, 25, 25) 1px;
  min-height: 0px;
}

.mole {
  background-image: url("mole.jpg");
  background-size: cover;
}

.heading {
  color: rgb(255, 208, 0);
  padding-bottom: 2em;
}

.card {
  height: 650px;
  width: 650px;
  position: absolute;
  border-radius: 15px 50px 30px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgb(13, 47, 78);
  background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);
  border: 2px;
  border: solid rgb(54, 17, 1) 8px;
  border-right-color: rgba(5, 1, 13, 0.163);
  margin-top: 50px;
}

.button1:hover {
  box-shadow: 0 12px 16px 0 rgba(249, 108, 0, 0.635),
    0 17px 50px 0 rgba(206, 241, 6, 0.916);
}

.button1 {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  height: 50px;
  width: 100px;
  color: red;
  background-color: yellow;
  font-size: x-large;
  border-radius: 7rem;
  font-family: "Courier New", Courier, monospace;
  border: solid rgb(255, 4, 4) 2px;
}
.score,
.time {
  color: rgb(255, 242, 0);
  top: 10%;
}
.subs {
  width: 212px;
  color: yellow;
}