body {
  margin: 0;
  padding: 0;
  background-image: url('rpg_space.png');
  background-repeat: repeat;
  background-attachment: fixed;
  color: black;
  font-family: Verdana, sans-serif;
}

#introduction {
  text-align: center;
  margin: 2rem auto;        /* top margin + auto left/right = centered block */
  padding: 1.5rem;
  border: 2px solid #666;
  background-color: black;
  color: white;
  border-radius: 4px;
  max-width: 600px;         /* prevents overly wide box on large screens */
  width: fit-content;       /* shrinks to content width (like inline-block) */
}

#header {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 1rem 0;
  gap: 16px; /* space between sun.gif and logo */
  box-sizing: border-box;
}

#blueceiling {
  text-align: center;
  margin-top: 10.2rem; /* 👈 adds space below the links */
  margin-bottom: 1.5rem;
}

#blueceiling img {
  max-width: 600px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.side-gif {
  width: 235px;        /* Adjust if your sun.gif should be larger/smaller */
  height: auto;
  flex-shrink: 0;
}

#pleroma-logo {
  max-width: 600px;   /* 👈 Smaller, controlled size */
  height: auto;
  max-height: 300px;   /* Extra safety cap */
}
#main-links {
  text-align: center;
  margin: -3.5rem 0;
  font-family: monospace; /* or Verdana to match body */
}

#main-links a {
  color: white;
  text-decoration: none;
  margin: 0 12px;
  padding: 4px 8px;
  border: 1px solid #555;
  border-radius: 3px;
}

#main-links a:hover {
  background-color: #222;
}
#footer-gif {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

#footer-gif img {
  max-width: 300px; /* or whatever fits your gif */
  height: auto;
  display: block;
  margin: 0 auto;
}
#chat-box {
  text-align: center;
  margin: 1.5rem auto;
  padding: 1.5rem;
  border: 2px solid #666;
  background-color: black;
  color: white;
  border-radius: 4px;
  max-width: 800px;       /* or 600px if you prefer consistency */
  width: fit-content;     /* 👈 key: matches #introduction */
}
.blinkie-row {
  position: fixed;
  left: 0;
  width: 100%;
  background: transparent;
  padding: 6px 0;
  overflow: hidden;
  z-index: 998;
}
.blinkie-row {
  position: fixed;
  left: 0;
  width: 100%;
  background: transparent;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

#blinkie-bar-top,
#blinkie-bar-middle,
#blinkie-bar-bottom {
  position: fixed;
  left: 0;
  width: 100%;
  background: transparent;
  padding: 6px 0;
  border: none;
}

#blinkie-bar-top { bottom: 120px; z-index: 1000; }
#blinkie-bar-middle { bottom: 60px; z-index: 999; }
#blinkie-bar-bottom { bottom: 0; z-index: 998; }

#blinkie-bar-top img,
#blinkie-bar-middle img,
#blinkie-bar-bottom img {
  height: 48px;
  vertical-align: middle;
}