@media (prefers-color-scheme: dark) {
  :root {
    --primary-font-color: #fff; /* pref #FFF */
    --link-color: #fff;
    --background-color: #1e1e1e;
    --selection-bg-color: #fff;
    --selection-text-color: #1e1e1e;
  }

  body,
  #safari,
  .wrapper,
  .btncp {
    background: var(--background-color);
    background-color: var(--background-color);
  }

  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--primary-font-color); }

  a.btn { color: var(--primary-font-color); background: var(--background-color); border: 2px solid var(--primary-font-color);}
  a:hover, a:focus, a.btn:hover, a.btn.focus { color: var(--primary-font-color); text-decoration: none; background: var(--background-color);}

  a.vizlink:hover h2,
  a.redlink:hover h2 {
    color: var(--hover-color);
    text-decoration: none;
  }

  .btncp { color: #aaa; }

  .card,
  .tvcard,
  .haikucard {
    border: 1px solid #666;
    /* box-shadow: 1px 1px 5px #000; */
    border-radius: 8px;
  }

  .card { background: var(--background-color); border: 2px solid var(--primary-font-color);}

  .tvcard,
  .haikucard {
    background: var(--background-color);
    padding: 10px;
    margin: 25px;
    text-decoration: none;
    cursor: pointer;
  }

  .hrline { content: url("/assets/images/pixel_white.gif"); }

  .input {
    border: 1px solid #ccc;
    color: #ccc;
    background: #111;
  }

  .sttBtn { background: #555; color: var(--primary-font-color); }

  /* Shared image sizing */
  .breakfastdates,
  .believeinmagic,
  .therealyou,
  .yourperson,
  .findapartner {
    max-width: 1125px;
    width: 80%;
    height: auto;
  }

  .breakfastdates {
    width: 75%;
    content: url("/assets/images/breakfast_dates_d.jpg");
  }

  .believeinmagic { content: url("/assets/images/believe-in-magic_d.jpg"); }
  .therealyou { content: url("/assets/images/the_real_you_d.jpg"); }
  .yourperson { content: url("/assets/images/your_person_d.jpg"); }
  .findapartner { content: url("/assets/images/find_a_partner_d.jpg"); }

  .initsmark { content: url("/assets/icons/initsmark_d.png"); }
  .logomark { content: url("/assets/icons/logomark_d.png"); }
  .tvreviewicon { content: url("/assets/tv/tv_comment_d.png"); }

  .tvcolumn { width: 300px; margin: 0 auto; }
  .tvcontentcolumn { width: 350px; margin: 0 auto; }
}