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


@font-face {
    font-family: 'albertus';
    src: url(
        '../font/Albertus\ Extra\ Bold\ Regular.ttf'
    );
}

@layer components {}

.header {
    @apply col-span-12 p-2 font-extrabold text-2xl flex align-middle justify-center;
    font-family: 'albertus';
    background: radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(225, 234, 238) 90%);
}

.sidebar {
    @apply col-span-12 md:col-span-2 px-2
}

.content {
    @apply col-span-12 md:col-span-10;
    min-height: calc(100vh - 7.75rem);
}

.footer {
    @apply col-span-12 p-2 text-lg flex align-middle justify-between;
    font-family: 'albertus';
    background: radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(225, 234, 238) 90%);
}

.router-link-active {
    @apply bg-slate-200 dark:bg-slate-700
}