body {
  background: #d4d4d4;
  color: #000000;
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  margin: 8px;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/static/background/tile.png") repeat;
  filter: invert(1);
  opacity: 0.18;
}

a:link { color: #0000ee; }
a:visited { color: #551a8b; }

img { max-width: 100%; height: auto; }

.tile {
  background: #ffffff;
  color: #000000;
  border: 2px solid #000000;
  padding: 8px;
  margin: 0;
}

.header,
.footer {
  background: #1a5c3a;
  color: #ffffff;
  overflow: hidden;
}

.header { margin-bottom: 8px; }

.header .tile {
  background: transparent;
  color: #ffffff;
  border: none;
  display: inline;
  padding: 0;
  margin: 0;
}

.header a:link,
.header a:visited,
.footer a:link,
.footer a:visited {
  color: #b6f5c8;
}

.logo img {
  display: block;
  height: 64px;
  width: auto;
}

.header-right { float: right; margin-left: 8px; }
.header-left {
  display: grid;
  grid-template-columns: auto 1fr;
  overflow: hidden;
}
.logo { grid-column: 1; grid-row: 1; }
.header-bar { display: contents; }
.live-stats { grid-column: 1; grid-row: 2; font-size: smaller; }
.navbar { grid-column: 2; grid-row: 2; align-self: end; padding-left: 8px; }
.live-stats a,
.live-stats span { margin-right: 0.6em; }
.nav-links a { margin-right: 1em; }

.main-layout {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 8px;
}

.content { flex: 1; min-width: 0; }
.sidebar { flex: 0 0 240px; }
.footer { text-align: center; }

h1, h2, h3 { font-size: 1.2em; }

label { display: block; margin-top: 0.5em; }
input, textarea, select, button { font: inherit; }
button,
input[type="submit"],
.user-auth-btn {
  background: #c0c0c0;
  color: #000000;
  border: 2px outset #ffffff;
  padding: 2px 8px;
}

.errorlist { color: #cc0000; font-weight: bold; }
.email-verification-banner {
  background: #ffffcc;
  border: 1px solid #000000;
  padding: 4px;
  margin-bottom: 8px;
}

hr { border: none; border-top: 1px solid #000000; }

.tool-card,
.user-card,
.store-item {
  border: 1px solid #000000;
  margin: 0 0 1em 0;
  padding: 4px;
}

@media (max-width: 640px) {
  .sidebar { display: none; }

  .header { display: flex; flex-direction: column; }
  .header-right { float: none; order: 2; margin: 8px 0 0; }
  .header-left { display: block; order: 1; overflow: visible; }
  .header-bar { display: block; }
  .navbar { padding-left: 0; }
  .logo img { max-width: 100%; height: auto; max-height: 64px; }
  .live-stats,
  .navbar { display: block; margin-right: 0; }
}