body {
  margin: 0;
  display: flex;
  background-color: #355070;
  user-select: none;
}

.absolute-center {
  position: absolute;
  left: 50%;
  top: 37.5%;
  transform: translateX(-63.7%) translateY(-53.8%);
}

.table {
  position: absolute;
  z-index: -3;
  transform: translateX(-590px) translateY(285px);
  filter: blur(1px);
}

.remote {
  transform: translateX(300px) translateY(425px);
  z-index: 100;
  pointer-events: none;
}

/* .remote:active {
  animation: jiggle 0.5s linear ease;
} */

.remote-mask {
  width: 380;
  transform: translateX(300px) translateY(425px);
  z-index: 0;
}

.remote-mask:hover {
  filter: drop-shadow(0px 0px 100px rgb(214, 5, 197));
  animation: mask-pulse 1s infinite ease;
}

.mask-pulse {
  animation: mask-pulse 3s infinite ease;
}

.game-border {
  width: 100vw;
  height: 100vh;
  background: transparent;
  border: solid 160px #355070;
  border-radius: 15px;
  z-index: -5;
}

.png-border {
  z-index: 100;
  position: absolute;
  left: 50%;
  top: 37.5%;
  transform: translateX(-50%) translateY(-50%);
  filter: blur(1px);
}

/* .info-overlay {
} */

.game-area-overlay {
  transition: all ease 0.3s;
  background-image: repeating-radial-gradient(
    circle at 17% 32%,
    white,
    black 0.00085px
  );
  filter: blur(3px) sepia(50%);
  z-index: 96;
  animation: tv-static 5s linear infinite;
  opacity: 35%;
}

.game-area-overlay2 {
  display: none;
  background-color: #151618;
  box-shadow: inset 0px 0px 800px 100px rgb(102, 102, 102);
  z-index: 95;
  size: 800;
  background-size: contain;
  background-repeat: no-repeat;
}

.page-container {
  max-height: 100vh;
}

.page-background {
  position: absolute;
  z-index: 0;
  background-color: aquamarine;
}

.death-anim {
  animation: death-anim 0.8s forwards ease-in;
}

@keyframes death-anim {
  0% {
  }
  100% {
    transform: rotate(-100deg) translateX(-110px);
  }
}

.blink-text {
  transition: none;
  animation: blink 1s linear infinite;
}

@keyframes blink {
  50% {
    color: rgb(214, 5, 197);
  }
}

@keyframes tv-static {
  from {
    background-size: 100% 100%;
  }
  to {
    background-size: 200% 200%;
  }
}
/* 
@keyframes jiggle {
  0% {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(0deg);
  }
} */

@keyframes mask-pulse {
  0% {
  }
  50% {
    filter: drop-shadow(0px 0px 100px rgb(255, 217, 0));
  }
  100% {
  }
}