body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background: var(--background-img);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

body {
  color: var(--title-color);
  min-height: 100dvh;
  margin: 0;
  min-width: 320px;
  -webkit-tap-highlight-color: var(--tap-highlight-color);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

* {
  font-family: Geist, Arial, sans-serif;
  box-sizing: border-box;
}

:root {
  --background-color: rgb(18, 18, 28);
  --background-img: radial-gradient(
      circle at top right,
      rgba(0, 12, 51, 0.9),
      transparent 50%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(0, 12, 51, 0.9),
      transparent 50%
    ),
    rgb(8, 9, 12);
  --border-color: rgba(255, 255, 255, 0.07);
  --button-background-color: linear-gradient(
    0.07383128568086761deg,
    rgba(0, 85, 255, 0.08) 0%,
    rgba(153, 153, 170, 0.1) 100%
  );
  --title-color: rgb(255, 255, 255);
  --text-color: rgba(255, 255, 255, 0.6);
  --button-text-color: rgba(255, 255, 255, 0.6);
  --button-hover: linear-gradient(
    0.0738deg,
    rgba(0, 85, 255, 0.15) 0%,
    rgba(153, 153, 170, 0.18) 100%
  );
  --header-background-color: rgba(14, 14, 16, 0.7);
  --blur-button-background-color: rgb(35, 35, 35, 0.2);
  --social-icon-color: rgb(131, 131, 131);
  --header-height: 90px;
  --tap-highlight-color: rgba(255, 255, 255, 0.2);
  --hover-gradient: linear-gradient(
    90deg,
    rgba(0, 12, 51, 0.25) 0%,
    rgba(0, 12, 51, 0.2) 100%
  );
  --radial-hover-gradient: radial-gradient(
    circle,
    rgba(0, 12, 51, 0.3) 0%,
    transparent 100%
  );
  --button-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --button-hover-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15),
    0 12px 24px rgba(0, 0, 0, 0.1);
  --card-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 8px rgba(0, 0, 0, 0.04);
  --card-hover-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
    0 6px 12px rgba(0, 0, 0, 0.08);
  --button-radial-hover-gradient: radial-gradient(
    circle,
    rgba(0, 12, 51, 0.35) 0%,
    transparent 100%
  );

  --header-hover-gradient: radial-gradient(
    circle,
    rgba(20, 30, 80, 0.1) 0%,
    rgba(16, 16, 22, 0.1) 60%
  );

  --footer-hover-gradient: radial-gradient(
    circle,
    rgba(0, 12, 51, 0.35) 0%,
    transparent 100%
  );

  --editor-bg: rgba(30, 30, 30, 0.8);
  --editor-border: rgba(255, 255, 255, 0.1);
  --editor-header-bg: rgba(45, 45, 45, 0.9);
  --editor-header-border: rgba(255, 255, 255, 0.1);
  --window-title-color: #888;
  --editor-text-color: #d4d4d4;
  --keyword-color: #569cd6;
  --string-color: #ce9178;
  --function-color: #dcdcaa;
  --variable-color: #9cdcfe;
  --control-red: #ff5f56;
  --control-yellow: #ffbd2e;
  --control-green: #27c93f;
  --card-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
}

.light-theme {
  --background-color: rgb(216, 216, 230);
  --background-img: radial-gradient(
      circle at top right,
      rgba(0, 93, 223, 0.25),
      transparent 60%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(0, 93, 233, 0.25),
      transparent 60%
    ),
    rgb(212, 214, 230);
  --border-color: rgba(140, 140, 182, 0.75);
  --button-background-color:  linear-gradient(
    0.07deg,
    rgba(180, 200, 255, 0.15) 0%,
    rgba(245, 248, 255, 0.35) 100%
  );
  --title-color: rgb(38, 38, 38);
  --text-color: rgba(0, 0, 0, 0.85);
  --button-text-color: rgba(0, 0, 0, 0.75);
  --button-hover: linear-gradient(
    0.07deg,
    rgba(200, 215, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.5) 100%
  );
  --header-background-color: rgba(211, 210, 210, 0.5);
  --blur-button-background-color: rgb(211, 210, 210, 0.2);
  --social-icon-color: rgb(64, 64, 64);
  --header-height: 90px;
  --tap-highlight-color: rgba(64, 64, 64, 0.15);
  --hover-gradient: linear-gradient(
    90deg,
    rgba(192, 200, 240, 0.2),
    rgba(0, 93, 223, 0.2)
  );
  --radial-hover-gradient: radial-gradient(
    circle,
    rgba(0, 93, 223, 0.1),
    rgba(192, 200, 240, 0.2)
  );
  --button-radial-hover-gradient: radial-gradient(
    circle,
    rgba(51, 105, 253, 0.1),
    rgba(165, 179, 248, 0.4)
  );
  --footer-hover-gradient: radial-gradient(
    circle,
    rgba(0, 93, 223, 0.1),
    rgba(192, 200, 240, 0.2)
  );
  --header-hover-gradient: radial-gradient(
    circle,
    rgba(0, 93, 223, 0.1) 0%,
    rgba(192, 200, 240, 0.2) 100%
  );

  --button-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --button-hover-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15),
    0 12px 24px rgba(0, 0, 0, 0.1);
  --card-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 8px rgba(0, 0, 0, 0.04);
  --card-hover-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
    0 6px 12px rgba(0, 0, 0, 0.08);
  --editor-bg: rgba(255, 255, 255, 0.85); /* Brighter and less gray */
  --editor-border: rgba(0, 0, 0, 0.08); /* Softer border */
  --editor-header-bg: rgba(240, 240, 240, 0.9); /* Slightly lighter */
  --editor-header-border: rgba(0, 0, 0, 0.08); /* Less intense border */
  --window-title-color: #444; /* Darker for better contrast */
  --editor-text-color: #222; /* Slightly darker for readability */
  --keyword-color: #1e40af; /* Deep blue for emphasis */
  --string-color: #b63e0e; /* Warmer, more readable red */
  --function-color: #8b5a2b; /* Richer brown for functions */
  --variable-color: #0056b3; /* More vibrant blue */
  --control-red: #ff5f56;
  --control-yellow: #ffbd2e;
  --control-green: #27c93f;
}

.hidden {
  opacity: 0;
  filter: blur(5px);
  transform: scale(0.95);
  transition: opacity 0.5s, filter 0.5s,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.show {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
  transition: opacity 0.5s, filter 0.5s,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: no-preference) {
  .hidden {
    transition: opacity 0.5s, filter 0.5s,
      transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

@media (max-width: 768px) {
  body {
    padding: 112px 0px 0px 0px;
  }

  .hero-section,
  .about-me,
  .projects,
  .skills,
  .services,
  footer {
    margin: 0% 2%;
  }

  h1 {
    font-size: 4rem;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  body {
    padding: 90px 0px 0px 0px;
  }

  .hero-section,
  .about-me,
  .projects,
  .skills,
  .services,
  footer {
    margin: 0px 6%;
  }

  h1 {
    font-size: 5rem;
  }
}

@media (min-width: 1025px) {
  body {
    padding: 90px 0px 0px 0px;
  }

  .hero-section,
  .about-me,
  .projects,
  .skills,
  .services,
  footer {
    margin: 0% 10%;
  }

  h1 {
    font-size: 6.5rem;
  }
}

@media (min-width: 1520px) {
  body {
    padding: 90px 0px 0px 0px;
  }

  .hero-section,
  .about-me,
  .projects,
  .skills,
  .services,
  footer {
    margin: 0% 10%;
  }

  h1 {
    font-size: 9rem;
  }
}

@media (min-width: 1920px) {
  body {
    padding: 90px 0px 0px 0px;
  }

  .hero-section,
  .about-me,
  .projects,
  .skills,
  .services,
  footer {
    margin: 0% 10%;
  }

  h1 {
    font-size: 9.5rem;
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}

h1 {
  line-height: 1.3;
  text-transform: uppercase;
}

h1 {
  letter-spacing: -0.03em;
}

h2 {
  letter-spacing: -0.0375em;
}

h3 {
  letter-spacing: -0.03em;
}

p {
  line-height: 1.5;
  max-width: 70ch;
}

.icon {
  user-select: none;
}

a {
  text-decoration: none;
}
/* Card Styles with Box-Shadow */
.skill-card,
.project-card,
.editor,
.service-card,
footer,
header {
  box-shadow: var(--card-box-shadow);
  transition: box-shadow 0.3s ease-in-out;
}

/* Button boxshadows */
.visit-button,
.cta-button,
.hero-button,
.message-button,
.email {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  box-shadow: var(--button-box-shadow);
}

.visit-button:hover,
.cta-button:hover,
.hero-button:hover,
.message-button:hover,
.email:hover {
  box-shadow: var(--button-hover-box-shadow);
}