/*********************** Root *********************************************************************************************************/
@media screen and (prefers-color-scheme: light) {
  :root {
    --base-background: white;
    --base-text: black;
    --base-border: #adadad;
    --base-link: #0000EE;
    --base-link-visited: #551A8B;
    --low-emphasis-color: #bdbdbd;
    --infobox-hover-color: rgba(239, 239, 240, .3);

    --c3-grid-line: #949494;

    --top-lines-color: black;
    --toggle-color: grey;

    --soft-background: #f2f2f2;
    --soft-background-hover: #dedede;
  }

}
@media screen and (prefers-color-scheme: dark) {
  :root {
    --base-background: #242424;
    --base-text: #dbdbdb;
    --base-border: #dbdbdb;
    --base-link: #86acf0;
    --base-link-visited: #bd86f1;
    --low-emphasis-color: #dbdbdb;
    --infobox-hover-color: rgba(239, 239, 240, 0.05);

    --c3-grid-line: #dbdbdb;

    --top-lines-color: #dbdbdb;
    --toggle-color: #dbdbdb;

    --soft-background: #383838;
    --soft-background-hover: #4d4d4d;
  }
}

/*********************** Universal Colors *********************************************************************************************************/
.twitter-blue {fill: #1D9BF0;}
.facebook-blue {fill: #1778F2;}
.reddit-orange {fill: #FF5700;}
.substack-orange {fill: #ff6700;}

/*********************** Color Modes *********************************************************************************************************/
.light-mode {
  --base-background: white;
  --base-text: black;
  --base-border: #adadad;
  --base-link: #0000EE;
  --base-link-visited: #551A8B;
  --low-emphasis-color: #bdbdbd;
  --infobox-hover-color: rgba(239, 239, 240, .3);

  --c3-grid-line: #949494;

  --top-lines-color: black;
  --toggle-color: #545454;

  --soft-background: #f2f2f2;
  --soft-background-hover: #dedede;
}
.light-toggle-position {
  --toggle-position: 0px;
  --mobile-toggle-position: 0;
}

.dark-mode {
  --base-background: #242424;
  --base-text: #dbdbdb;
  --base-border: #dbdbdb;
  --base-link: #86acf0;
  --base-link-visited: #bd86f1;
  --low-emphasis-color: #dbdbdb;
  --infobox-hover-color: rgba(239, 239, 240, 0.05);

  --c3-grid-line: #dbdbdb;

  --top-lines-color: #dbdbdb;
  --toggle-color: #dbdbdb;

  --soft-background: #383838;
  --soft-background-hover: #4d4d4d;
}
.dark-toggle-position {
  --toggle-position: 100px;
  --mobile-toggle-position: 66.7%;
}

.sepia {
  --base-background: #ffeed4;
  --base-text: black;
  --base-border: #b5a177;
  --base-link: #0000EE;
  --base-link-visited: #551A8B;
  --low-emphasis-color: #b5a177;
  --infobox-hover-color: rgba(227, 210, 184, .15);

  --c3-grid-line: #949494;

  --top-lines-color: #b5a177;
  --toggle-color: #594e35;
}
.auto-toggle-position {
  --toggle-position: 49px;
  --mobile-toggle-position: 33.3%;
}

/*************** Color Settings ****************************************************************************/
/********** Toggler ***********************/
.page_color_toggler {
  left: var(--toggle-position);
  background-color: var(--toggle-color);
}
.page_color_button_group {
  border-color: var(--base-text) !important;
}
.page_color_button_group button {
  color: var(--base-text) !important;
}
/********** Page Fundamentals *************/
body, button {
  background-color: var(--base-background);
  color: var(--base-text);
}
a {
  color: var(--base-text);
}
button {
  border-color: var(--base-border);
}
/********** Page Top *****************/
.horizontal_line {
  border: solid;
  border-color: var(--top-lines-color);
}
.horizontal_line_top {
  border: solid;
  border-color: var(--base-border);
}
svg.top_logo_svg {
  stroke: var(--base-text);
  fill: var(--base-text);
}
/********** Infoboxes *****************/
.infobox_left, .infobox_center, .infobox_right, .top_box {
  border: solid;
  border-color: var(--base-border);
}
.infobox_left:hover, .infobox_center:hover, .infobox_right:hover {
  background-color: var(--infobox-hover-color);
}
/********** C3.JS Charts *************/
.c3 text {
  fill: var(--base-text);
}
.c3-axis-x line,  .c3-axis-y line, .c3-axis-y2 line, .c3-axis-x path,  .c3-axis-y path, .c3-axis-y2 path {
  stroke: var(--base-text) !important; /* sometimes does not transition without !important tag */
}
.c3-grid line {
  stroke: var(--c3-grid-line) !important;
}
/********** Page Bottom *************/
section.page_bottom {
  border-top: solid;
  border-color: var(--base-text);
  color: var(--base-text);
}
/********** Social Icons ************/
.social-base-color {
  fill: var(--base-text);
}
.social-page-bottom-base-color {
  fill: var(--base-text);
}
/* social media circle icons */
path.st1, circle.cc-circle {
  fill: var(--base-background);
}