/* ---------- ---------- ---------- ---------- */
:root {
    color-scheme: dark light;
    /* --h1-background: var(--light-background);
    --h2-background: var(--light-background); */

    --article-background: var(--light-background);
    --tesimonials-background: var(--light-background);

    --activity-background: var(--light-background);
    --activity_description-background: var(--light-background--darker);
    --activity_process-background: var(--light-background);
    --activity_details-background: var(--light-background--darker);

    --legals-background: var(--green-background);
    --contacts-background: var(--light-background);

    --nav-color: var(--light-background_main-color);
    --nav-background: var(--light-background);

    --body-background: var(--light-background--lighter);
    --body-color: var(--light-background_main-color);

    --h1-background: var(--light-background--lighter);
    --h2-background: var(--light-background--lighter);

    --shadow-shadow-color: transparent;
    --shadow-border-color: var(--dark-background);
}
/* ---------- ---------- ---------- ---------- */
/* ---------- ---------- ---------- ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --h1-background: var(--dark-background--darker);
    --h2-background: var(--dark-background--darker);

    --article-background: var(--dark-background);
    --tesimonials-background: var(--dark-background);

    --activity-background: var(--dark-background);
    --activity_description-background: var(--dark-background--darker);
    --activity_process-background: var(--dark-background);
    --activity_details-background: var(--dark-background--darker);

    --legals-background: var(--green-background--darker);
    --contacts-background: var(--dark-background);

    --nav-color: var(--dark-background_main-color);
    --nav-background: var(--dark-background--darker);

    --body-background: var(--dark-background--darker);
    --body-color: var(--dark-background_main-color);

    --shadow-shadow-color: transparent;
    --shadow-border-color: var(--dark-color);
  }

  #nav-top-logo {
    background-image: url('logos/perspective_white.png') !important;
  }

  #nav-top, body[darkmode] #nav-left {
    color: var(--dark-background_main-color);
    background-color: var(--dark-background--darker);
  }

  #nav-top .here {
    color: var(--dark-background_main-color);
    text-shadow: none;
  }

  #contacts { border-top: none; }

  footer { background-color: var(--green-background--darker) !important }
}

/* ---------- ---------- ---------- ---------- */
/* body[darkmode] .shadow { box-shadow: 1px 1px 5px 1px ghostwhite; } */
body[darkmode] h1 { background-color: var(--dark-background); }
body[darkmode] #offers { background-color: var(--dark-background); }
body[darkmode] .activity_description { background-color: var(--dark-background--darker); }
body[darkmode] .activity_process, body[darkmode] .activity { background-color: var(--dark-background); }
/* ---------- */
body[darkmode] {
  background-color: var(--dark-background--darker);
  color: var(--dark-background_main-color);
}
/* ---------- ---------- ---------- ---------- */
body[darkmode] #dark-mode-toggler path {
  stroke-width: 0;
  fill: var(--dark-background_main-color);
}
body[darkmode] #dark-mode-toggler circle {
  stroke: var(--dark-background_main-color);
}
body[darkmode] #dark-mode-toggler svg { transform: rotateY(180deg); }
body[automode] #dark-mode-toggler svg { transform: rotateZ(90deg); }
/* ---------- ---------- ---------- ---------- */
body[darkmode] #nav-top, body[darkmode] #nav-left {
  color: var(--dark-background_main-color);
  background-color: var(--dark-background--darker);
}
/* ---------- */
body[darkmode] #nav-top .here {
  color: var(--dark-background_main-color);
  text-shadow: none;
}
/* ---------- */
body[darkmode] #nav-top-logo {
  background-image:  url('logos/perspective_white.png');
}
/* ---------- ---------- ---------- ---------- */