@import 'https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css';

/* Custom styles */
:root {
    --primary-bg: #2d3748;
    --primary-text: #e2e8f0;
    --accent-color: #ffa000;
    --secondary-bg: #363752;
}

body {
    background-color: var(--primary-bg);
    color: var(--primary-text);
}

.accent {
    color: var(--accent-color);
}

.btn {
    background-color: var(--secondary-bg);
    color: var(--primary-text);
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    border: 1px solid var(--accent-color);
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: var(--accent-color);
}

/* Header and footer styles */
header, footer {
    background-color: var(--secondary-bg);
}

/* Link styles */
a {
    color: var(--accent-color);
    transition: color 0.3s ease;
}

a:hover {
    color: #fbb136;
}

/* Table styles */
.events-table th {
    background-color: var(--primary-bg);
}

.events-table tr:hover {
    background-color: var(--secondary-bg);
}

/* Form styles */
input[type="text"],
input[type="email"],
textarea {
    background-color: var(--primary-bg);
    color: var(--primary-text);
    border: 1px solid var(--accent-color);
}

/* Responsive table styles for small screens */
@media (max-width: 640px) {
    .events-table {
        font-size: 0.875rem; /* 14px */
    }

    .events-table th,
    .events-table td {
        padding: 0.5rem 0.25rem;
    }

    .events-table th {
        font-size: 0.75rem; /* 12px */
    }
}