/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url("bluesun.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.site-header {
  text-align: center;
  margin-top: 30px;
}

.site-title {
  font-size: 64px;
  color: aqua;
  letter-spacing: 6px;
  margin: 0;
}.site-tagline {
  margin-top: 12px;
  font-size: 20px;
  color: white;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}.gif-row {
  text-align: center;
}.board-scroll {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  padding: 25px;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}

.board {
  display: flex;
  flex-direction: column;
  align-items: center;

  text-decoration: none;
  color: aqua;
  font-weight: bold;
  font-size: 18px;
}

.board img {
  max-width: 120px;
  max-height: 120px;
  margin-bottom: 10px;
  border: 2px solid aqua;
  border-radius: 8px;
}

.board:hover img {
  filter: brightness(1.2);
}

.board:hover span {
  text-decoration: underline;
}.board-header {
  text-align: center;
  color: aqua;
  margin-bottom: 30px;
}

.catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
  padding: 20px;
}

.thread {
  background: rgba(0,0,0,0.6);
  border: 2px solid aqua;
  border-radius: 8px;
  padding: 10px;

  text-decoration: none;
  color: white;
  text-align: center;

  font-size: 14px;
}

.thread img {
  max-width: 100%;
  max-height: 120px;
  margin-bottom: 8px;
}

.thread span {
  display: block;
  color: aqua;
  font-size: 12px;
  margin-top: 4px;
}

.thread:hover {
  background: rgba(0,255,255,0.15);
}.thread {
  max-width: 900px;
  margin: 40px auto;
}

.post {
  background: rgba(0,0,0,0.6);
  border: 1px solid aqua;
  padding: 14px;
  margin-bottom: 18px;
  color: white;
  font-size: 15px;
}

.post.op {
  border-width: 2px;
}

.post-header {
  font-size: 13px;
  margin-bottom: 8px;
  color: #aaa;
}

.name {
  color: aqua;
  font-weight: bold;
}

.post-id {
  margin-left: 10px;
}

.date {
  margin-left: 10px;
  font-style: italic;
}

.post img {
  max-width: 300px;
  display: block;
  margin: 10px 0;
}

.post p {
  margin: 6px 0;
  white-space: pre-wrap;
}.trippy-gifs {
  margin: 40px 0;
  text-align: center;
}

.trippy-gifs img {
  margin: 0 10px;
  width: 96px;          /* scale up small GIFs */
}.about-image {
  margin: 40px 0;
  text-align: center;
}

.about-image img {
  width: 120px;              /* scale small GIFs */
}.board-cartoons {
  color: aqua;
  font-family: "Comic Sans MS", "Trebuchet MS", sans-serif;
}