*{
  margin: 0;
  padding: 0;
  overflow: hidden;
  user-select: none;
  box-sizing: border-box;
}
body{
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: black;
  color: white;
}
body > div{
  display: flex;
  flex-direction: row;
  position: absolute;
  left: calc(50vw - 45vmin);
  width: 90vmin;
  height: 9vmin;
  border: 3px white solid;
}
body > div#A{
  top: calc(50vh - 15.75vmin);
}
body > div#S{
  top: calc(50vh - 4.5vmin);
  border-left: 3px rgba(255, 255, 255, 0) solid;
}
body > div#B{
  top: calc(50vh + 6.75vmin);
}
body > div > div{
  width: 10vmin;
  height: 10vmin;
  border: 1px white solid;
  text-align: center;
  line-height: 7.75vmin;
  font-size: 5vmin;
  font-weight: bold;
}
body > span{
  position: absolute;
  width: 10vmin;
  height: 10vmin;
  border: 2px white solid;
  text-align: center;
  line-height: 8.75vmin;
  font-size: 2.5vmin;
  font-weight: bold;
  box-sizing: content-box;
  transition-property: background-color, color;
  transition-duration: 0.1s;
}
body > span.act, body > span:hover{
  background-color: white;
  color: black;
}
body > span#psh{
  top: calc(50vh + 25vmin - 2px);
  left: calc(50vw - 10vmin - 2px);
  border-top-left-radius: 50%;
}
body > span#pop{
  top: calc(50vh + 25vmin - 2px);
  right: calc(50vw - 10vmin - 2px);
  border-top-right-radius: 50%;
}
body > span#rmv{
  top: calc(50vh + 35vmin + 2px);
  left: calc(50vw - 10vmin - 2px);
  border-bottom-left-radius: 50%;
}
body > span#rst{
  top: calc(50vh + 35vmin + 2px);
  right: calc(50vw - 10vmin - 2px);
  border-bottom-right-radius: 50%;
}