@import url('https://api.fontshare.com/css?f[]=satoshi@400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:wght@400&display=swap');
@import 'tailwindcss';
@theme {
--font-sans: 'Satoshi', sans-serif;
--font-mono: 'Atkinson Hyperlegible Mono', monospace;
}
@layer base {
:root {
color-scheme: dark;
}
html {
@apply bg-slate-950;
}
body {
@apply text-slate-50 font-sans;
}
button:not(:disabled) {
@apply cursor-pointer;
}
h1, h2, h3 {
@apply text-slate-200 font-bold;
}
h1 {
@apply text-3xl;
}
h2 {
@apply text-2xl;
}
h3 {
@apply text-xl;
}
}
@layer components {
.box {
@apply text-sm flex flex-col gap-1 text-slate-400 transition-colors;
@variant has-[:not(:first-child:focus):focus] {
@apply text-slate-50;
}
}
.box > :not(:first-child) {
@apply border border-slate-400 p-2 text-slate-50 transition outline-none font-normal flex-1;
@variant focus {
@apply border-slate-50;
}
}
.box > textarea {
@apply resize-none placeholder-slate-400 font-mono;
}
.btn {
@apply px-2 py-1 text-slate-400 border border-current transition-colors;
@variant [&:hover,&:focus] {
@apply text-slate-50;
}
@variant aria-checked {
@apply bg-slate-50 text-slate-950 border-slate-50;
}
}
}