/*
 * Main Stylesheet for Alec Brewer's Personal Landing Page
 */

:root {
  /* Color Palette */
  --primary-color: #3a86ff;
  --secondary-color: #8338ec;
  --accent-color: #ff006e;
  --dark-color: #1a1a2e;
  --light-color: #ffffff;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;

  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-xxl: 3rem;

  /* Border Radius */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;

  /* Transitions */
  --transition-fast: 0.2s;
  --transition-normal: 0.3s;
  --transition-slow: 0.5s;

  /* Z-indices */
  --z-index-header: 100;
  --z-index-modal: 1000;
}

/* Dark mode overrides */
:root[data-theme='dark'] {
  --dark-color: #f8f9fa;
  --light-color: #1a1a2e;
  --gray-100: #343a40;
  --gray-200: #495057;
  --gray-300: #6c757d;
  --gray-400: #adb5bd;
  --gray-500: #ced4da;
  --gray-600: #dee2e6;
  --gray-700: #e9ecef;
  --gray-800: #f8f9fa;
  --gray-900: #ffffff;
}

/* Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray-800);
  background-color: var(--light-color);
  overflow-x: hidden;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-fast) ease;
}

a:hover {
  color: var(--secondary-color);
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  line-height: 1.2;
  color: var(--dark-color);
  font-weight: 600;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: var(--space-lg);
}

h2 {
  font-size: 2rem;
  margin-bottom: var(--space-lg);
}

h3 {
  font-size: 1.5rem;
  margin-bottom: var(--space-md);
}

p {
  margin-top: 0;
  margin-bottom: var(--space-md);
}

img {
  max-width: 100%;
  height: auto;
}

ul {
  padding-left: 0;
  list-style: none;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* Button Styles */
.btn {
  display: inline-block;
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--border-radius-md);
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  line-height: 1.4;
}

.btn.primary {
  background-color: var(--primary-color);
  color: var(--light-color);
  border: 2px solid var(--primary-color);
}

.btn.primary:hover {
  background-color: transparent;
  color: var(--primary-color);
}

.btn.secondary {
  background-color: transparent;
  color: var(--gray-700);
  border: 2px solid var(--gray-300);
}

.btn.secondary:hover {
  border-color: var(--gray-700);
  color: var(--dark-color);
}

/* Header Styles */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: var(--z-index-header);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: var(--space-md) 0;
  transition: all var(--transition-normal) ease;
}

.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo a {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--dark-color);
  text-decoration: none;
  display: flex;
  align-items: center;
}

.logo a span {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  display: inline-block;
}

.main-nav ul {
  display: flex;
  gap: var(--space-xl);
}

.main-nav ul li a {
  color: var(--gray-700);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition-fast) ease;
}

.main-nav ul li a:hover {
  color: var(--primary-color);
}

/* Position theme switch in the header */
.site-header .theme-switch {
  display: flex;
  align-items: center;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--dark-color);
  transition: all 0.3s ease-in-out;
}

/* Hero Section */
.hero-section {
  padding: calc(80px + var(--space-xxl)) 0 var(--space-xxl);
  background-color: var(--gray-100);
  position: relative;
  overflow: hidden;
}

.hero-section .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xl);
}

.hero-content {
  flex: 1;
  max-width: 600px;
}

.hero-content h1 {
  font-size: 3.5rem;
  margin-bottom: var(--space-md);
  background: linear-gradient(135deg, var(--dark-color) 0%, var(--primary-color) 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-content .subtitle {
  font-size: 1.4rem;
  color: var(--gray-600);
  margin-bottom: var(--space-xl);
  font-weight: 300;
}

.hero-content .intro {
  font-size: 1.1rem;
  margin-bottom: var(--space-xl);
}

.hero-cta {
  display: flex;
  gap: var(--space-md);
}

.hero-image {
  flex: 1;
  display: flex;
  justify-content: center;
}

.profile-img-placeholder {
  width: 360px;
  height: 360px;
  position: relative;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: morph 8s ease-in-out infinite;
}

.profile-img-inner {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  background-color: var(--gray-100);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  animation: morph 8s ease-in-out infinite;
  animation-delay: 0.2s;
}

@keyframes morph {
  0% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
  25% {
    border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
  }
  50% {
    border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
  }
  75% {
    border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
  }
  100% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
}

/* Section Styles */
section {
  padding: var(--space-xxl) 0;
}

section h2 {
  margin-bottom: var(--space-lg);
  text-align: center;
}

.section-intro {
  max-width: 700px;
  margin: 0 auto var(--space-xl);
  text-align: center;
  color: var(--gray-600);
}

.section-footer {
  margin-top: var(--space-xl);
  text-align: center;
}

.section-subtext {
  margin-top: var(--space-md);
  text-align: center;
  color: var(--gray-600);
  font-size: 0.9rem;
}

/* About Section */
.about-section {
  background-color: var(--light-color);
}

.about-content {
  display: flex;
  gap: var(--space-xl);
}

.about-text {
  flex: 2;
  font-size: 1.05rem;
}

.skills {
  flex: 1;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: 0;
  margin: 0;
  list-style: none;
}

.skill-tags li {
  padding: var(--space-sm) var(--space-md);
  background-color: var(--gray-200);
  color: var(--gray-700);
  border-radius: var(--border-radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
}

/* Projects Section */
.projects-section {
  background-color: var(--gray-100);
}

/* Projects & Concepts Section */
.projects-concepts-section {
  background-color: var(--gray-100);
}

.filter-controls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.filter-btn {
  padding: var(--space-sm) var(--space-lg);
  background-color: transparent;
  border: 1px solid var(--gray-300);
  border-radius: var(--border-radius-md);
  color: var(--gray-600);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all var(--transition-fast) ease;
}

.filter-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.filter-btn.active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--light-color);
}

.projects-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.project-card {
  background-color: var(--light-color);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.project-card .card-content {
  padding: var(--space-lg);
}

.project-card h3 {
  margin-top: 0;
  margin-bottom: var(--space-sm);
  font-size: 1.3rem;
}

.project-card p {
  color: var(--gray-600);
  margin-bottom: var(--space-md);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-card .tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.project-card .tech-tag {
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--gray-200);
  color: var(--gray-700);
  border-radius: var(--border-radius-sm);
  font-size: 0.8rem;
  font-weight: 500;
}

.project-card .repo-stats {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-lg);
  color: var(--gray-600);
  font-size: 0.9rem;
}

.project-card .stat {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Music Section */
.music-section {
  background-color: var(--light-color);
}

.playlists-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.playlist-card {
  background-color: var(--light-color);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}

.playlist-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.playlist-cover {
  position: relative;
  padding-top: 100%; /* 1:1 Aspect Ratio */
  background-color: var(--gray-200);
}

.playlist-cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.playlist-content {
  padding: var(--space-md);
}

.playlist-card h3 {
  margin-top: 0;
  margin-bottom: var(--space-xs);
  font-size: 1.1rem;
}

.playlist-card p {
  color: var(--gray-600);
  margin-bottom: var(--space-md);
  font-size: 0.9rem;
}

.playlist-card .play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--secondary-color);
  color: var(--light-color);
  border-radius: var(--border-radius-sm);
  transition: background var(--transition-fast) ease;
}

.playlist-card .play-btn:hover {
  background-color: var(--primary-color);
}

.playlist-buttons {
  display: flex;
  gap: var(--space-sm);
}

/* Blog Section */
.blog-section {
  background-color: var(--gray-100);
}

.blog-posts-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-lg);
}

.blog-card {
  background-color: var(--light-color);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.blog-image {
  position: relative;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  background-color: var(--gray-200);
}

.blog-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-content {
  padding: var(--space-lg);
}

.blog-card h3 {
  margin-top: 0;
  margin-bottom: var(--space-xs);
  font-size: 1.2rem;
}

.blog-date {
  font-size: 0.85rem;
  color: var(--gray-600);
  margin-bottom: var(--space-sm);
  display: block;
}

.blog-card p {
  color: var(--gray-600);
  margin-bottom: var(--space-md);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card .read-more {
  color: var(--primary-color);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.95rem;
  transition: color var(--transition-fast) ease;
}

.blog-card .read-more:hover {
  color: var(--secondary-color);
}

/* Reading Section */
.reading-scroll-container {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-lg);
}

.reading-scroll-track {
  display: flex;
  gap: var(--space-lg);
}

.reading-card {
  flex: 0 0 auto;
  width: 30%;
  min-width: 320px;
  padding: 0.5rem;
  scroll-snap-align: start;
  background-color: var(--light-color);
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.reading-card h3 {
  margin: 0 0 var(--space-xs) 0;
  font-size: 1rem;
}

.reading-date {
  display: block;
  font-size: 0.85rem;
  color: var(--gray-600);
  margin-bottom: var(--space-xs);
}

.pdf-container {
  width: 100%;
  max-height: 400px;
  overflow-y: auto;
}

.pdf-canvas {
  width: 100%;
  display: block;
  margin-bottom: var(--space-xs);
}

/* LinkedIn Section */
.linkedin-section {
  background-color: var(--light-color);
}


.linkedin-scroll-container {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-lg);
}

.linkedin-scroll-track {
  display: flex;
  gap: var(--space-lg);
}

.linkedin-card {
  flex: 0 0 auto;
  width: 30%;
  min-width: 320px;
  scroll-snap-align: start;
  background-color: var(--light-color);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--gray-300);
  transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}

.linkedin-card iframe {
  width: 100%;
  border: none;
}

.linkedin-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.linkedin-content {
  padding: var(--space-lg);
}

.linkedin-card h3 {
  margin-top: 0;
  margin-bottom: var(--space-xs);
  font-size: 1.2rem;
  border-left: 3px solid var(--primary-color);
  padding-left: var(--space-sm);
}

.linkedin-date {
  font-size: 0.85rem;
  color: var(--gray-600);
  margin-bottom: var(--space-sm);
  display: block;
}

.linkedin-card p {
  color: var(--gray-600);
  margin-bottom: var(--space-md);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.linkedin-card .read-more {
  color: var(--primary-color);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.95rem;
  transition: color var(--transition-fast) ease;
}

.linkedin-card .read-more:hover {
  color: var(--secondary-color);
}

/* Affiliates Section */
.affiliates-section {
  background-color: var(--gray-100);
}

.affiliates-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}


/* Contact Section */
.contact-section {
  background-color: var(--light-color);
}

.contact-content {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
}

.contact-info {
  flex: 1;
  min-width: 300px;
}

.contact-info p {
  margin-bottom: var(--space-lg);
}

.contact-links {
  padding: 0;
  list-style: none;
}

.contact-links li {
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.email-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233a86ff'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-.4 4.25l-7.07 4.42c-.32.2-.74.2-1.06 0L4.4 8.25c-.25-.16-.4-.43-.4-.72 0-.67.73-1.07 1.3-.72L12 11l6.7-4.19c.57-.35 1.3.05 1.3.72 0 .29-.15.56-.4.72z'/%3E%3C/svg%3E");
}

.twitter-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233a86ff'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z'/%3E%3C/svg%3E");
}

.linkedin-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233a86ff'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z'/%3E%3C/svg%3E");
}

.theme-switch .icon {
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
}

.sun-icon {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nI2YxYzQwZic+PHBhdGggZD0nTTEyIDE4YTYgNiAwIDEwMC0xMiA2IDYgMCAwMDAgMTJ6TTEyIDIuMjVhLjc1Ljc1IDAgMDEuNzUuNzV2MS41YS43NS43NSAwIDAxLTEuNSAwVjNhLjc1Ljc1IDAgMDEuNzUtLjc1ek0xMiAxOC43NWEuNzUuNzUgMCAwMS43NS43NXYxLjVhLjc1Ljc1IDAgMDEtMS41IDB2LTEuNWEuNzUuNzUgMCAwMS43NS0uNzV6TTQuMTU0IDYuMzc4YS43NS43NSAwIDExMS4wNi0xLjA2bDEuMDYxIDEuMDZhLjc1Ljc1IDAgMTEtMS4wNjEgMS4wNkw0LjE1NCA2LjM3OHpNMTcuNzI0IDE3Ljk0OGEuNzUuNzUgMCAwMTEuMDYxIDEuMDYxbC0xLjA2IDEuMDYxYS43NS43NSAwIDExLTEuMDYxLTEuMDYxbDEuMDYtMS4wNjF6TTIuMjUgMTJhLjc1Ljc1IDAgMDEuNzUtLjc1aDEuNWEuNzUuNzUgMCAwMTAgMS41SDNhLjc1Ljc1IDAgMDEtLjc1LS43NXpNMTguNzUgMTEuMjVhLjc1Ljc1IDAgMDAwIDEuNWgxLjVhLjc1Ljc1IDAgMDAwLTEuNWgtMS41ek02LjM3OCAxNy42MjJhLjc1Ljc1IDAgMTExLjA2MSAxLjA2bC0xLjA2MSAxLjA2MWEuNzUuNzUgMCAxMS0xLjA2LTEuMDYxbDEuMDYtMS4wNnpNMTcuNjIyIDYuMzc4YS43NS43NSAwIDEwLTEuMDYxLTEuMDZsLTEuMDYgMS4wNmEuNzUuNzUgMCAxMDEuMDYgMS4wNjFsMS4wNjEtMS4wNnonLz48L3N2Zz4K");
}

.moon-icon {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nI2Y4ZjlmYSc+PHBhdGggZD0nTTIxIDEyLjc5QTkgOSAwIDAxMTEuMjEgMyA3IDcgMCAxMDEyIDIxYTkgOSAwIDAwOS04LjIxeicvPjwvc3ZnPgo=");
}

.contact-form {
  flex: 1;
  min-width: 300px;
}

.form-group {
  margin-bottom: var(--space-md);
}

.form-group label {
  display: block;
  margin-bottom: var(--space-sm);
  color: var(--gray-700);
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: var(--space-md);
  border: 1px solid var(--gray-300);
  border-radius: var(--border-radius-sm);
  font-size: 1rem;
  transition: border-color var(--transition-fast) ease;
  color: var(--gray-900);
  background-color: var(--gray-100);
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--primary-color);
  outline: none;
}

.form-status {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--border-radius-sm);
  display: none;
}

.form-status.success {
  background-color: #d1e7dd;
  color: #0f5132;
  border: 1px solid #badbcc;
  display: block;
}

.form-status.error {
  background-color: #f8d7da;
  color: #842029;
  border: 1px solid #f5c2c7;
  display: block;
}

/* Footer */
.site-footer {
  background-color: var(--gray-900);
  color: var(--gray-400);
  padding: var(--space-xl) 0;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.footer-logo a {
  color: var(--light-color);
  font-size: 1.5rem;
  font-weight: 700;
}

.footer-logo a span {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  display: inline-block;
}

.footer-nav ul {
  display: flex;
  gap: var(--space-lg);
}

.footer-nav ul li a {
  color: var(--gray-400);
  font-size: 0.9rem;
  transition: color var(--transition-fast) ease;
}

.footer-nav ul li a:hover {
  color: var(--light-color);
}

.social-links {
  display: flex;
  gap: var(--space-md);
}

.social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast) ease;
}

.social-link:hover {
  background-color: var(--primary-color);
}

.github {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 0a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2.2c-3.3.7-4-1.4-4-1.4-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.5 1 0-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.3-3.1-.2-.4-.6-1.6 0-3.2 0 0 1-.3 3.4 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.6.2 2.8 0 3.2.9.8 1.3 1.9 1.3 3.2 0 4.6-2.8 5.6-5.5 5.9.5.4.9 1 .9 2.2v3.3c0 .3.1.7.8.6A12 12 0 0 0 12 0z'/%3E%3C/svg%3E");
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
}

.twitter {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z'/%3E%3C/svg%3E");
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
}

.linkedin {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z'/%3E%3C/svg%3E");
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
}

.instagram {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E");
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
}

.copyright {
  text-align: center;
  font-size: 0.9rem;
  border-top: 1px solid var(--gray-800);
  padding-top: var(--space-lg);
}

/* Loading Indicator */
.loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xxl) 0;
  width: 100%;
}

.loader {
  width: 40px;
  height: 40px;
  border: 3px solid var(--gray-300);
  border-radius: 50%;
  border-top-color: var(--primary-color);
  animation: spin 1s ease-in-out infinite;
  margin-bottom: var(--space-md);
}

.loading-indicator p {
  color: var(--gray-600);
  font-size: 0.9rem;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Theme toggle styles */
.theme-switch {
  margin-left: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--gray-400);
  transition: background-color var(--transition-fast) ease;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: '';
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: var(--light-color);
  transition: transform var(--transition-fast) ease;
  border-radius: 50%;
}

.switch input:checked + .slider {
  background-color: var(--primary-color);
}

.switch input:checked + .slider:before {
  transform: translateX(20px);
}