:root {
  --color-ok-bg: rgb(238, 255, 228);
  --color-ok-border: #a8ff93;
  --color-ok-text: #074d07;
  --color-ok-accent: #68bf0b;

  --color-warn-bg: #fffadd;
  --color-warn-border: #e0e37b;
  --color-warn-text: #4d4707;
  /* --color-warn-accent */

  --color-error-bg: #fdd;
  --color-error-border: #ff9393;
  --color-error-text: #4d0707;
  /* --color-error-accent */

  --color-consider-bg: #D8EFF3;
  /* --color-consider-border */
  --color-consider-text: #213e42;
  /* --color-consider-accent */

  --color-text: #444446;
  --color-text-accent: #222;

  --color-border: lightgray;
  --color-border-broken: #555;

  --color-bg: white;
  --color-bg-surface: white;
  --color-overlay: rgba(255, 255, 255, 0.8);

  --color-link: blue;
  --color-link-dark: #f77e39;

  --color-pc-button-bg: #0881c6;
  --color-pc-button-bg-hover: #076696;
  --color-pc-button-bg-click: #055075;
  --color-pc-button-text: white;
  --color-pc-button-text-click: #eee;

  --color-imp-button-bg: #ff003c;
  --color-imp-button-bg-hover: #ff2457;
  --color-imp-button-bg-click: #f21347;

  --color-unobstrusive-button-bg: var(--color-bg-surface);
  --color-unobstrusive-button-bg-hover: #ddd;
  --color-unobstrusive-button-bg-click: #aaa;
  --color-unobstrusive-button-text: var(--color-text);
  --color-unobstrusive-button-text-click: #111;

  --color-dropdown-border: #bbb;
  --color-dropdown-shadow: #ccc;

  --color-icon: #333;
}

html[data-theme="dark"] {
  --color-ok-bg: #69b0405e;
  --color-ok-border: #a8ff93;
  --color-ok-text: rgb(243, 255, 235);
  --color-ok-accent: #68bf0b;

  --color-warn-bg: #a49a6094;
  --color-warn-border: #e0e37b;
  --color-warn-text: #fffdf5;
  /* --color-warn-accent */

  --color-error-bg: #985858b7;
  --color-error-border: #ff939390;
  --color-error-text: rgb(255, 247, 247);
  /* --color-error-accent */

  --color-consider-bg: #68afbf64;
  /* --color-consider-border */
  --color-consider-text: #D8EFF3;
  /* --color-consider-accent */

  --color-text-accent: #dce6e3;
  --color-text: #e2dfd8;

  --color-bg: #121720;
  --color-bg-surface: #252d3c;
  --color-overlay: rgba(7, 9, 13, 0.8);

  --color-link: #1ca4f3;

  --color-border: #393f4e;
  --color-border-broken: #8a8a8a;

  --color-imp-button-bg: #c0070a;
  --color-imp-button-bg-hover: #bd1e20;
  --color-imp-button-bg-click: #9b0306;

  --color-unobstrusive-button-bg-hover: #181d27;
  --color-unobstrusive-button-bg-click: #12151d;
  --color-unobstrusive-button-text: var(--color-text-accent);
  --color-unobstrusive-button-text-click: var(--color-text);

  --color-dropdown-border: #4d5566;
  --color-dropdown-shadow: #1a212c;

  --color-icon: #c4c4c4;
}

#theme-toggle > a > .fa::before {
  content: "\f186"; /* moon icon */
}

html[data-theme="dark"] #theme-toggle > a > .fa::before {
  content: "\f185"; /* sun icon */
}

html[data-list="ratedplus"] {
  --color-pc-button-bg: #b30205;
  --color-pc-button-bg-hover: #850204;
  --color-pc-button-bg-click: #520203;
}

body {
  color: var(--color-text);

  position: relative;

  min-width: 100%;
  height: 100%;

  background-color: var(--color-bg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (max-width: 767px) {
  body {
    background-image: none;
  }
}

body {
  font-family: "Montserrat", sans-serif;
}

.logo {
  height: 15px;
  width: auto;
  display: inline-block;
}

/* input elements are weird about their font */
input {
  font-family: inherit;
  font-size: inherit;
}

/* If element to scroll to is selected by id in URL, add offset to account for nav bar */
:target:before {
  content: "";
  display: block;
  height: calc(90px + 0.6em); /* fixed header height*/
  margin-top: calc(-90px - 0.6em); /* negative fixed header height */
}