@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];
}

.send-btn-style {
  @apply 
  w-[50px] 
  h-[50px] 
  border-1 
  border-gray-500
  rounded-3xl
  hover:bg-blue-200 
  bg-red-100 
  text-red-700
  cursor-pointer
  shadow-[0_2px_0_0_black]
  transition-all
  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 */
}

.modal-messages {
  @apply
  h-[80px]
  bg-white 
  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 */
}



.text-info {
  @apply
  text-blue-800

}


.chat-window-style {
  @apply
  w-[400px]
  h-[50px]
  p-[10px]
  border-1 
  border-black
  shadow-sm
  flex-1
  rounded-3xl
  focus:bg-blue-300
  hover:bg-blue-200
  bg-white 
  text-gray-800;
}

.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
}

.title {
  @apply
  text-6xl 
  font-bold
  text-gray-800
}

.ping-box {
  @apply
  w-[150px] 
  ml-2 border-1
  border-gray-500 
  bg-white 
  rounded-2xl 
  p-2 
  shadow-md 
  flex flex-col 
  gap-1 
  h-[350px];
}

.ping-title {
  @apply
  text-sm 
  font-semibold
  text-blue-800;
}

div-buddies-list {
  @apply
  text-black
  whitespace-pre-wrap
	cursor-pointer 
	hover:text-blue-500 
	transition-colors 
	duration-150;
}

p {
  @apply
  text-black
}

div-test {
  @apply
  text-red-800
  text-right;
  
}

div-notlog {
  @apply
  text-red-800
  text-3xl
  text-center;
}

div-private {
  @apply
  text-blue-800;

}

.popUpBox {
  @apply
  bg-white 
  p-6 rounded-xl 
  shadow-xl 
  w-[800px]
  h-[350px]
  p-[10px]
  border-1 
  border-black

}

.profilPopup {
  @apply 
  fixed 
  inset-0 
  bg-black/50 
  flex
  justify-center 
  items-center;
}

.popup-b-invite {
  @apply
  absolute 
  bottom-42 
  right-12
}

.popup-b-block {
  @apply
  absolute 
  bottom-52 
  right-12
}

.popUpMessage {
  @apply
  bg-white 
  p-6 rounded-xl 
  shadow-xl 
  w-[800px]
  h-[100px]
  p-[10px]
  border-1 
  border-black

}

.gamePopup {
  @apply 
  fixed 
  inset-0 
  bg-black/50 
  flex
  justify-center 
  items-center;
}




.hidden{
    display: none;
}