/* 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." */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #d6f0ee;
  color: #000000;
  font-family: Verdana, sans-serif;
}

.page-wrap {
  max-width: 960px;
  margin: 0 auto;
  background-color: #c9b8c4;
  padding-bottom: 30px;
}

/* ---- top strip ---- */
.topbar {
  background-color: #c9b8c4;
  border-bottom: 1px solid #000000;
  padding: 6px 16px;
  font-size: 0.85em;
}

/* ---- banner ---- */
.banner {
  background-color: #1ec2e8;
  text-align: center;
  padding: 40px 20px;
}

.banner h1 {
  margin: 0;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 3em;
}

.banner .tagline {
  margin: 10px 0 0;
  font-size: 1em;
}

/* ---- nav ---- */
.navbar {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  flex-wrap: wrap;
}

.navbar a {
  flex: 1;
  min-width: 100px;
  text-align: center;
  background-color: #4be04b;
  color: #000000;
  text-decoration: none;
  padding: 12px 10px;
  border-radius: 10px;
  font-weight: bold;
  border: 1px solid #000000;
}

.navbar a:hover {
  filter: brightness(1.1);
}

/* ---- layout columns ---- */
.content-row {
  display: flex;
  gap: 16px;
  padding: 0 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.left-col {
  flex: 2;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.right-col {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- shared box style ---- */
.box {
  background-color: #ffffff;
  border: 2px solid #000000;
  border-radius: 10px;
  overflow: hidden;
}

.box-header {
  background-color: #29b6e8;
  padding: 8px 12px;
  font-weight: bold;
  border-bottom: 2px solid #000000;
}

/* ---- update history box ---- */
.tabs {
  display: flex;
  gap: 6px;
  padding: 8px;
  background-color: #c9b8c4;
  flex-wrap: wrap;
}

.tab {
  border: 1px solid #000000;
  border-radius: 8px;
  padding: 6px 12px;
  background-color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85em;
}

.tab.active {
  background-color: #29b6e8;
  font-weight: bold;
}

.history-list {
  list-style: none;
  margin: 0;
  padding: 8px 12px;
  max-height: 220px;
  overflow-y: auto;
}

.history-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 0.9em;
  border-bottom: 1px solid #eee;
}

.tag {
  font-size: 0.7em;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #000000;
  white-space: nowrap;
}

.tag-blog { background-color: #7fe0e0; }
.tag-art { background-color: #ff8f6b; }
.tag-comics { background-color: #ff7fe0; }

/* ---- blog preview box ---- */
.blog-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #29b6e8;
  padding: 10px 12px;
  border-bottom: 2px solid #000000;
}

.pfp {
  width: 48px;
  height: 48px;
  background-color: #ffb27f;
  border: 1px solid #000000;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
}

.username {
  font-weight: bold;
}

.post-date {
  font-size: 0.8em;
}

.blog-title {
  margin: 12px 12px 0;
}

.blog-text {
  background-color: #0d5f9c;
  color: #ffffff;
  margin: 12px;
  padding: 14px;
  border-radius: 8px;
  min-height: 100px;
}

.blog-text a {
  color: #bfe8ff;
}

/* ---- image box ---- */
.image-box {
  background-color: #ede91a;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-box img {
  max-width: 100%;
  height: auto;
}

/* ---- "view all posts" link on the homepage preview ---- */
.view-all-link {
  display: block;
  text-align: right;
  margin: 0 12px 12px;
  font-weight: bold;
  font-size: 0.9em;
}

/* ---- blog archive page (blog.html) ---- */
.blog-archive-col {
  flex: 1;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.archive-heading {
  margin: 0;
}

/* ---- about / things i like box ---- */
.like-list {
  margin: 0;
  padding: 10px 12px 14px 28px;
}

.like-list li {
  padding: 2px 0;
}