@import url('https://fonts.googleapis.com/css?family=Lunasima&display=swap');
:root {
  --color-ok-bg: #2d796a;
  --color-ok-border: #93d7ff;
  --color-ok-text: #ffffff;
  --color-ok-accent: #72aca9;

  --color-warn-bg: #83742c;
  --color-warn-border: #e0e37b;
  --color-warn-text: #ffffff;
  /* --color-warn-accent */

  --color-error-bg: rgb(95, 33, 33);
  --color-error-border: #d47272;
  --color-error-text: #ffffff;
  /* --color-error-accent */

  --color-consider-bg: #b79fcc;
  /* --color-consider-border */
  --color-consider-text: #326067;
  /* --color-consider-accent */

  --color-text: #e1e1e2;
  --color-text-accent: #ffffff;

  --color-border: rgb(229, 164, 255);
  --color-border-broken: #00f2ff;

  --color-bg: rgb(83, 50, 127);

  --color-link: #00f2ff;
  --color-link-dark: #00d3df;

  --color-pc-button-bg: #8341a8;
  --color-pc-button-bg-hover: #B062D8;
  --color-pc-button-bg-click: #3E0470;
  --color-pc-button-text: white;
  --color-pc-button-text-click: #eee;

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

  --color-unobstrusive-button-bg: var(--color-bg);
  --color-unobstrusive-button-bg-hover: rgb(94, 58, 141);
  --color-unobstrusive-button-bg-click: rgb(111, 71, 163);
  --color-unobstrusive-button-text: var(--color-text);
  --color-unobstrusive-button-text-click: #ffffff;
}

body {
  color: var(--color-text);
  
  background-image: linear-gradient(#220e3a 0%, #BC69E6 70%, #e29843 100%);

  position: relative;

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

  background-color: linear-gradient(#220e3a 0%, #BC69E6 70%, #e29843 100%);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Lunasima", Arial, sans-serif;
}

/* 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 */
}