:where([class^="ri-"])::before { content: "\f3c2"; }
html {
scroll-behavior: smooth;
font-family: 'Inter', sans-serif;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
@keyframes twinkle {
0% { opacity: 1; }
50% { opacity: 0.3; }
100% { opacity: 1; }
}
.space-bg {
background: linear-gradient(to bottom, white,white);
position: relative;
overflow: hidden;
}
.star {
position: absolute;
background: white;
border-radius: 50%;
animation: twinkle 2s infinite;
}
.floating-animation {
animation: float 6s ease-in-out infinite;
}
.space-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.space-card:hover {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.glow-text {
text-shadow: 0 0 10px rgba(79, 70, 229, 0.5);
}
.hover-glow:hover {
box-shadow: 0 0 20px rgba(79, 70, 229, 0.3);
}
body {
background-color: #fafafa;
color: #1f2937;
}
.project-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.skill-icon {
transition: transform 0.3s ease;
}
.skill-icon:hover {
transform: translateY(-5px);
}
.modal {
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-content {
transition: transform 0.3s ease;
}
.modal.active {
opacity: 1;
visibility: visible;
}
.modal.active .modal-content {
transform: translateY(0);
}
.progress-bar {
position: relative;
height: 8px;
border-radius: 4px;
background-color: #e5e7eb;
overflow: hidden;
}
.progress-bar-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #4F46E5;
border-radius: 4px;
transition: width 1s ease;
}
.custom-checkbox {
appearance: none;
width: 20px;
height: 20px;
border: 2px solid #e5e7eb;
border-radius: 4px;
background-color: white;
cursor: pointer;
position: relative;
transition: all 0.2s ease;
}
.custom-checkbox:checked {
background-color: #4F46E5;
border-color: #4F46E5;
}
.custom-checkbox:checked::after {
content: '';
position: absolute;
top: 4px;
left: 7px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.custom-switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.custom-switch input {
opacity: 0;
width: 0;
height: 0;
}
.switch-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e5e7eb;
transition: .4s;
border-radius: 24px;
}
.switch-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .switch-slider {
background-color: #4F46E5;
}
input:checked + .switch-slider:before {
transform: translateX(26px);
}
.custom-range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 8px;
border-radius: 4px;
background: #e5e7eb;
outline: none;
}
.custom-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #4F46E5;
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.custom-range::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #4F46E5;
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.form-input {
width: 100%;
padding: 0.75rem 1rem;
border-radius: 8px;
border: 2px solid #e5e7eb;
outline: none;
transition: border-color 0.3s ease;
font-size: 0.875rem;
}
.form-input:focus {
border-color: #4F46E5;
}
.form-input.error {
border-color: #ef4444;
}
.form-label {
position: absolute;
left: 1rem;
top: 0.75rem;
color: #6b7280;
transition: all 0.2s ease;
pointer-events: none;
font-size: 0.875rem;
}
.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label {
top: -0.5rem;
left: 0.75rem;
font-size: 0.75rem;
padding: 0 0.25rem;
background-color: white;
color: #4F46E5;
}
.form-input.error + .form-label {
color: #ef4444;
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -4px;
left: 0;
background-color: #4F46E5;
transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
.hamburger {
width: 24px;
height: 18px;
position: relative;
cursor: pointer;
}
.hamburger span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #737679;
border-radius: 2px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
.hamburger span:nth-child(1) {
top: 0px;
}
.hamburger span:nth-child(2) {
top: 8px;
}
.hamburger span:nth-child(3) {
top: 16px;
}
.hamburger.active span:nth-child(1) {
top: 8px;
transform: rotate(45deg);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
top: 8px;
transform: rotate(-45deg);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn {
animation: fadeIn 0.8s ease forwards;
}
.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }
.animate-delay-400 { animation-delay: 0.4s; }
/* Project and Certification visibility styles */
.project-hidden,
.certification-hidden {
  display: none !important;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.project-visible,
.certification-visible {
  display: block !important;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Toggle button styles */
#toggle-projects-btn,
#toggle-certifications-btn {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

#toggle-projects-btn:hover,
#toggle-certifications-btn:hover {
  transform: translateY(-2px);
}

#toggle-projects-btn:active,
#toggle-certifications-btn:active {
  transform: translateY(0);
}

/* Button ripple effect */
#toggle-projects-btn::before,
#toggle-certifications-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}

#toggle-projects-btn:active::before,
#toggle-certifications-btn:active::before {
  width: 300px;
  height: 300px;
}

/* Animation for smooth grid transitions */
#projects-grid,
#certifications-grid {
  transition: all 0.3s ease;
}

/* Improve card animations */
.project-card,
.certification-card {
  transition: all 0.3s ease;
}

/* Theme toggle button stability */
#theme-toggle {
  position: relative;
  flex-shrink: 0;
  min-width: 2rem;
  min-height: 2rem;
}

#theme-toggle img,
#theme-toggle i {
  transition: opacity 0.2s ease-in-out;
}

/* Prevent layout shifts during theme transitions */
.dark body,
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ensure consistent button sizing across themes */
#theme-toggle img {
  object-fit: contain;
}

/* Header stability during theme changes */
header {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

header .container {
  transition: none; /* Prevent container from animating */
}

header nav {
  display: flex;
  align-items: center;
  height: 100%;
}

/* Ensure logo container doesn't shift */
header a[href="#home"] .w-20 {
  flex-shrink: 0;
}

/* Prevent nav links from causing layout shifts */
.nav-link {
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* Hamburger menu stability */
.hamburger {
  flex-shrink: 0;
}