@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

/* Custom styles */
body {
    @apply flex flex-col min-h-screen bg-gray-100;
}

main {
    @apply flex-grow;
}

footer {
    @apply mt-auto;
}

.btn {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}

.btn-purple {
    @apply bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded;
}

.card {
    @apply bg-white p-6 rounded-lg shadow-md;
}

/* Custom color scheme */
:root {
    --color-primary: #4A5568; /* Gray */
    --color-secondary: #5B7EAA; /* Updated to darker and more pastel blue */
    --color-accent: #6B46C1; /* Purple */
}

.text-primary {
    color: var(--color-primary);
}

.text-secondary {
    color: var(--color-secondary);
}

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

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

.bg-secondary {
    background-color: var(--color-secondary);
}

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

.site-header {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.site-header .io {
    font-size: 0.7em;
    font-weight: 400;
    vertical-align: super;
}