/* Default color schemes and other variables */
:root {
  --bg: #fff;
  --fg: #000;
  --font-size: 18px;
  --link: #00f;
  --link-visited: #519;
  --tile-width: 3.5ch;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #334;
    --fg: #fff;
    --font-size: 18px;
    --link: #0bf;
    --link-visited: #b4d;
  }
}

/* Other themes */
.dark {
  --bg: #334;
  --fg: #fff;
  --link: #0bf;
  --link-visited: #b4d;
}

.h4x0r {
  --bg: #000;
  --fg: #0f0;
  --link: #0ff;
  --link-visited: #f0f;
}

.light {
  --bg: #fff;
  --fg: #000;
  --link: #00f;
  --link-visited: #519;
}

/* Apply themes */
html body, body * {
  background-color: var(--bg);
  color: var(--fg);
  font-size: var(--font-size);
  font-family: monospace;
}

a, tw-link * {
  color: var(--link);
}

a:visited, tw-link.visited * {
  color: var(--link-visited);
}

/* Style headers and sections */
header, section {
  max-width: 80ch;
  min-width: 80ch;
  width: 80ch;
}

header h1, header h1 * {
  font-size: 40pt;
}

section h2 {
  font-size: 24pt;
}

header.table h1 {
  margin-left: 1.5ch;
}

section.passage {
  display: flex;
  max-width: 80ch;
  min-width: 800px;
  width: 90%;
}

/* Taming Twine elements */
tw-expression, tw-link {
  display: block;
}

tw-icon {
  font-size: 400%;
  line-height: 100%;
  margin: 0;
  padding: .5pc;
  width: 2ch;
}

tw-icon:hover {
  background: #888;
  border-radius: 1pc;
  color: #fff;
}

tw-passage {
  min-width: 800px;
  padding: 0 10%;
}

tw-sidebar {
  display: flex;
  justify-content: flex-start;
  left: 0;
  top: 0;
}

tw-story {
  overflow: scroll;
  padding: 0;
}

.element {
  align-items: center;
  border: 1px solid var(--fg);
  display: flex;
  flex-direction: column;
  height: 15ch;
  justify-content: space-between;
  padding: .2ch;
  width: 15ch;
}

.element br {
  display: none;
}

.element h2 {
  font-size: var(--font-size);
  margin: 0;
}

.element .number {
  font-size: 200%;
}

.element .symbol {
  font-size: 400%;
  line-height: 100%;
}

.element.small {
  height: 5ch;
  justify-content: space-around;
  line-height: 100%;
  width: 5ch;
}

.element.small .number {
  font-size: 100%;
}

.element.small .name, .element.small .mass {
  display: none;
}

.element.small .symbol {
  font-size: 150%;
}

.exits {
  margin: 0 0 0 10ch;
}

.exits br {
  display: none;
}

.exits ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  margin: 0;
  min-width: calc(15ch + 2px);
  padding: 0;
  width: calc(15ch + 2px);
}

.exits ul li {
  display: block;
  min-width: 5ch;
  overflow: hidden;
  width: 5ch;
}

.exits ul li:focus-within, tw-icon:focus {
  border: 8px solid var(--link);
  border-radius: 4px;
  transform: scale(1.5);
  opacity: 1;
  overflow: visible;
  z-index: 2;
}

.exits ul li.direction:focus-within {
  height: calc(5ch);
}

.exits ul li.direction button {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  box-sizing: border-box;
  display: block;
  height: 5ch;
  margin: 0;
  padding: 0;
  position: absolute;
  transition: all 0.2s ease-in-out;
  width: 5ch;
  z-index: 1;
}

.exits ul li.direction button:hover, .exits li.direction button:active {
  opacity: 0;
}

.exits.table {
  margin: 0;
}

.exits.table ul  {
  min-width: calc(32*var(--tile-width));
  width: calc(32*var(--tile-width));
}

.exits.table ul li, .exits.table .element {
  height: var(--tile-width);
  min-width: var(--tile-width);
  width: var(--tile-width);
}

.exits.table ul li .element .number {
  font-size: 75%;
  line-height: 100%;
}

.exits.table ul li .element .symbol {
  font-size: 100%;
}

.footer {
  display: flex;
  flex-direction: row-reverse;
}