@font-face { font-family: "VT323"; src: url(assets/vt323.woff2) format("woff2"); }
@font-face { font-family: "Press Start 2P"; src: url(assets/press-start-2p.woff2) format("woff2"); }

:root { --maroon: #861f41; --dark: #4a0f24; --orange: #e5751f; --paper: #f4ecd8; --ink: #2a1a14; }
* { box-sizing: border-box; }

body {
  margin: 0; padding: 1rem;
  background: var(--maroon) url(assets/crimson.svg) 0 0 / 96px 96px;
  image-rendering: pixelated;
  color: var(--ink); font: 22px/1.35 "VT323", monospace;
}
.wrap { max-width: 46rem; margin: 0 auto; }

header { text-align: center; margin-bottom: 1rem; }
header img.banner {
  display: block; width: 100%; height: auto; border: 6px solid #000;
  outline: 4px solid var(--orange); transform: rotate(-0.6deg);
}
h1 {
  font: 2rem/1.2 "Press Start 2P", monospace; color: #fff; margin: 1.2rem 0 .3rem;
  text-shadow: 4px 4px 0 #000;
}
.tag { color: #ffd9b0; margin: 0; font-size: 1.3rem; text-shadow: 2px 2px 0 #000; }

nav { margin: 1rem 0; text-align: center; }
nav a {
  display: inline-block; margin: .2rem; padding: .1rem .8rem; color: #fff; text-decoration: none;
  background: #6b6b6b; border: 3px solid; border-color: #bbb #333 #333 #bbb; text-shadow: 2px 2px 0 #222;
}
nav a:hover, nav a.here { background: var(--orange); color: #000; text-shadow: none; }
nav a:nth-child(even) { transform: rotate(.8deg); }
nav a:nth-child(odd) { transform: rotate(-.6deg); }

section, .status {
  background: var(--paper); border: 4px solid #000; box-shadow: 6px 6px 0 #0008;
  padding: .6rem 1rem 1rem; margin: 1.2rem 0;
}
section:nth-of-type(odd) { transform: rotate(.3deg); }
section:nth-of-type(even) { transform: rotate(-.35deg); }
h2 { font: 1.05rem/1.4 "Press Start 2P", monospace; color: var(--maroon); margin: .8rem 0 .4rem; }
h2 + p, h3 + p { margin-top: 0; }
h3 { font-size: 1.5rem; color: var(--dark); margin: .8rem 0 0; text-decoration: underline wavy var(--orange); }
p, li { margin: .5rem 0; }
ul, ol { padding-left: 1.4rem; }
a { color: #0a4fb0; }
a:visited { color: #6a2a8a; }
code, .ip {
  background: #2a1a14; color: #7dff7d; padding: 0 .4rem; font-family: "VT323", monospace;
}
.ip { display: inline-block; font-size: 1.6rem; padding: .1rem .7rem; border: 3px solid #000; }
.note { color: #6a4a3a; font-size: 1.1rem; }
.scrawl { color: var(--maroon); transform: rotate(-2deg); display: inline-block; }

.worlds { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .8rem; }
.worlds div { background: #fff8e8; border: 3px dashed var(--maroon); padding: .1rem .7rem .5rem; }
.worlds h3 { margin-top: .4rem; }

.status { background: #1c1c1c; color: #ddd; border-color: #888; transform: rotate(.5deg); }
.status h2 { color: var(--orange); }
.status .big { font-size: 1.7rem; }
.status .up { color: #7dff7d; }
.status .down { color: #ff6a6a; }
.status p { margin: .2rem 0; }
.status .small { color: #999; font-size: 1.05rem; }

footer { text-align: center; color: #ffd9b0; text-shadow: 2px 2px 0 #000; margin: 2rem 0 1rem; }
footer a { color: #fff; }

header img.title { display: block; margin: 0 auto; max-width: 100%; height: auto; image-rendering: auto; transform: rotate(-0.6deg); filter: drop-shadow(4px 4px 0 #000); }
header h1 img.title { margin-bottom: .4rem; }