@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Press Start 2P", cursive;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #50bdc7;
  overflow: hidden;
}
body:before {
  z-index: -1;
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background-image: url("https://raw.githubusercontent.com/Nik439/Images/master/cpc-hide-reveal/hint.png");
  background-repeat: no-repeat;
  background-size: 100px;
  background-position: calc(50% + 195px) calc(50% - 55px);
  transform: rotate(-23deg);
  opacity: 0.7;
}
body.grabbing {
  cursor: grabbing;
}
body.grabbing * {
  cursor: grabbing !important;
}
body .password_label {
  position: absolute;
  font-size: 25px;
  transform: translateY(-70px);
}
body .password {
  font-size: 20px;
  outline: none;
  width: 300px;
  height: 80px;
  border: 1px solid #686868;
}
body .password.visible {
  letter-spacing: 12px;
  padding: 20px 7px 20px 35px;
  color: black;
}
body .password.hidden {
  padding: 20px;
  font-size: 50px;
  pointer-events: none;
  z-index: 1;
  letter-spacing: -18px;
  position: absolute;
  opacity: 1;
  background-image: url("https://raw.githubusercontent.com/Nik439/Images/master/cpc-hide-reveal/glass.svg");
  transform-origin: 50% 100%;
}
body .password.hidden.slide {
  transform: rotateX(180deg);
}
body img {
  position: absolute;
  user-select: none;
}
body img.left {
  transform: translate(-100px, 40px);
}
body img.right {
  transform: translate(100px, 40px);
}
body img.handle {
  transform: translateY(-40px);
  z-index: 3;
  transform-origin: 50% calc(50% + 80px);
  cursor: grab;
}
button.buttonback {
  position: absolute;
  top: 10px;
  left: 10px;
  color: blue;
  text-align: left;
  vertical-align: text-top;
  background-color: black;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
}