globals.css

1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4
5:root {
6  --background: #ffffff;
7  --foreground: #171717;
8}
9
10@media (prefers-color-scheme: dark) {
11  :root {
12    --background: #0a0a0a;
13    --foreground: #ededed;
14  }
15}
16
17body {
18  color: var(--foreground);
19  background: var(--background);
20  font-family: Arial, Helvetica, sans-serif;
21}
22
23@layer utilities {
24  .text-balance {
25    text-wrap: balance;
26  }
27}
28
29@layer base {
30  :root {
31    --background: 0 0% 100%;
32    --foreground: 240 10% 3.9%;
33    --card: 0 0% 100%;
34    --card-foreground: 240 10% 3.9%;
35    --popover: 0 0% 100%;
36    --popover-foreground: 240 10% 3.9%;
37    --primary: 240 5.9% 10%;
38    --primary-foreground: 0 0% 98%;
39    --secondary: 240 4.8% 95.9%;
40    --secondary-foreground: 240 5.9% 10%;
41    --muted: 240 4.8% 95.9%;
42    --muted-foreground: 240 3.8% 46.1%;
43    --accent: 240 4.8% 95.9%;
44    --accent-foreground: 240 5.9% 10%;
45    --destructive: 0 84.2% 60.2%;
46    --destructive-foreground: 0 0% 98%;
47    --border: 240 5.9% 90%;
48    --input: 240 5.9% 90%;
49    --ring: 240 10% 3.9%;
50    --chart-1: 12 76% 61%;
51    --chart-2: 173 58% 39%;
52    --chart-3: 197 37% 24%;
53    --chart-4: 43 74% 66%;
54    --chart-5: 27 87% 67%;
55    --radius: 0.5rem;
56  }
57  .dark {
58    --background: 240 10% 3.9%;
59    --foreground: 0 0% 98%;
60    --card: 240 10% 3.9%;
61    --card-foreground: 0 0% 98%;
62    --popover: 240 10% 3.9%;
63    --popover-foreground: 0 0% 98%;
64    --primary: 0 0% 98%;
65    --primary-foreground: 240 5.9% 10%;
66    --secondary: 240 3.7% 15.9%;
67    --secondary-foreground: 0 0% 98%;
68    --muted: 240 3.7% 15.9%;
69    --muted-foreground: 240 5% 64.9%;
70    --accent: 240 3.7% 15.9%;
71    --accent-foreground: 0 0% 98%;
72    --destructive: 0 62.8% 30.6%;
73    --destructive-foreground: 0 0% 98%;
74    --border: 240 3.7% 15.9%;
75    --input: 240 3.7% 15.9%;
76    --ring: 240 4.9% 83.9%;
77    --chart-1: 220 70% 50%;
78    --chart-2: 160 60% 45%;
79    --chart-3: 30 80% 55%;
80    --chart-4: 280 65% 60%;
81    --chart-5: 340 75% 55%;
82  }
83}
84
85@layer base {
86  * {
87    @apply border-border;
88  }
89  body {
90    @apply bg-background text-foreground;
91  }
92}
93
94.typing-text::after {
95  content: '|';
96  animation: blink 1s step-end infinite;
97}
98
99@keyframes blink {
100  from, to { opacity: 1; }
101  50% { opacity: 0; }
102}
103
104
105.perspective-1000 {
106  perspective: 1000px;
107}
108
109@keyframes float {
110  0% {
111      transform: translateY(0px);
112  }
113  50% {
114      transform: translateY(-10px);
115  }
116  100% {
117      transform: translateY(0px);
118  }
119}
120
121.group:hover {
122  animation: float 6s ease-in-out infinite;
123  box-shadow: 
124      0 25px 50px -12px rgba(0, 0, 0, 0.25),
125      0 0 15px rgba(59, 130, 246, 0.1),
126      0 0 30px rgba(59, 130, 246, 0.1);
127    }
128
129.folder-list > * {
130  margin-bottom: 0.5rem;  /* Adds 8px spacing between folder items */
131}
132
133html {
134  scroll-behavior: smooth;
135}