@import "tailwindcss";
@font-face {
  font-family: "Nimbus Mono L";
  src: url("/fonts/NimbusMonoL.woff2") format("woff2");
}

@tailwind utilities;

.btn-style {
  @apply
  w-[100px]
  h-[32px]
  border-1 
  border-gray-500
  rounded-3xl
  bg-gray-500
  text-white
  cursor-pointer
  shadow-[0_2px_0_0_black]
  transition-all
  hover:bg-blue-200
  active:bg-gray-400
  active:translate-y-[1px]
  active:shadow-[0_2px_0_0_black];
}

.chatbox-style {
  @apply
  w-[650px]
  h-[300px] /* increase height if needed */
  p-[8px]
  border-1
  border-black
  shadow-2xl 
  text-left
  text-gray-700
  bg-white 
  rounded-3xl
  overflow-y-auto
  whitespace-pre-line
  flex
  flex-col
  mx-auto;
}

.system-info {
  @apply
  h-[40px]
  bg-gray-200 
  text-gray-700 
  p-3 
  rounded-3xl 
  mb-2 border 
  border-gray-200 
  text-center
  shadow
  overflow-y-auto
  justify-end    /* 👈 forces text to bottom */
  relative; /* needed for overlay */
}

.displaybox {
  @apply
  fixed
  inset-0
  flex
  items-center
  justify-center
  bg-[#43536b];
  
}

.mainboxDisplay {
  @apply
  fixed 
  top-1/2 
  left-1/2 
  -translate-x-1/2 
  -translate-y-1/2 
  bg-gray-200 w-[850px] 
  p-6 rounded-xl 
  shadow-2xl 
  text-center 
  z-50;
}

.mainboxDisplay button {
  @apply
  cursor-pointer
}

.pongbox-style {
  @apply
  h-[450px]
  w-[800px]
  bg-gray-400
  text-6xl
  flex
  items-center
  justify-center;
}


.text-style {
  @apply
  text-black

}

.pong-field {
  @apply relative w-[800px] h-[450px] bg-black;
}

.pong-bat {
  @apply absolute w-[12px] h-[80px] bg-white;
}

.pong-bat.left {
  @apply left-4 top-1/2 -translate-y-1/2;
}

.pong-bat.right {
  @apply right-4 top-1/2 -translate-y-1/2;
}


.pong-center-line {
  @apply
    absolute
    left-1/2
    top-0
    h-full
    w-[4px]
    -translate-x-1/2
    bg-[linear-gradient(to_bottom,white_50%,transparent_50%)]
    bg-[length:4px_20px];
}