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

@layer components {
    .custom-content {
        @apply px-4 py-8;
        /* Add padding to the content */
    }
}

/* Add this to your CSS file */
@media (max-width: 768px) {
    .custom-content {
        /* max-width: 95%; */
        /* Make sure content does not exceed screen width */
        overflow-x: hidden;
        padding-left: 20px;
        padding-right: 20px;
        /* Hide any horizontal overflow */
    }

    .mx-auto {
        margin-left: auto;
        margin-right: auto;
    }

    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

:root {
    max-width: screen;
}