MediaWiki:New main page.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* === Layout === */
.main-banner {
  text-align: center;
  padding: 1em;
  background-color: #333;
  color: red;
}
.banner-title {
  font-size: 2em;
  margin-top: 0.5em;
}

.search-area {
  text-align: center;
  background: #222;
  padding: 0.5em;
  margin-top: 1em;
  color: white;
}

.intro-text {
  max-width: 800px;
  margin: 1em auto;
  text-align: center;
  color: white;
}

/* Info Boxes Row */
.info-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1em;
  margin: 2em auto;
  max-width: 1000px;
}
.info-box {
  flex: 1 1 300px;
  background: #444;
  color: white;
  padding: 1em;
}

/* Lower section */
.lower-row {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
  margin: 2em auto;
  max-width: 1000px;
  gap: 2em;
}

/* About box should appear first on small screens */
.about-box {
  flex: 1 1 250px;
  background: #333;
  color: white;
  padding: 1em;
  order: -1; /* Makes it appear first when wrapped */
}

/* Grid of links */
.link-grid {
  flex: 3 1 600px;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}
.link-tile {
  flex: 1 1 120px;
  background: #222;
  color: white;
  padding: 1em;
  text-align: center;
  min-width: 100px;
}

/* === Responsive tweaks === */
@media (max-width: 768px) {
  .info-row {
    flex-direction: column;
  }
  .info-box {
    flex: 1 1 auto;
  }

  .lower-row {
    flex-direction: column;
  }
}