111 lines
1.9 KiB
CSS
111 lines
1.9 KiB
CSS
@import 'tailwindcss';
|
|
|
|
:root {
|
|
--background: #0f172a;
|
|
--foreground: #f8fafc;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family:
|
|
'Inter',
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
'Segoe UI',
|
|
sans-serif;
|
|
}
|
|
|
|
/* Custom animations */
|
|
@keyframes gradient-shift {
|
|
0%,
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes gradient-rotate {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.animate-gradient {
|
|
background-size: 200% 200%;
|
|
animation: gradient-shift 3s ease infinite;
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fade-in 0.5s ease-out forwards;
|
|
}
|
|
|
|
.delay-700 {
|
|
animation-delay: 700ms;
|
|
}
|
|
|
|
/* Smooth scrolling */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Custom Scrollbars for Dark Theme */
|
|
/* Firefox */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgb(71, 85, 105) rgb(15, 23, 42); /* slate-600 on slate-950 */
|
|
}
|
|
|
|
/* Webkit browsers (Chrome, Safari, Edge) */
|
|
*::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
background: rgb(15, 23, 42); /* slate-950 */
|
|
border-radius: 4px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
background: rgb(71, 85, 105); /* slate-600 */
|
|
border-radius: 4px;
|
|
border: 2px solid rgb(15, 23, 42); /* slate-950 */
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background: rgb(100, 116, 139); /* slate-500 */
|
|
}
|
|
|
|
/* Code blocks - slightly brighter scrollbar for better visibility */
|
|
pre::-webkit-scrollbar-thumb {
|
|
background: rgb(100, 116, 139); /* slate-500 */
|
|
}
|
|
|
|
pre::-webkit-scrollbar-thumb:hover {
|
|
background: rgb(148, 163, 184); /* slate-400 */
|
|
}
|