body {
  margin: 0;
  display: grid;
  height: 100vh;
  align-content: center;
  justify-content: center;
  font-family: 'Varela Round', sans-serif;
  grid-template: auto 512px auto / auto 360px auto;
  background: GhostWhite
}

#base {
  background-color: #d8f6a9;
  grid-column-start: 2;
  grid-row-start: 2;
  display: grid;
  grid-template-rows: 1fr 11fr;
  background: GhostWhite
}

#base>div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden
}

#info>div {
  display: grid;
  align-content: center;
  box-sizing: border-box;
  justify-content: center;
  background: chartreuse;
  border: 5px solid Lavender;
  grid-template-columns: 1fr 1fr
}

div#score {
    border-right-width: 2px;
}
div#level {
    border-left-width: 3px;
}

#info>div>div {
  text-align: center;
  display: grid;
  align-content: center;
  text-transform: uppercase;
  color: seagreen
}

#info>div>span {
  text-align: right;
  padding: 7px;
  background-color: blueviolet;
  color: #eee
}

#plot {
  display: grid;
  grid-template-rows: auto 48px
}

#hole::after {
  display: block;
  background: url("hole.svg") center 70% no-repeat;
  content: '';
  width: 100%;
  background-size: contain;
  height: 60px;
  top: -25px;
  position: relative
}

.active {
  visibility: visible !important;
  transform: translateY(0) !important
}

#mole {
  background: /*red*/ url('http://zero.aubin.cc/mole.png') center bottom no-repeat;
  background-size: 60%;
  transform: translateY(42%);
  transition: transform 0.42s;
  visibility: hidden
}