:root {
  /* Repeated styles */
  --accnt-clr-1: #e66c20;
  --accnt-clr-1-10: #e66c201a;
  --accnt-clr-1-25: #e66c2040;
  --accnt-clr-1-50: #e66c2080;
  --accnt-clr-1-75: #e66c20bf;
  --accnt-clr-2: #e66c20;
  --accnt-clr-3: #d35709;
  --accnt-txt-clr: #ffffff;
  --site-bg-color: #edf1f4;
  --elmnt-bg-color-1: #ffffff;
  --elmnt-bg-color-2: #f8fbfd;
  --elmnt-bg-color-3: #edf1f4;
  --brdr-clr-1: #dadada;
  --site-txt-color-1: #555;
  --site-txt-color-2: #666;
  --site-txt-color-3: #888;
  --inpt-bg-clr: #fff;

    /* Blog styles */
    --blog-bg-clr: #fff;
    --blog-content-block-tag-clr: #f7f7f7;
    --blog-content-block-brdr-clr: #333;
    --blog-content-block-bg-clr: transparent;
    --blog-content-block-pros-brdr-clr: #6bb231;
    --blog-content-block-cons-brdr-clr: #b23131;

  /* General button styles */
  --btn-gnrl-bg-clr: #fff;
  --btn-gnrl-bg-hover-clr: var(--elmnt-bg-color-2);
  --btn-gnrl-txt-clr: var(--site-txt-color-2);
  --btn-brdr-radius: 20px;
  
  /* Header styles */
  --hdr-bar-bg-color: #fff;
  --hdr-bar-brdr-color: #dcdcdc;
  --hdr-bar-search-bg-color: #fff;
  --hdr-bar-search-border-color: #dcdcdc;
  --hdr-bar-search-inner-shadow-color: var(--elmnt-bg-color-2);
  --hdr-bar-search-button-color: var(--accnt-clr-1);
  --hdr-bar-accnt-clr: var(--accnt-clr-1);
  --hdr-bar-text-color: #888;
  --header-accent-font: 'Josefin Sans', sans-serif;
  --header-brand-font-size: 160%;

  /* Fonts */
  --theme-accent-font: 'Montserrat', sans-serif;
  --theme-body-font: 'Open Sans', sans-serif;

  /* Block styles */
  --block-radius: 15px;
  --block-shadow: 0px 3px 16px -14px #333;
  --block-bg-color: #ffffff;
  --block-brdr-color: #dadada;
  --block-footer-bg-color: var(--elmnt-bg-color-2);

  /* Footer colors */
  --footer-bg-color: #181818;
  --footer-bg-txt-color: #f1f1f1;
  --footer-bottom-bg-color: #000;

  /* Button colors */
  --upvote-color: var( --accnt-clr-1);
  --favorite-color: #dd8a50;
  --like-color: #002c48;
  --heart-color: #e47272;


  --share-thought-color: var(--accnt-clr-2);
  --ask-question-color: var(--accnt-clr-1);
  --answer-question-color: var(--accnt-clr-3);

  /* Error colors */
  --err-ele-bg-clr: #ffe9e9;
  --err-ele-brdr-clr: #e89696;
  --err-ele-txt-clr: #7d1a1a;
  --err-txt-clr: #c95151;

  /* Success colors */
  --sccs-ele-bg-clr: #50b94a;
  --sccs-ele-brdr-clr: #359730;
  --sccs-ele-txt-clr: #061e00;
  --sccs-txt-clr: #b1eaa6;

  /* Warning colors */
  --wrng-ele-bg-clr: #fffae9;
  --wrng-ele-brdr-clr: #e8d596;
  --wrng-ele-txt-clr: #7d661a;
  --wrng-txt-clr: #fff0bd;

  /* Link colors */
  --link1-base-color: var(--accnt-clr-1);
  --link1-hover-color: var(--accnt-clr-2);
  --link1-active-color: var(--accnt-clr-3);
  --link1-grey-color: var(--site-txt-color-2);


  --link2-base-color: #d24040;
  --link2-hover-color: #c53030;
  --link2-active-color: #d24040;
  --link2-grey-color: #666;


  --top-answer-text-color: #e47272;

  /* Accent button styles */
  --accent-button-color: var(--accnt-txt-clr);
  --accent-button-bg-color-1: var(--accnt-clr-2);
  --accent-button-bg-color-2: var(--accnt-clr-1);
  --accent-button-box-shadow: 0px 0px 10px -3px var(--accnt-clr-1);

      /* Coockie banner styles */
      --ckie-bnr-bg-clr: #fae5e5;
}

[data-theme="dark"] {
    /* Repeated styles */
    --accnt-clr-1: #e66c20;
    --accnt-clr-1-10: #e66c201a;
    --accnt-clr-1-25: #e66c2040;
    --accnt-clr-1-50: #e66c2080;
    --accnt-clr-1-75: #e66c20bf;
    --accnt-clr-2: #e66c20;
    --accnt-clr-3: #d35709;
    --accnt-txt-clr: #ffffff;
    --site-bg-color: #222a3f;
    --elmnt-bg-color-1: #1d2437;
    --elmnt-bg-color-2: #2b344c;
    --elmnt-bg-color-3: var(--site-bg-color);
    --brdr-clr-1: #101522;
    --site-txt-color-1: #dbd6d6;
    --site-txt-color-2: #a8a8a8;
    --site-txt-color-3: #8c8c8c;
    --inpt-bg-clr: #2c3652;

    /* Blog styles */
    --blog-bg-clr: #222a3f;
      --blog-content-block-tag-clr: #f7f7f7;
      --blog-content-block-brdr-clr: #0f1421;
      --blog-content-block-bg-clr: transparent;
      --blog-content-block-pros-brdr-clr: #248f1b;
      --blog-content-block-cons-brdr-clr: #8f1b1b;

    /* General button styles */
    --btn-gnrl-bg-clr: var(--elmnt-bg-color-1);
    --btn-gnrl-bg-hover-clr: var(--elmnt-bg-color-2);
    --btn-gnrl-txt-clr: var(--site-txt-color-2);
    --btn-brdr-radius: 20px;
    
    /* Header styles */
    --hdr-bar-bg-color: var(--elmnt-bg-color-1);
    --hdr-bar-brdr-color: var(--brdr-clr-1);
    --hdr-bar-search-bg-color: var(--site-bg-color);
    --hdr-bar-search-border-color: var(--brdr-clr-1);
    --hdr-bar-search-inner-shadow-color: var(--elmnt-bg-color-2);
    --hdr-bar-search-button-color: var(--site-txt-color-2);
    --hdr-bar-accnt-clr: var(--accnt-clr-1);
    --hdr-bar-text-color: var(--site-txt-color-2);
    --header-accent-font: 'Josefin Sans', sans-serif;
    --header-brand-font-size: 160%;

    /* Fonts */
    --theme-accent-font: 'Montserrat', sans-serif;
    --theme-body-font: 'Open Sans', sans-serif;

    /* Block styles */
    --block-radius: 10px;
    --block-shadow: 0 3px 16px -12px #000000;
    --block-bg-color: var(--elmnt-bg-color-1);
    --block-brdr-color: var(--brdr-clr-1);
    --block-footer-bg-color: var(--elmnt-bg-color-2);

    /* Footer colors */
    --footer-bg-color: var(--brdr-clr-1);
    --footer-bg-txt-color: var(--site-txt-color-2);
    --footer-bottom-bg-color: #000;

    /* Button colors */
    --upvote-color: var( --accnt-clr-1);
    --favorite-color: #e4bf71;
    --like-color: #002c48;
    --heart-color: #e47272;


    --share-thought-color: var(--accnt-clr-2);
    --ask-question-color: var(--accnt-clr-1);
    --answer-question-color: var(--accnt-clr-3);

    /* Error colors */
    --err-ele-bg-clr: #d95656;
    --err-ele-brdr-clr: #d74646;
    --err-ele-txt-clr: #000000;
    --err-txt-clr: #c95151;

    /* Success colors */
    --sccs-ele-bg-clr: #50b94a;
    --sccs-ele-brdr-clr: #359730;
    --sccs-ele-txt-clr: #061e00;
    --sccs-txt-clr: #b1eaa6;

    /* Warning colors */
    --wrng-ele-bg-clr: #d6c484;
    --wrng-ele-brdr-clr: #c3a643;
    --wrng-ele-txt-clr: #383014;
    --wrng-txt-clr: #fff0bd;

    /* Link colors */
    --link1-base-color: var(--accnt-clr-1);
    --link1-hover-color: var(--accnt-clr-3);
    --link1-active-color: var(--accnt-clr-2);
    --link1-grey-color: var(--site-txt-color-2);


    --link2-base-color: #d24040;
    --link2-hover-color: #c53030;
    --link2-active-color: #d24040;
    --link2-grey-color: var(--site-txt-color-2);


    --top-answer-text-color: #65a3ff;

    /* Accent button styles */
    --accent-button-color: var(--accnt-txt-clr);
    --accent-button-bg-color-1: var(--accnt-clr-3);
    --accent-button-bg-color-2: var(--accnt-clr-1);
    --accent-button-box-shadow: 0 0 10px -3px var(--accnt-clr-1);

      /* Coockie banner styles */
      --ckie-bnr-bg-clr: #fae5e5;
}

@media (prefers-color-scheme: dark) {
:root {
    /* Repeated styles */
    --accnt-clr-1: #e66c20;
    --accnt-clr-1-10: #e66c201a;
    --accnt-clr-1-25: #e66c2040;
    --accnt-clr-1-50: #e66c2080;
    --accnt-clr-1-75: #e66c20bf;
    --accnt-clr-2: #e66c20;
    --accnt-clr-3: #d35709;
    --accnt-txt-clr: #ffffff;
    --site-bg-color: #222a3f;
    --elmnt-bg-color-1: #1d2437;
    --elmnt-bg-color-2: #2b344c;
    --elmnt-bg-color-3: var(--site-bg-color);
    --brdr-clr-1: #101522;
    --site-txt-color-1: #dbd6d6;
    --site-txt-color-2: #a8a8a8;
    --site-txt-color-3: #8c8c8c;
    --inpt-bg-clr: #2c3652;

    /* Blog styles */
    --blog-bg-clr: #222a3f;
      --blog-content-block-tag-clr: #f7f7f7;
      --blog-content-block-brdr-clr: #0f1421;
      --blog-content-block-bg-clr: transparent;
      --blog-content-block-pros-brdr-clr: #248f1b;
      --blog-content-block-cons-brdr-clr: #8f1b1b;

    /* General button styles */
    --btn-gnrl-bg-clr: var(--elmnt-bg-color-1);
    --btn-gnrl-bg-hover-clr: var(--elmnt-bg-color-2);
    --btn-gnrl-txt-clr: var(--site-txt-color-2);
    --btn-brdr-radius: 20px;
    
    /* Header styles */
    --hdr-bar-bg-color: var(--elmnt-bg-color-1);
    --hdr-bar-brdr-color: var(--brdr-clr-1);
    --hdr-bar-search-bg-color: var(--site-bg-color);
    --hdr-bar-search-border-color: var(--brdr-clr-1);
    --hdr-bar-search-inner-shadow-color: var(--elmnt-bg-color-2);
    --hdr-bar-search-button-color: var(--site-txt-color-2);
    --hdr-bar-accnt-clr: var(--accnt-clr-1);
    --hdr-bar-text-color: var(--site-txt-color-2);
    --header-accent-font: 'Josefin Sans', sans-serif;
    --header-brand-font-size: 160%;

    /* Fonts */
    --theme-accent-font: 'Montserrat', sans-serif;
    --theme-body-font: 'Open Sans', sans-serif;

    /* Block styles */
    --block-radius: 10px;
    --block-shadow: 0 3px 16px -12px #000000;
    --block-bg-color: var(--elmnt-bg-color-1);
    --block-brdr-color: var(--brdr-clr-1);
    --block-footer-bg-color: var(--elmnt-bg-color-2);

    /* Footer colors */
    --footer-bg-color: var(--brdr-clr-1);
    --footer-bg-txt-color: var(--site-txt-color-2);
    --footer-bottom-bg-color: #000;

    /* Button colors */
    --upvote-color: var( --accnt-clr-1);
    --favorite-color: #e4bf71;
    --like-color: #002c48;
    --heart-color: #e47272;


    --share-thought-color: var(--accnt-clr-2);
    --ask-question-color: var(--accnt-clr-1);
    --answer-question-color: var(--accnt-clr-3);

    /* Error colors */
    --err-ele-bg-clr: #d95656;
    --err-ele-brdr-clr: #d74646;
    --err-ele-txt-clr: #000000;
    --err-txt-clr: #c95151;

    /* Success colors */
    --sccs-ele-bg-clr: #50b94a;
    --sccs-ele-brdr-clr: #359730;
    --sccs-ele-txt-clr: #061e00;
    --sccs-txt-clr: #b1eaa6;

    /* Warning colors */
    --wrng-ele-bg-clr: #d6c484;
    --wrng-ele-brdr-clr: #c3a643;
    --wrng-ele-txt-clr: #383014;
    --wrng-txt-clr: #fff0bd;

    /* Link colors */
    --link1-base-color: var(--accnt-clr-1);
    --link1-hover-color: var(--accnt-clr-3);
    --link1-active-color: var(--accnt-clr-2);
    --link1-grey-color: var(--site-txt-color-2);


    --link2-base-color: #d24040;
    --link2-hover-color: #c53030;
    --link2-active-color: #d24040;
    --link2-grey-color: var(--site-txt-color-2);


    --top-answer-text-color: #65a3ff;

    /* Accent button styles */
    --accent-button-color: var(--accnt-txt-clr);
    --accent-button-bg-color-1: var(--accnt-clr-3);
    --accent-button-bg-color-2: var(--accnt-clr-1);
    --accent-button-box-shadow: 0 0 10px -3px var(--accnt-clr-1);

      /* Coockie banner styles */
      --ckie-bnr-bg-clr: #fae5e5;
}
}


[data-theme="light"] {

  /* Repeated styles */
  --accnt-clr-1: #e66c20;
  --accnt-clr-1-10: #e66c201a;
  --accnt-clr-1-25: #e66c2040;
  --accnt-clr-1-50: #e66c2080;
  --accnt-clr-1-75: #e66c20bf;
  --accnt-clr-2: #e66c20;
  --accnt-clr-3: #d35709;
  --accnt-txt-clr: #ffffff;
  --site-bg-color: #edf1f4;
  --elmnt-bg-color-1: #ffffff;
  --elmnt-bg-color-2: #f8fbfd;
  --elmnt-bg-color-3: #edf1f4;
  --brdr-clr-1: #dadada;
  --site-txt-color-1: #555;
  --site-txt-color-2: #666;
  --site-txt-color-3: #888;
  --inpt-bg-clr: #fff;

    /* Blog styles */
    --blog-bg-clr: #fff;
    --blog-content-block-tag-clr: #f7f7f7;
    --blog-content-block-brdr-clr: #333;
    --blog-content-block-bg-clr: transparent;
    --blog-content-block-pros-brdr-clr: #6bb231;
    --blog-content-block-cons-brdr-clr: #b23131;

  /* General button styles */
  --btn-gnrl-bg-clr: #fff;
  --btn-gnrl-bg-hover-clr: var(--elmnt-bg-color-2);
  --btn-gnrl-txt-clr: var(--site-txt-color-2);
  --btn-brdr-radius: 20px;
  
  /* Header styles */
  --hdr-bar-bg-color: #fff;
  --hdr-bar-brdr-color: #dcdcdc;
  --hdr-bar-search-bg-color: #fff;
  --hdr-bar-search-border-color: #dcdcdc;
  --hdr-bar-search-inner-shadow-color: var(--elmnt-bg-color-2);
  --hdr-bar-search-button-color: var(--accnt-clr-1);
  --hdr-bar-accnt-clr: var(--accnt-clr-1);
  --hdr-bar-text-color: #888;
  --header-accent-font: 'Josefin Sans', sans-serif;
  --header-brand-font-size: 160%;

  /* Fonts */
  --theme-accent-font: 'Montserrat', sans-serif;
  --theme-body-font: 'Open Sans', sans-serif;

  /* Block styles */
  --block-radius: 15px;
  --block-shadow: 0px 3px 16px -14px #333;
  --block-bg-color: #ffffff;
  --block-brdr-color: #dadada;
  --block-footer-bg-color: var(--elmnt-bg-color-2);

  /* Footer colors */
  --footer-bg-color: #181818;
  --footer-bg-txt-color: #f1f1f1;
  --footer-bottom-bg-color: #000;

  /* Button colors */
  --upvote-color: var( --accnt-clr-1);
  --favorite-color: #dd8a50;
  --like-color: #002c48;
  --heart-color: #e47272;


  --share-thought-color: var(--accnt-clr-2);
  --ask-question-color: var(--accnt-clr-1);
  --answer-question-color: var(--accnt-clr-3);

  /* Error colors */
  --err-ele-bg-clr: #ffe9e9;
  --err-ele-brdr-clr: #e89696;
  --err-ele-txt-clr: #7d1a1a;
  --err-txt-clr: #c95151;

  /* Success colors */
  --sccs-ele-bg-clr: #50b94a;
  --sccs-ele-brdr-clr: #359730;
  --sccs-ele-txt-clr: #061e00;
  --sccs-txt-clr: #b1eaa6;

  /* Warning colors */
  --wrng-ele-bg-clr: #fffae9;
  --wrng-ele-brdr-clr: #e8d596;
  --wrng-ele-txt-clr: #7d661a;
  --wrng-txt-clr: #fff0bd;

  /* Link colors */
  --link1-base-color: var(--accnt-clr-1);
  --link1-hover-color: var(--accnt-clr-2);
  --link1-active-color: var(--accnt-clr-3);
  --link1-grey-color: var(--site-txt-color-2);


  --link2-base-color: #d24040;
  --link2-hover-color: #c53030;
  --link2-active-color: #d24040;
  --link2-grey-color: #666;


  --top-answer-text-color: #e47272;

  /* Accent button styles */
  --accent-button-color: var(--accnt-txt-clr);
  --accent-button-bg-color-1: var(--accnt-clr-2);
  --accent-button-bg-color-2: var(--accnt-clr-1);
  --accent-button-box-shadow: 0px 0px 10px -3px var(--accnt-clr-1);

      /* Coockie banner styles */
      --ckie-bnr-bg-clr: #fae5e5;
}