:root {
  --ink: #050505;
  --acid: #b5ff00;
  --hot: #ff3b18;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    repeating-linear-gradient(51deg, rgba(255, 59, 24, 0.2) 0 2px, transparent 2px 21px),
    repeating-linear-gradient(127deg, rgba(0, 0, 238, 0.12) 0 3px, transparent 3px 29px),
    #ded8b8;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(#000 1px, transparent 1px);
  background-size: 6px 6px;
  opacity: 0.16;
  mix-blend-mode: multiply;
  z-index: 10;
}

nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 0.35rem;
  padding: 0.45rem;
  border-bottom: 3px solid var(--ink);
  background: repeating-linear-gradient(90deg, #ddd 0 13px, var(--acid) 13px 17px);
  font: 1rem "Courier New", monospace;
}

a,
button {
  color: #0000ee;
  background: #fff;
  border: 2px solid #000;
  padding: 0.28rem 0.45rem;
  font: inherit;
  text-decoration: underline;
}

button {
  color: #111;
  text-decoration: none;
  cursor: pointer;
}

#wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  grid-auto-flow: dense;
  gap: 3px;
  padding: 3px;
}

#sentinel {
  height: 60vh;
}

.tile {
  margin: 0;
  border: 2px solid #000;
  background: #fff;
  transform: rotate(var(--tilt));
}

.tile:nth-child(5n) {
  grid-column: span 2;
  grid-row: span 2;
}

.tile:nth-child(11n) {
  grid-column: span 3;
}

.tile img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 82px;
  aspect-ratio: 1;
  object-fit: cover;
  filter: contrast(1.2) saturate(0.75);
}

.load-error {
  margin: 1rem;
  padding: 1rem;
  border: 4px solid var(--hot);
  background: #fff;
  color: #000;
  font: 1rem "Courier New", monospace;
}

body.plain {
  background: #fff;
}

body.plain::before {
  opacity: 0;
}

body.plain .tile {
  transform: none;
}

@media (max-width: 540px) {
  #wall {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 2px;
    padding: 2px;
  }
}