vert/src/app.css

41 lines
1.2 KiB
CSS

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import url(@fontsource/lexend/400.css);
@import url(@fontsource/lexend/500.css);
@import url(@fontsource/azeret-mono/600.css);
:root {
--accent-bg: hsl(303, 73%, 81%);
--accent-fg: hsl(0, 0, 10%);
--font-body: "Lexend", system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
"Helvetica Neue", sans-serif;
--font-display: "Azeret Mono", var(--font-body);
--bg: hsl(0, 0%, 100%);
--fg: hsl(0, 0%, 10%);
--fg-muted: hsl(0, 0%, 50%);
--fg-muted-alt: hsl(0, 0%, 75%);
--fg-failure: hsl(0, 67%, 49%);
}
body {
@apply text-foreground bg-background font-body overflow-x-hidden;
width: 100vw;
}
@layer components {
select {
@apply appearance-none;
}
.btn {
@apply font-display flex items-center justify-center overflow-hidden relative cursor-pointer px-4 border-2 border-solid bg-background border-foreground-muted-alt rounded-xl p-2 focus:!outline-none hover:scale-105 transition-all duration-200 active:scale-95;
}
.btn-highlight {
@apply bg-accent-background text-accent-foreground border-accent-background;
}
}