@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

[data-theme='light'] {
    --text-color: #000000;
    --bg-color: #f4f4f4;
    --hover-bg-color: #e4e4f0;
}

[data-theme='dark'] {
    --text-color: #f4f4f4;
    --bg-color: #010101;
    --hover-bg-color: #1f2937;
}

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

h1 {
    color: var(--text-color);
    @apply  text-4xl
}

.nav-item {
    @apply rounded px-3 py-2 text-sm mr-1
}

.nav-item:hover {
    background-color: var(--hover-bg-color);
}

.nav-trailing {
    @apply rounded-full p-1
}

.nav-trailing:hover {
    background-color: var(--hover-bg-color);
}

.nav-logo:hover {
    background-color: var(--hover-bg-color);
}