html,body{
  background-color: #000;
  margin: 0;
}

div.back{
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: repeat(3, 1fr);
  height: 100%;
}

div.flip {
  border: 2px solid black;
  display: grid;
  grid-template-columns: 50% 50%;
}

div.hin{
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

div.text{
  font-size: 250%;
  font-weight: bolder;
  font-style: italic;
}

div.btn{
  padding:10px;
  position: relative;
}

div.btn input{
  background-color: #0000003f;
  width: 100%;
  height: 100%;
  border-style: none;
  border-radius: 5px;
  font-size: 200%;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 0;
  text-decoration-line: underline;
  text-decoration-color: #fff;
  text-decoration-style: dashed;
  text-decoration-thickness: 3px;
  cursor: pointer;
  transition: 0.5s cubic-bezier(.68,-0.55,.27,1.55), border-radius 0.25s cubic-bezier(.68,-0.55,.27,1.55);
}

div.btn input:hover {
  letter-spacing: 5px;
  color: #fff;
  text-decoration-style: dotted;
  background-color: #0000007f;
  border-radius: 25px;
}

div.btn div{
  opacity: 0;
  position: absolute;
  margin: 10px;
  width: 5px;
  height: 5px;
  border: 1px solid;
  border-radius: 10px;
  background-color: #000;
  animation: move 4s linear infinite;
}

@keyframes move{
  0%{
    top:0px;
    left:10px;
  }
  34%{
    top:0;
    left: calc(100% - 35px);
  }
  36%{
    top:10px;
    left: calc(100% - 25px);
  }
  49%{
    top:calc(100% - 35px);
    left:calc(100% - 25px);
  }
  51%{
    top:calc(100% - 25px);
    left:calc(100% - 35px);
  }
  84%{
    top:calc(100% - 25px);
    left:10px;
  }
  86%{
    top:calc(100% - 35px);
    left:0;
  }
  99%{
    top:10px;
    left:0;
  }
  100%{
    top:0px;
    left:10px;
  }
}

div.bmac{ background-color: #ffdd00; }
div.pat{ background-color: #FF424D; }
div.pp{ background-color: #3b7bbf; }
div.libre{ background-color: #f6c915; }
div.bit{ background-color: #f7931a; }
div.idk{ background-color: #fff; }