:root {
  --background: #081916;
  --background-alt: #0f2e2e;
  --border: #284655;
  --foreground: #ecfaff;
  --foreground-alt: #d8ebf5; /* not used yet */
  --foreground-disabled: #888;
  --link-background: #186567;
  --link-foreground: #ab9b8b;
  --nav-background: #292435;
  /* Diablo 2 Colors */
  --d2-rare: #d8bc29;
  --d2-magic: #7377ec;
}
@media (prefers-color-scheme: light) {
  :root {
    --background: #ecfaff;
    --background-alt: #d8ebf5;
    --border: #284655;
    --foreground: #004d40;
    --foreground-alt: #004035; /* not used yet */
    --foreground-disabled: #bbb;
    --link-background: #7eaedf;
    --link-foreground: #723e0a;
    /* Diablo 2 Colors */
    --d2-rare: #a6a612;
    --d2-magic: #2664b7;
  }
}

@font-face {
  font-family: "avqest";
  src: url(http://paradox.agweber.net/fonts/Avqest.ttf) format("truetype");
}

ul li {
  list-style-type: none;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: "avqest", serif;
  font-size: large;
}

header {
  background-color: var(--background-alt);
  text-align: center;
  font-size: 1.8em;
  margin-bottom: 8px;
}

main {
  margin-left: 160px;
  padding-left: 5%;
  padding-right: 5%;
  display: flex;
  flex-wrap: wrap;
}

a.plain {
  color: var(--foreground);
}

a.plain:visited {
  color: var(--foreground);
}

.links a {
  background-color: var(--link-background);
  color: var(--link-foreground);
  border-radius: 5px;
  padding-left: 5px;
  padding-right: 5px;
  margin: 2px;
  line-height: 1.8em;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 1px 1px var(--border);
}

.links a:hover {
  box-shadow: 3px 3px var(--border);
}

nav {
  height: 100%;
  width: 160px;
  position: fixed;
  top: 0;
  left: 0;
  background-image: linear-gradient(to right, var(--nav-background) 80%, var(--background));
  overflow-x: hidden;
  padding-top: 20px;
}

nav a {
  display: block;
  /* background-color: var(--link-background); */
  color: var(--link-foreground);
  padding-left: 12px;
  margin-bottom: 12px;
  font-size: larger;
}
nav a:before {
  content: "¤ ";
}

.unique table {
  border-collapse: collapse;
}
.unique td {
  border: 1px solid var(--foreground-alt);
}

td {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 20px;
}

td.unspawnable {
  background-color: var(--background);
  color: var(--foreground-disabled);
}

td.rare {
  color: var(--d2-rare);
}

td.magic {
  color: var(--d2-magic);
}

table.striped>tbody>tr:nth-child(odd) {
  background-color: var(--background);
}

.affix {
  background-color: var(--background-alt);
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 3px 3px var(--border);
  margin: 5px;
}
.affixDesc {
  font-size: larger;
}
.affixItemGroup {
  padding-left: 10px;
}
.affixItemGroupHeader {
  padding-left: 10px;
}

.unique {
  background-color: var(--background-alt);
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 3px 3px var(--border);
  display: flex;
  margin: 5px;
}
.uniqueDescription {
  flex: 1 1 40%;
}
.uniqueModifiers {
  flex: 1 1 60%;
}
.unique.disabled {
  color: #888;
  text-decoration: line-through;
}
.uniqueTitle {
  font-size: larger;
}

.runeword {
  background-color: var(--background-alt);
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 3px 3px var(--border);
  display: flex;
  margin: 5px;
}

.itemtype {
  background-color: var(--background-alt);
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 3px 3px var(--border);
}

.itemtypeTitle {
  font-size: larger;

}

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 8px;
}

.question:before {
  content: "Q) ";
}
.answer:before {
  content: "\a0\a0\a0 A) ";
}

/* Phone display stuff */
@media only screen and (max-device-width: 600px) {
  body {
    font-size: x-large;
  }
  main {
    padding-left: 3%;
    padding-right: 3%;
  }

  .unique {
    flex-direction: column;
  }
}

.img {
  width: 120px;
  height: 160px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
}

.morphed {
  color: #ff525a;
}
.corrupted {
  color: #ff525a;
}

.orange {
  color: #f9a946;
}
