body {
  font-family: Comic Sans MS, Verdana, sans-serif;
  color: #fff;
  margin: 0;
  padding: 0;
  background-color: black;
}

/* Wrapper keeps everything centered + limited */
.site-wrapper {
  max-width: 900px;
  margin: 0 auto;
  background: #000000bb;
  padding: 10px;
}

/* Flexbox instead of table */
.layout {
  display: flex;
  gap: 10px;
  flex-wrap: wrap; /* allows stacking on small screens */
  border: 5px ridge #ff00ff;
  background-color: #000000aa;
  padding: 10px;
}

/* Sidebar flexes but tries to stay ~200px */
.sidebar {
  flex: 1 1 200px;
  background: #330033;
  padding: 6px;
  color: #fff0f5;
  font-size: 12px;
  min-width: 160px; /* safety */
}

/* Content takes up rest of space */
.content {
  flex: 3 1 500px;
  padding: 10px;
  background: #111;
  color: #fff;
  font-size: 14px;
  min-width: 250px;
}

/* Posts styled with blinking borders */
.post {
  border: 3px dashed #ff66ff;
  margin-bottom: 16px;
  padding: 8px;
  background: #220022;
  animation: flash 1s infinite alternate;
}

@keyframes flash {
  from { border-color: magenta; }
  to { border-color: cyan; }
}

/* Rainbow text effect */
.rainbow {
  background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
  -webkit-background-clip: text;
  color: transparent;
  animation: rainbowMove 2s linear infinite;
}

@keyframes rainbowMove {
  from { background-position: 0; }
  to { background-position: 200px; }
}

a {
  color: lime;
  text-decoration: blink;
}

a:hover {
  color: hotpink;
}