1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
@import "tailwindcss";
:root {
--background: var(--color-white);
--foreground: #171717;
--background-gradient: radial-gradient(
circle at 30% -30%,
var(--color-red-200),
var(--color-white),
var(--color-red-400)
);
/* --gradient-red: var(--color-red-200); */
--accent-color: var(--color-amber-900);
}
/* @media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
--background-gradient: radial-gradient(
circle at 30% -30%,
var(--color-red-900),
var(--color-gray-700),
var(--color-red-800)
);
}
} */
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-accent: var(--accent-color);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}
html {
scroll-behavior: smooth;
}
body {
background: var(--background);
color: var(--foreground);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
/* background: radial-gradient(
circle at bottom left,
transparent 25%,
#f61a1a 25.5%,
#f61a1a 36%,
transparent 37%,
transparent 100%
),
radial-gradient(
circle at top right,
transparent 34%,
#f61a1a 34.5%,
#f61a1a 45.5%,
transparent 46%,
transparent 100%
);
background-size: 3em 3em;
background-color: #f1f1f1;
opacity: 0.85;
/* Add texture to background
background-image: url("/public/white-carbon.png");
background-repeat: repeat;
background-size: contain; */
}
@layer utilities {
.text-gradient {
@apply bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent;
}
.button-gradient {
@apply bg-gradient-to-r from-blue-600 to-purple-600 text-white;
}
}
@theme inline {
--animate-cell-ripple: cell-ripple var(--duration, 200ms) ease-out none 1
var(--delay, 0ms);
@keyframes cell-ripple {
0% {
opacity: 0.4;
}
50% {
opacity: 0.8;
}
100% {
opacity: 0.4;
}
}
}
|
