:root {
--color-bg: #ffffff;
--color-text: #3f3f46;
--color-muted: #71717a;
--color-accent: #a855f7;
--color-accent-hover: #9333ea;
--font-sans: Cosmica, Arial, sans-serif;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.25rem;
--text-xl: 1.75rem;
--text-2xl: 2.5rem;
--leading-tight: 1.2;
--leading-normal: 1.5;
--weight-regular: 400;
--weight-bold: 700;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--radius-sm: 0.25rem;
--radius-md: 0.75rem;
--radius-lg: 1.5rem;
--content-width: 72rem;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
color: var(--color-text);
background: var(--color-bg);
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-normal);
-webkit-font-smoothing: antialiased;
} body > .mobile,
body > .fab {
position: fixed;
}
a {
color: inherit;
text-decoration: none;
}
.site-content {
flex: 1;
}
.site-main {
flex: 1;
max-width: var(--content-width);
margin-inline: auto;
padding: var(--space-12) var(--space-8);
min-height: 40vh;
width: 100%;
}
.site-main h1 {
font-size: var(--text-2xl);
line-height: var(--leading-tight);
font-weight: var(--weight-bold);
margin-bottom: var(--space-4);
}
@media (max-width: 560px) {
.site-main {
padding: var(--space-8) var(--space-4);
}
}