:where([class^="ri-"])::before { content: "\f3c2"; }
body {
font-family: 'Inter', sans-serif;
background-color: #0f172a;
color: #e2e8f0;
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -4px;
left: 0;
background-color: #6366f1;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.portfolio-item {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.portfolio-item:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
}
.portfolio-overlay {
opacity: 0;
transition: opacity 0.3s ease;
}
.portfolio-item:hover .portfolio-overlay {
opacity: 1;
}
input, textarea {
background-color: #1e293b;
border: 1px solid #334155;
color: #e2e8f0;
transition: border-color 0.3s ease;
}
input:focus, textarea:focus {
border-color: #6366f1;
outline: none;
}
.skill-bar {
height: 6px;
background-color: #1e293b;
border-radius: 3px;
overflow: hidden;
}
.skill-progress {
height: 100%;
background-color: #6366f1;
border-radius: 3px;
}
.cursor-dot {
pointer-events: none;
position: fixed;
top: 0;
left: 0;
width: 8px;
height: 8px;
background-color: #6366f1;
border-radius: 50%;
z-index: 9999;
transform: translate(-50%, -50%);
transition: width 0.2s, height 0.2s;
}
.cursor-outline {
pointer-events: none;
position: fixed;
top: 0;
left: 0;
width: 40px;
height: 40px;
border: 1px solid rgba(99, 102, 241, 0.5);
border-radius: 50%;
z-index: 9998;
transform: translate(-50%, -50%);
transition: width 0.2s, height 0.2s, border-color 0.2s;
}