:root {
  --bg: #f6f0cf;
  --surface: #fffdf3;
  --primary: #f2b421;
  --primary-dark: #dc9f11;
  --soft-yellow: #f8e7a8;
  --soft-yellow-2: #f5e3a0;
  --text: #2a2525;
  --white: #ffffff;
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  --border-radius: 24px;
  --max-width: 1280px;
}

body:has(#themeCheckbox:checked) {
  --bg: #17140a;
  --surface: #221d0e;
  --primary: #ffe36b;
  --primary-dark: #f5d74f;
  --soft-yellow: #4d4218;
  --soft-yellow-2: #3c3313;
  --text: #fff9e7;
  --white: #ffffff;
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.filter-btn {
  background: var(--soft-yellow-2);
  color: var(--primary-dark);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  border: none;
}

.back-home {
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.back-home:hover {
  transform: translateY(-2px);
  background: var(--primary);
  color: var(--white);
}

.primary-btn {
  background: var(--soft-yellow);
  color: var(--primary-dark);
  padding: 16px 34px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  transition: 0.25s;
  border: none;
}

.project-card::after {
  background: linear-gradient(
    to top,
    rgba(242, 180, 33, 0.42) 0%,
    rgba(237, 199, 90, 0.18) 28%,
    rgba(255, 231, 145, 0) 58%
  );
}

.project-hover-content {
  background: linear-gradient(
    to top,
    rgba(214, 170, 58, 0.65) 0%,
    rgba(80, 70, 40, 0.45) 45%,
    rgba(35, 35, 20, 0.38) 100%
  );
}

.qa-box {
  background: #fffdf6;
}

.qa-box-title {
  color: #e2a515;
}

.qa-content-main-title {
  color: var(--primary);
}

body:has(#themeCheckbox:checked) .qa-box {
  background: var(--surface);
}

body:has(#themeCheckbox:checked) .qa-box-title {
  color: var(--primary);
}

@media (max-width: 760px) {
  .header {
    padding-top: 200px !important;
  }

  .nav {
    max-width: 250px !important;
    gap: 10px !important;
  }

  .nav-link {
    height: 42px !important;
    font-size: 16px !important;
    padding: 0 16px !important;
  }
}
@media (max-width: 760px) {
  .nav {
    max-width: 250px !important;
    gap: 10px !important;
  }

  .nav-link {
    height: 42px !important;
    font-size: 16px !important;
    padding: 0 16px !important;
  }
}