/* App-wide styles */ .app { min-height: 100vh; display: flex; flex-direction: column; } main { flex-grow: 1; } /* Dark mode styles */ .app.dark { background-color: var(--dark); color: var(--text); } .app.dark .bg-white { background-color: var(--dark); } .app.dark nav { background-color: var(--dark); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .app.dark .text-gray-600 { color: rgba(255, 255, 255, 0.75); } .app.dark .text-gray-700 { color: rgba(255, 255, 255, 0.9); } .app.dark .shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.6); } .app.dark .border-gray-200 { border-color: rgba(255, 255, 255, 0.1); } /* Transitions */ .transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } /* Fix for mobile responsiveness */ @media (max-width: 640px) { .container { padding-left: 1rem; padding-right: 1rem; } }