/* Flat surface direction: keep depth through borders and spacing, not color gradients. */

/* Hero */
#hero,
#main > section#hero {
  background: #0d0e10 !important;
}

#hero::before,
#hero::after {
  content: none !important;
  display: none !important;
  background: none !important;
  animation: none !important;
}

#hero .hero-work-btn {
  background: #ebb020 !important;
}

#hero .hero-work-btn:hover,
#hero .hero-work-btn:focus-visible {
  background: #f3bd37 !important;
}

html[data-theme="light"] #hero,
html[data-theme="light"] #main > section#hero {
  background: #f5f4ef !important;
}

html[data-theme="light"] #hero .hero-work-btn {
  background: #d99a00 !important;
}

/* About */
#about .about-v2-image-overlay {
  background: rgba(12, 13, 15, .2) !important;
}

#about .about-v2-tools {
  background: var(--about-card-soft) !important;
}

#about .about-tool-card::before {
  content: none !important;
  background: none !important;
}

#about .about-v2-why {
  background: var(--about-card-soft) !important;
}

#about .about-v2-final {
  background: var(--about-card) !important;
}

html[data-theme="light"] #about .about-v2-image-overlay {
  background: rgba(25, 28, 33, .18) !important;
}

/* Resume */
#resume .resume-service-lab,
#resume .resume-live-dashboard,
#resume .education-premium-card,
#resume .resume-recommendation {
  background: var(--resume-card-soft) !important;
}

#resume .resume-browser-page,
#resume .data-demo-chart,
#resume .design-after {
  background: #17181b !important;
}

#resume .data-chart-grid,
#resume .honor-shine {
  background: none !important;
  background-image: none !important;
}

#resume .data-chart-bars span,
#resume .resume-dashboard-bar u {
  background: var(--resume-gold) !important;
}

#resume .resume-data-dashboard {
  background: #191b20 !important;
}

#resume .resume-data-dashboard .data-demo-metrics article::after {
  background: rgba(110, 214, 255, .1) !important;
}

#resume .resume-data-dashboard .data-chart-bars,
#resume .data-scatter-plot {
  background: rgba(0, 0, 0, .08) !important;
  background-image: none !important;
}

#resume .resume-data-dashboard .data-chart-bars span {
  background: var(--data-blue) !important;
}

#resume .resume-data-dashboard .data-chart-bars span:nth-child(2n) {
  background: var(--data-cyan) !important;
}

#resume .data-percentage-ring {
  background: var(--ring-color) !important;
}

#resume .career-timeline::before,
#resume .career-details::before,
#resume .career-detail > .career-point::before {
  background: rgba(235, 176, 32, .42) !important;
}

html[data-theme="light"] #resume .resume-browser-page,
html[data-theme="light"] #resume .data-demo-chart,
html[data-theme="light"] #resume .resume-data-dashboard,
html[data-theme="light"] #resume .resume-data-dashboard .data-chart-bars,
html[data-theme="light"] #resume .data-scatter-plot {
  background: #f4f6f9 !important;
  background-image: none !important;
}

/* Side menu: a flat active marker is clearer than a blended highlight. */
.left-side .menu a:hover,
.left-side .menu a:focus-visible {
  background: rgba(235, 176, 32, .07) !important;
}

.left-side .menu a.active,
body.layout-collapsed .left-side .menu a.active,
body.layout-expanded .left-side .menu a.active,
body.blog-single-page .left-side .menu a.active {
  border-color: rgba(235, 176, 32, .28) !important;
  background: rgba(235, 176, 32, .13) !important;
}

html[data-theme="light"] .left-side .menu a:hover,
html[data-theme="light"] .left-side .menu a:focus-visible {
  background: rgba(187, 133, 0, .055) !important;
}

html[data-theme="light"] .left-side .menu a.active {
  border-color: rgba(155, 105, 0, .34) !important;
  background: rgba(187, 133, 0, .1) !important;
}