@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
body {
  background-color: #f9fafb; /* Light background */
}

.grid-pattern {
  position: relative;
  background-image:
    linear-gradient(to right, rgba(0, 0, 255, 0.2) 1px, transparent 1px), /* Vertical grid lines */
    linear-gradient(to bottom, rgba(0, 0, 255, 0.2) 1px, transparent 1px); /* Horizontal grid lines */
  background-size: 40px 40px; /* Adjust grid size here */
}

.bold-red-line {
  width: 4px; /* Thickness of the bold red line */
  background-color: red; /* Color of the line */
}

.torn-edge {
  /* background: url('https://via.placeholder.com/800x50/FFFFFF/EFEFEF?text=Torn+Edge') no-repeat center top; */
  background-size: cover;
}