/* AEONCRAFT — chrome angel / cyber sigil / y2k pixel */
body {
  font-family: "DotGothic16", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
    Osaka, "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", helvetica, sans-serif;
  font-size: 1.05em;
  max-width: 46em;
  margin: auto;
  color: #1a2236;
  background-image:
    linear-gradient(rgba(219, 230, 247, 0.92), rgba(233, 238, 250, 0.92),
      rgba(244, 240, 252, 0.92), rgba(224, 233, 248, 0.92)),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(150, 168, 200, 0.18) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(150, 168, 200, 0.18) 23px 24px);
  background-attachment: fixed;
}

/* faint CRT scanlines over everything */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent 0 3px, rgba(120, 140, 175, 0.05) 3px 4px);
  z-index: 999;
}

img {
  display: block;
  margin: auto;
  max-width: 22em;
  border: 1px solid #8fa3c4;
  image-rendering: pixelated;
  box-shadow: 0 0 0 3px #eef3fb, 0 0 0 4px #aebfda;
}
img:hover {
  border: 1px solid #7d5fd3;
  box-shadow: 0 0 0 3px #eef3fb, 0 0 0 4px #7d5fd3, 0 0 18px rgba(125, 95, 211, 0.4);
}
img.banner {
  max-width: 500px;
  width: 100%;
  border: 1px solid #6b7fa3;
  padding: 0;
}

.sigil-line {
  text-align: center;
  color: #8fa3c4;
  letter-spacing: 0.8em;
  margin: 0.2em 0 0.6em;
  text-shadow: 0 1px 0 #fff;
}
.footer-sigil { margin: 1.5em 0 2em; }

.m_box {
  border: 1px solid #46557a;
  margin: 1em;
  background: linear-gradient(180deg, #ffffff, #f2f6fd);
  box-shadow: 3px 3px 0 rgba(70, 85, 122, 0.25);
}
.m_box_red {
  border: 1px solid #7d5fd3;
  margin: 1em;
  background: linear-gradient(180deg, #fdfbff, #f3edfd);
  box-shadow: 3px 3px 0 rgba(125, 95, 211, 0.25);
}

a { color: #2d4bc4; text-decoration: underline; }
a:hover { color: #7d5fd3; text-decoration: underline; }

/* chrome metallic title bars */
.m_box_bar {
  background: linear-gradient(180deg, #f4f8ff 0%, #c9d6ea 38%, #7d8fb0 50%,
    #4a5a7e 52%, #93a5c4 78%, #d7e1f2 100%);
  color: #16203a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
  border-bottom: 1px solid #46557a;
}
.m_box_red .m_box_bar {
  background: linear-gradient(180deg, #f8f4ff 0%, #d8caf2 38%, #9a7fd6 50%,
    #5d3fa8 52%, #ab93de 78%, #e6dcf8 100%);
  border-bottom: 1px solid #7d5fd3;
}

h1, h2 {
  margin: 0.15em 0.4em;
  font-family: "Press Start 2P", "DotGothic16", monospace;
  font-size: 0.85em;
  font-weight: normal;
  padding: 0.35em 0;
  letter-spacing: 0.02em;
}
h3 {
  margin: 0.6em 0.4em 0.1em;
  font-family: "Press Start 2P", "DotGothic16", monospace;
  font-size: 0.7em;
  font-weight: normal;
  text-decoration: underline;
  text-align: center;
  color: #46557a;
}

p { margin: 0.5em; margin-left: 1em; color: #1a2236; }
p.jp { color: #5a6a8c; text-align: center; }

hr {
  border: 0;
  border-top: 1px solid #aebfda;
  margin: 0.8em 1em;
}

li { margin-left: 0.3em; }
ul { list-style-type: circle; }

.centered-text { text-align: center; }

.connect-button {
  display: inline-block;
  margin: 1em auto;
  padding: 0.7em 1.2em;
  font-family: "Press Start 2P", monospace;
  font-size: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #ccd9ec 40%, #8fa3c4 50%,
    #5c6f96 52%, #a5b7d4 85%, #e6edf8 100%);
  color: #16203a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  border: 2px solid #46557a;
  box-shadow: 3px 3px 0 rgba(70, 85, 122, 0.35);
  cursor: pointer;
  white-space: pre-line;
  text-decoration: none;
  vertical-align: middle;
}
.connect-button:hover {
  background: linear-gradient(180deg, #ffffff 0%, #ded1f6 40%, #ab93de 50%,
    #6c4fba 52%, #baa5e6 85%, #f0e9fc 100%);
  color: #2a1a52;
  border-color: #5d3fa8;
  box-shadow: 3px 3px 0 rgba(93, 63, 168, 0.4), 0 0 16px rgba(125, 95, 211, 0.5);
}

/* modpack grid */
.mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13em, 1fr));
  gap: 0.6em;
  padding: 0.6em 1em;
}
.mod-card {
  border: 1px solid #8fa3c4;
  background: linear-gradient(180deg, #ffffff, #eaf0fa);
  padding: 0.5em 0.6em;
  box-shadow: 2px 2px 0 rgba(70, 85, 122, 0.2);
}
.mod-card b {
  display: block;
  font-size: 0.9em;
  color: #2b3a5e;
}
.mod-card span {
  display: block;
  font-size: 0.78em;
  color: #5a6a8c;
  margin-top: 0.2em;
}
.mod-card:hover {
  border-color: #7d5fd3;
  box-shadow: 2px 2px 0 rgba(125, 95, 211, 0.35);
}

.devlog-entry {
  border-left: 3px solid #aebfda;
  margin: 0.8em 1em;
  padding-left: 0.4em;
}
.devlog-entry:hover { border-left-color: #7d5fd3; }

@media only screen and (max-width: 600px) {
  img { width: 100%; }
  body { width: 100%; }
  h1, h2 { font-size: 0.72em; }
  ul { margin-right: 1em; }
}