/* Background classes */
.bg-dark {
  background-color: var(--dark);
}

.bg-white {
  background-color: var(--white);
}

.bg-black {
  background-color: var(--black);
}

.bg-orange {
  background-color: var(--orange) !important;
}

.bg-light-gray {
  background-color: var(--light-gray);
}

.bg-medium-gray {
  background-color: var(--medium-gray);
}

.bg-dark-gray {
  background-color: var(--dark-gray);
}

.bg-dark-gradient-60-40 {
  background: linear-gradient(to bottom, var(--dark) 70%, var(--white) 30%);
}

.bg-dark-gradient-60-40,
.bg-dark-gradient-60-40 *:not(input):not(textarea):not(select) {
  color: var(--white);
}

body.home .site-main .bg-dark-gradient-60-40,
body.home .site-main .bg-dark-gradient-60-40 *:not(input):not(textarea):not(select) {
  color: var(--white);
}

.black-sidebar,
.black-sidebar::after {
  background-color: #2f2f2d;
}

.bg-dark .title::before {
  background-color: rgba(255, 255, 255, 0.1);
}

body {
  color: var(--dark);
}

.bg-transparent-white {
  background-color: transparent;
}

.bg-transparent-white :where(h1, h2, h3, h4, h5, h6, p, a, span, li, i, blockquote, figcaption, small, strong, em, label, dt, dd, td, th, .menu-notice, .mobile-showchildren) {
  color: var(--white);
}

body :where(h1, h2, h3, h4, h5, h6, p, a, span, li, i, blockquote, figcaption, small, strong, em, label, dt, dd, td, th, .menu-notice, .mobile-showchildren) {
  color: var(--dark);
}

body.home .site-main :where(h1, h2, h3, h4, h5, h6, p, a, span, li, i, blockquote, figcaption, small, strong, em, label, dt, dd, td, th, .menu-notice, .mobile-showchildren) {
  color: var(--dark);
}

body.home .site-main .bg-transparent-white :where(h1, h2, h3, h4, h5, h6, p, a, span, li, i, blockquote, figcaption, small, strong, em, label, dt, dd, td, th, .menu-notice, .mobile-showchildren) {
  color: var(--white);
}

body .bg-orange,
body .bg-orange *:not(input):not(textarea):not(select) {
  color: var(--white);
}

body.home .site-main .bg-orange,
body.home .site-main .bg-orange *:not(input):not(textarea):not(select) {
  color: var(--white);
}



body :is(.bg-dark, .bg-black, .black-sidebar) :where(h1, h2, h3, h4, h5, h6, p, a, span, li, i, blockquote, figcaption, small, strong, em, label, dt, dd, td, th, .menu-notice, .mobile-showchildren) {
  color: var(--white);
}

body.home .site-main :is(.bg-dark, .bg-black, .black-sidebar) :where(h1, h2, h3, h4, h5, h6, p, a, span, li, i, blockquote, figcaption, small, strong, em, label, dt, dd, td, th, .menu-notice, .mobile-showchildren) {
  color: var(--white);
}

body :is(.bg-dark, .bg-black, .black-sidebar, .bg-transparent-white):is(h1, h2, h3, h4, h5, h6, p, a, span, li, i, blockquote, figcaption, small, strong, em, label, dt, dd, td, th),
body.home .site-main :is(.bg-dark, .bg-black, .black-sidebar, .bg-transparent-white):is(h1, h2, h3, h4, h5, h6, p, a, span, li, i, blockquote, figcaption, small, strong, em, label, dt, dd, td, th) {
  color: var(--white);
}

body .site-navigation .mobile-wrap :where(h1, h2, h3, h4, h5, h6, p, a, span, li, i, blockquote, figcaption, small, strong, em, label, dt, dd, td, th, .menu-notice, .mobile-showchildren) {
  color: var(--white);
}

body :is(.bg-dark, .bg-black, .black-sidebar) a:active,
body :is(.bg-dark, .bg-black, .black-sidebar) a:hover,
body :is(.bg-dark, .bg-black, .black-sidebar) a:focus,
body.home .site-main :is(.bg-dark, .bg-black, .black-sidebar) a:active,
body.home .site-main :is(.bg-dark, .bg-black, .black-sidebar) a:hover,
body.home .site-main :is(.bg-dark, .bg-black, .black-sidebar) a:focus {
  color: var(--orange);
}
body .site-navigation .mobile-wrap a:active,
body .site-navigation .mobile-wrap a:hover,
body .site-navigation .mobile-wrap a:focus,
body .site-navigation .mobile-wrap .mobile-showchildren:active,
body .site-navigation .mobile-wrap .mobile-showchildren:hover,
body .site-navigation .mobile-wrap .mobile-showchildren:focus {
  color: var(--orange);
}

.bg-dark .burger {
  color: var(--white);
}

.bg-dark .site-navigation .mobile-showchildren:hover,
.bg-dark .site-navigation .mobile-showchildren:focus,
.bg-dark .site-navigation .mobile-showchildren:active {
  color: var(--orange);
}
/* Social icons: circle contrasts with the section background */
body .socials a {
  background-color: var(--dark);
}

body .socials a i {
  color: var(--white);
}

body :is(.bg-dark, .bg-black, .black-sidebar) .socials a {
  background-color: var(--white);
}

body :is(.bg-dark, .bg-black, .black-sidebar) .socials a i,
body.home .site-main :is(.bg-dark, .bg-black, .black-sidebar) .socials a i {
  color: var(--black);
}