/* basic colours */

:root {
  color-scheme: light dark;
}

/* basic layout */

body {
  display: grid;
  margin: 0;
  grid-template: 1fr 1fr / minmax(200px,500px) minmax(700px,1fr);
  height: 100vh;
}

body > aside {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
  border-bottom: 4px solid CanvasText;
  padding: 5px;
}

body > nav {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
}

body > main {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
  overflow: auto;
  border-left: 4px solid CanvasText;
  padding: 5px;
}

@media (max-width: 800px) {
  body {
    display: block;
  }
  body > * {
    border-left: none !important;
    border-bottom: 4px solid CanvasText;
  }
  body > aside {
    display: none;
  }
}

table.decktable {
  display: inline-block;
  border: 1px solid CanvasText;
}

table.decktable.red th {
  background-color: red;
  color: black;
}

table.decktable.orange th {
  background-color: orange;
  color: black;
}

table.decktable.yellow th {
  background-color: yellow;
  color: black;
}

table.decktable.green th {
  background-color: green;
  color: white;
}

table.decktable.blue th {
  background-color: blue;
  color: white;
}

table.decktable.purple th {
  background-color: purple;
  color: white;
}

table.decktable.brown th {
  background-color: brown;
  color: white;
}

table.decktable.gray th {
  background-color: gray;
  color: white;
}

table.decktable.special th {
  background: linear-gradient(90deg, hsl(0, 100%, 70%), hsl(30, 100%, 70%), hsl(60, 100%, 70%), hsl(90, 100%, 70%), hsl(120, 100%, 70%), hsl(150, 100%, 70%), hsl(180, 100%, 70%), hsl(210, 100%, 70%), hsl(240, 100%, 70%), hsl(270, 100%, 70%), hsl(300, 100%, 70%), hsl(330, 100%, 70%), hsl(360, 100%, 70%));
  color: black;
}

main img {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

aside {
  background: url("/assets/header.png");
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--headbg);
}

span.cardname {
  font-family: monospace;
  white-space: nowrap;
}

img.crayon {
  vertical-align: middle;
}

table.level {
  display: inline-block;
}

h2.collectingheader {
  position: sticky;
  top: 0;
  background-color: Canvas;
}