:root {
color-scheme: dark;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #050505;
/* void */
color: #e2e8f0;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
overflow: hidden;
/* App handles scrolling */
}
#app {
width: 100%;
height: 100%;
}
/* Custom Scrollbar - Ultra Thin */
::-webkit-scrollbar {
width: 4px;
height: 4px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 243, 255, 0.3);
/* neon-cyan */
}
/* Selection */
::selection {
background: rgba(0, 243, 255, 0.2);
color: #fff;
}
/* Animations */
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
/* Glitch Effect Utilities */
@keyframes glitch {
0% {
transform: translate(0)
}
20% {
transform: translate(-2px, 2px)
}
40% {
transform: translate(-2px, -2px)
}
60% {
transform: translate(2px, 2px)
}
80% {
transform: translate(2px, -2px)
}
100% {
transform: translate(0)
}
}
/* Project Dropdown - Cyberpunk Style */
#project-dropdown {
background-color: #030308 !important;
box-shadow: 0 4px 30px rgba(0,0,0,1), 0 0 20px rgba(0,243,255,0.25), inset 0 1px 0 rgba(0,243,255,0.2) !important;
}
