@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
:where([class^="ri-"])::before { content: "\f3c2"; }
body {
font-family: 'Inter', sans-serif;
transition: background-color 0.3s, color 0.3s;
}
.theme-light {
--bg-primary: #ffffff;
--bg-secondary: #f9fafb;
--text-primary: #1f2937;
--text-secondary: #4b5563;
--border-color: #e5e7eb;
}
.theme-dark {
--bg-primary: #111827;
--bg-secondary: #1f2937;
--text-primary: #f9fafb;
--text-secondary: #d1d5db;
--border-color: #374151;
}
.custom-switch {
position: relative;
display: inline-block;
width: 60px;
height: 30px;
}
.custom-switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 30px;
}
.slider:before {
position: absolute;
content: "";
height: 22px;
width: 22px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: var(--color-primary, rgba(0, 0, 0, 0.705));
}
input:checked + .slider:before {
transform: translateX(30px);
}
.language-switch {
position: relative;
display: inline-block;
width: 80px;
height: 30px;
border-radius: 30px;
background-color: var(--bg-secondary);
overflow: hidden;
}
.language-switch input {
opacity: 0;
width: 0;
height: 0;
}
.language-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: .4s;
border-radius: 30px;
display: flex;
align-items: center;
}
.language-slider span {
width: 50%;
text-align: center;
font-size: 12px;
font-weight: 600;
z-index: 1;
transition: color 0.3s;
}
.language-slider:before {
position: absolute;
content: "";
height: 26px;
width: 40px;
left: 2px;
bottom: 2px;
background-color: var(--color-primary, #6366f1);
transition: .4s;
border-radius: 30px;
}
input:checked + .language-slider:before {
transform: translateX(36px);
}
.typing-effect::after {
content: "|";
animation: blink 1s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.skill-bar {
height: 8px;
border-radius: 4px;
background-color: #e5e7eb;
overflow: hidden;
}
.skill-progress {
height: 100%;
border-radius: 4px;
background-color: var(--color-primary, #6366f1);
}
.project-card {
transition: transform 0.3s, box-shadow 0.3s;
}
.project-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.modal {
transition: opacity 0.3s ease;
}
.modal-content {
transition: transform 0.3s ease;
}
.modal.hidden .modal-content {
transform: scale(0.9);
}