/*CSS for Dark Mode Toggle

Copy and paste this code into it's own dark.css file. Keep all you dark mode
styles there, and make sure when you link to this sheet in your html head,
make it the bottom css link tag so it overrides all other styles.
At the bottom, that's where you start to add your dark mode styles by
starting starting with "body.dark-mode" and add your class you want to
target at the end. For example,

body.dark-mode .heading-one {}

then add your css properties like normal. That's it!
Scroll to the bottom to start adding your dark mode styles

/* Add this as it's own dark.css file and linked on all pages */
#checkbox-theme {
  display: none;
}

/* light mode icon */
#checkbox-theme + label:before {
  content: "\f186";
  font-size: 20px;
  cursor: pointer;
  position: relative;
  top: 0px;
  right: 0px;
  color: white;
}

/* dark mode icon */
#checkbox-theme:checked + label:before {
  content: "\f185";
  font-size: 20px;
  cursor: pointer;
  position: relative;
  top: 0px;
  right: 0px;
  color: #FFCC33;
}

#checkbox-theme2 {
  display: none;
}

/* light mode icon */
#checkbox-theme2 + label:before {
  content: "\f186";
  font-size: 20px;
  cursor: pointer;
  position: relative;
  top: 0px;
  right: 0px;
  color: white;
}

/* dark mode icon */
#checkbox-theme2:checked + label:before {
  content: "\f185";
  font-size: 20px;
  cursor: pointer;
  position: relative;
  top: 0px;
  right: 0px;
  color: #FFCC33;
}

#checkbox-theme3 {
  display: none;
}

/* light mode icon */
#checkbox-theme3 + label:before {
  content: "\f186";
  font-size: 20px;
  cursor: pointer;
  position: relative;
  top: 0px;
  right: 0px;
  color: white;
}

/* dark mode icon */
#checkbox-theme3:checked + label:before {
  content: "\f185";
  font-size: 20px;
  cursor: pointer;
  position: relative;
  top: 0px;
  right: 0px;
  color: #FFCC33;
}
/*-- -------------------------- -->
<---      Core Dark Styles      -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
  :root {
		--background-000: #000;
		--background-007bb5: #007bb5;
		--background-007fff: #007fff;
		--background-0085a6: #0085a6;
		--background-00adcf: #00adcf;
		--background-2099c6: #2099c6;
		--background-212121: #212121;
		--background-2c2b35: #2c2b35;
		--background-2e5894: #2e5894;
		--background-302e39: #302e39;
		--background-333: #333;
		--background-339dff: #339dff;
		--background-373542: #373542;
		--background-3b5998: #3b5998;
		--background-52c27d: #52c27d;
		--background-55acee: #55acee;
		--background-757575: #757575;
		--background-869791: #869791;
		--background-BDBDBD: #BDBDBD;
		--background-aaaaaa: #aaaaaa;
		--background-aeaeae: #aeaeae;
		--background-b033ff: #b033ff;
		--background-cb2027: #cb2027;
		--background-dd4b39: #dd4b39;
		--background-ddd: #ddd;
		--background-e04b33: #e04b33;
		--background-e9e9e9: #e9e9e9;
		--background-ea4c89: #ea4c89;
		--background-ebebeb: #ebebeb;
		--background-ededed: #ededed;
		--background-f15b5a: #f15b5a;
		--background-f5f5f5: #f5f5f5;
		--background-f6f6f6: #f6f6f6;
		--background-f7f7f7: #f7f7f7;
		--background-f89406: #f89406;
		--background-fafafa: #fafafa;
		--background-fddfdf: #fddfdf;
		--background-ff0: #ff0;
		--background-ff336d: #ff336d;
		--background-ff6600: #ff6600;
		--background-ff7633: #ff7633;
		--background-ffcc33: #ffcc33;
		--background-fff: #fff;
		--background-fff-2: #fff;
		--background-fffa90: #fffa90;
		--background-ffffff: #ffffff;
		--background-white: white;
		--color-000: #000;
		--color-0085a6: #0085a6;
		--color-23527c: #23527c;
		--color-245269: #245269;
		--color-272727: #272727;
		--color-286090: #286090;
		--color-2ac6f7: #2ac6f7;
		--color-2b2b2b: #2b2b2b;
		--color-2b542c: #2b542c;
		--color-31708f: #31708f;
		--color-333333: #333333;
		--color-333: #333;
		--color-337ab7: #337ab7;
		--color-339dff: #339dff;
		--color-35AEF2: #35AEF2;
		--color-373542: #373542;
		--color-3b5999: #3b5999;
		--color-3c763d: #3c763d;
		--color-414141: #414141;
		--color-454545: #454545;
		--color-474747: #474747;
		--color-484848: #484848;
		--color-55545d: #55545d;
		--color-555: #555;
		--color-5f3f3f: #5f3f3f;
		--color-6441A5: #6441A5;
		--color-66512c: #66512c;
		--color-666: #666;
		--color-66afe9: #66afe9;
		--color-7289DA: #7289DA;
		--color-737373: #737373;
		--color-757575: #757575;
		--color-777620: #777620;
		--color-777: #777;
		--color-808080: #808080;
		--color-843534: #843534;
		--color-8a6d3b: #8a6d3b;
		--color-8c8c8c: #8c8c8c;
		--color-90A4AE: #90A4AE;
		--color-999: #999;
		--color-9b9aa0: #9b9aa0;
		--color-CECB26: #CECB26;
		--color-D32F2F: #D32F2F;
		--color-D50000: #D50000;
		--color-D90600: #D90600;
		--color-DB6625: #DB6625;
		--color-DC4E41: #DC4E41;
		--color-E0E0E0: #E0E0E0;
		--color-F44336: #F44336;
		--color-FFCC33: #FFCC33;
		--color-a94442: #a94442;
		--color-adadad: #adadad;
		--color-aeaeae: #aeaeae;
		--color-afd9ee: #afd9ee;
		--color-b033ff: #b033ff;
		--color-bdbdbd: #bdbdbd;
		--color-c0c0c0: #c0c0c0;
		--color-c1e2b3: #c1e2b3;
		--color-c4c4c4: #c4c4c4;
		--color-c4e3f3: #c4e3f3;
		--color-c7254e: #c7254e;
		--color-ccc: #ccc;
		--color-d0d0d0: #d0d0d0;
		--color-d0e9c6: #d0e9c6;
		--color-d4d4d4: #d4d4d4;
		--color-d9d9d9: #d9d9d9;
		--color-d9edf7: #d9edf7;
		--color-ddd: #ddd;
		--color-dff0d8: #dff0d8;
		--color-e1306c: #e1306c;
		--color-e4b9b9: #e4b9b9;
		--color-e6e6e6: #e6e6e6;
		--color-e8e8e8: #e8e8e8;
		--color-ebcccc: #ebcccc;
		--color-eee: #eee;
		--color-f0efef: #f0efef;
		--color-f0f0f0: #f0f0f0;
		--color-f27935: #f27935;
		--color-f2dede: #f2dede;
		--color-f5f5f5: #f5f5f5;
		--color-f7ecb5: #f7ecb5;
		--color-f8f8f8: #f8f8f8;
		--color-f9f2f4: #f9f2f4;
		--color-f9f9f9: #f9f9f9;
		--color-faf2cc: #faf2cc;
		--color-fcf8e3: #fcf8e3;
		--color-ff0:  #ff0;
		--color-ff336d: #ff336d;
		--color-ff7633: #ff7633;
		--color-ffcc33: #ffcc33;
		--color-fff: #fff;
		--color-fff-2: #fff;
		--color-ffffff: #ffffff;
		--color-transparent: transparent;
/*     --dark: #373542;
    --medium: #282828;
    --accent: #404040;
    --bodyTextColorWhite: #fafbfc;	 */
  }

[data-theme="dark"] {
		--background-000: #fff;
		--background-007bb5: #007bb5;
		--background-007fff: #007fff;
		--background-0085a6: #0085a6;
		--background-00adcf: #00adcf;
		--background-2099c6: #2099c6;
		--background-212121: #212121;
		--background-2c2b35: #2c2b35;
		--background-2e5894: #2e5894;
		--background-302e39: #302e39;
		--background-333: #333;
		--background-339dff: #339dff;
		--background-373542: #ffffff;
		--background-3b5998: #3b5998;
		--background-52c27d: #52c27d;
		--background-55acee: #55acee;
		--background-757575: #fff;
		--background-869791: #869791;
		--background-BDBDBD: #BDBDBD;
		--background-aaaaaa: #aaaaaa;
		--background-aeaeae: #aeaeae;
		--background-b033ff: #b033ff;
		--background-cb2027: #cb2027;
		--background-dd4b39: #dd4b39;
		--background-ddd: #ddd;
		--background-e04b33: #e04b33;
		--background-e9e9e9: #e9e9e9;
		--background-ea4c89: #ea4c89;
		--background-ebebeb: #ebebeb;
		--background-ededed: #ededed;
		--background-f15b5a: #f15b5a;
		--background-f5f5f5: #403e4d;
		--background-f6f6f6: #f6f6f6;
		--background-f7f7f7: #f7f7f7;
		--background-f89406: #f89406;
		--background-fafafa: #fafafa;
		--background-fddfdf: #fddfdf;
		--background-ff0: #ff0;
		--background-ff336d: #ff336d;
		--background-ff6600: #ff6600;
		--background-ff7633: #ff7633;
		--background-ffcc33: #ffcc33;
		--background-fff: #373542;
		--background-fff-2: #757575;
		--background-fffa90: #fffa90;
		--background-ffffff: #000000;
		--background-white: #373542;
		--color-000: #fff;
		--color-0085a6: #0085a6;
		--color-23527c: #23527c;
		--color-245269: #245269;
		--color-272727: #272727;
		--color-286090: #286090;
		--color-2ac6f7: #2ac6f7;
		--color-2b2b2b: #2b2b2b;
		--color-2b542c: #2b542c;
		--color-31708f: #31708f;
		--color-333333: #333333;
		--color-333: #333;
		--color-337ab7: #337ab7;
		--color-339dff: #339dff;
		--color-35AEF2: #35AEF2;
		--color-373542: #ffffff;
		--color-3b5999: #3b5999;
		--color-3c763d: #3c763d;
		--color-414141: #fff;
		--color-454545: #454545;
		--color-474747: #474747;
		--color-484848: #484848;
		--color-55545d: #55545d;
		--color-555: #555;
		--color-5f3f3f: #5f3f3f;
		--color-6441A5: #6441A5;
		--color-66512c: #66512c;
		--color-666: #666;
		--color-66afe9: #66afe9;
		--color-7289DA: #7289DA;
		--color-737373: #737373;
		--color-757575: #757575;
		--color-777620: #777620;
		--color-777: #777;
		--color-808080: #808080;
		--color-843534: #843534;
		--color-8a6d3b: #8a6d3b;
		--color-8c8c8c: #8c8c8c;
		--color-90A4AE: #90A4AE;
		--color-999: #999;
		--color-9b9aa0: #9b9aa0;
		--color-CECB26: #CECB26;
		--color-D32F2F: #D32F2F;
		--color-D50000: #D50000;
		--color-D90600: #D90600;
		--color-DB6625: #DB6625;
		--color-DC4E41: #DC4E41;
		--color-E0E0E0: #E0E0E0;
		--color-F44336: #F44336;
		--color-FFCC33: #FFCC33;
		--color-a94442: #a94442;
		--color-adadad: #adadad;
		--color-aeaeae: #aeaeae;
		--color-afd9ee: #afd9ee;
		--color-b033ff: #b033ff;
		--color-bdbdbd: #bdbdbd;
		--color-c0c0c0: #c0c0c0;
		--color-c1e2b3: #c1e2b3;
		--color-c4c4c4: #c4c4c4;
		--color-c4e3f3: #c4e3f3;
		--color-c7254e: #c7254e;
		--color-ccc: #ccc;
		--color-d0d0d0: #d0d0d0;
		--color-d0e9c6: #d0e9c6;
		--color-d4d4d4: #d4d4d4;
		--color-d9d9d9: #d9d9d9;
		--color-d9edf7: #d9edf7;
		--color-ddd: #ddd;
		--color-dff0d8: #dff0d8;
		--color-e1306c: #e1306c;
		--color-e4b9b9: #e4b9b9;
		--color-e6e6e6: #e6e6e6;
		--color-e8e8e8: #e8e8e8;
		--color-ebcccc: #ebcccc;
		--color-eee: #eee;
		--color-f0efef: #f0efef;
		--color-f0f0f0: #f0f0f0;
		--color-f27935: #f27935;
		--color-f2dede: #f2dede;
		--color-f5f5f5: #f5f5f5;
		--color-f7ecb5: #f7ecb5;
		--color-f8f8f8: #f8f8f8;
		--color-f9f2f4: #f9f2f4;
		--color-f9f9f9: #f9f9f9;
		--color-faf2cc: #faf2cc;
		--color-fcf8e3: #fcf8e3;
		--color-ff0:  #ff0;
		--color-ff336d: #ff336d;
		--color-ff7633: #ff7633;
		--color-ffcc33: #ffcc33;
		--color-fff: #000;
		--color-fff-2: #fff;
		--color-ffffff: #ffffff;
		--color-transparent: transparent;
}
  
/*    
body.dark-mode {
    background-color: var(--dark);
  }
  body.dark-mode p,
  body.dark-mode li,
  body.dark-mode h2,
  body.dark-mode h3,
  body.dark-mode h4,
  body.dark-mode h5,
  body.dark-mode h6,
  body.dark-mode h1 a, 
  body.dark-mode h2 a, 
  body.dark-mode h3 a, 
  body.dark-mode h4 a, 
  body.dark-mode h5 a, 
  body.dark-mode h6 a
  body.dark-mode .cs-title,
  body.dark-mode .cs-text,
  body.dark-mode .cs-li {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode .light {
    display: none;
  }
  body.dark-mode .dark {
    display: block !important;
  }
  .dark {
    /* class used to hide elements that only need to be seen when dark mode is enabled */
   /*  display: none;
  }
}
/*-- -------------------------- -->
<---      Dark Mode Toggle      -->
<--- -------------------------- -*/
/* Mobile *//* 
@media only screen and (min-width: 0rem) {
  body.dark-mode #dark-mode-toggle .cs-sun {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  body.dark-mode #dark-mode-toggle .cs-moon {
    transform: translate(-50%, -150%);
    opacity: 0;
  }
  #dark-mode-toggle {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 3.75rem;
    width: 3rem;
    height: 3rem;
    background: transparent;
    border: none;
    overflow: hidden;
    padding: 0;
  }
  #dark-mode-toggle img,
  #dark-mode-toggle svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.5625rem;
    height: 1.5625rem;
    pointer-events: none;
  }
  #dark-mode-toggle .cs-moon {
    z-index: 2;
    transition: transform 0.3s,
                opacity 0.3s,
                fill 0.3s;
    fill: #000;
  }
  #dark-mode-toggle .cs-sun {
    z-index: 1;
    transform: translate(-50%, 100%);
    opacity: 0;
    transition: transform 0.3s,
                opacity 0.3s;
  }
}
/* Desktop *//* 
@media only screen and (min-width: 64rem) {
  #dark-mode-toggle {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    margin-left: 1.875rem;
    margin-bottom: 0rem;
  }
  #dark-mode-toggle .cs-moon {
    /* change to whatever you need it to be */
    /* fill: #fff; */
  }
}*/