/* 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 {
 /* --- base --- */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  color: #444;
  background: linear-gradient(135deg, #ffe6f2, #e6f0ff, #f3ffe6);
  background-attachment: fixed;
}

/* pastel frame */

.page-wrapper {
  display: flex;
  min-height: 100vh;
  padding: 20px;
}

/* --- sidebar --- */

.sidebar {
  width: 260px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(150, 150, 200, 0.25);
  border: 2px solid #ffd6f0;
  position: sticky;
  top: 20px;
  align-self: flex-start;
}

.avatar-box {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.avatar-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #ffe6f2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  border: 2px dashed #ffb3d9;
}

.site-title {
  text-align: center;
  font-size: 22px;
  margin: 10px 0 4px;
  color: #ff66a3;
  text-shadow: 1px 1px #fff;
}

.tagline {
  text-align: center;
  font-size: 12px;
  color: #777;
  margin-bottom: 16px;
}

.nav-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.nav-links a {
  text-decoration: none;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f7f2ff;
  border: 1px solid #e3d4ff;
  color: #555;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
}

.nav-links a:hover {
  background: #ffe6f2;
  box-shadow: 0 0 0 2px #ffb3d9;
  transform: translateY(-1px);
}

.status-box,
.badge-box {
  background: #fffafc;
  border-radius: 14px;
  border: 1px solid #ffd6f0;
  padding: 10px;
  margin-bottom: 12px;
  font-size: 12px;
}

.status-box h2 {
  margin: 0 0 4px;
  font-size: 14px;
  color: #cc5c96;
}

.badge-title {
  margin: 0 0 4px;
  font-size: 12px;
  color: #b37ac8;
}

.badge-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.badge-row span {
  padding: 3px 7px;
  border-radius: 999px;
  background: #ffeef9;
  border: 1px dashed #ffb3d9;
}

/* --- main content --- */

.main-content {
  flex: 1;
  margin-left: 20px;
}

.welcome-card,
.update-card,
.grid-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 16px;
  border: 2px solid #e6ddff;
  box-shadow: 0 3px 10px rgba(160, 160, 210, 0.2);
}

.welcome-card h2 {
  margin-top: 0;
  font-size: 20px;
  color: #b276d3;
}

.update-card h3,
.grid-card h3 {
  margin-top: 0;
  font-size: 18px;
  color: #6d8ddc;
}

.update-list {
  list-style: none;
  padding-left: 0;
  font-size: 14px;
}

.update-list li {
  margin-bottom: 6px;
}

.update-date {
  font-weight: bold;
  color: #ff66a3;
  margin-right: 6px;
}

/* three-column pastel grid */

.grid-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.button {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #ffb3d9;
  border: 1px solid #ff66a3;
  color: #5a3350;
  font-size: 13px;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(200, 120, 150, 0.4);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
}

.button:hover {
  background: #ffcce5;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(200, 120, 150, 0.5);
}

/* footer */

.site-footer {
  margin-top: 18px;
  font-size: 11px;
  text-align: center;
  color: #777;
  opacity: 0.9;
}

/* --- collage-style floating stickers --- */

.sticker {
  position: fixed;
  font-size: 26px;
  opacity: 0.55;
  pointer-events: none;
}

.sticker-1 {
  top: 30px;
  right: 40px;
}

.sticker-2 {
  bottom: 40px;
  left: 40px;
}

.sticker-3 {
  bottom: 120px;
  right: 80px;
}

/* --- responsive tweaks --- */

@media (max-width: 800px) {
  .page-wrapper {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    position: static;
    margin-bottom: 12px;
  }

  .main-content {
    margin-left: 0;
  }

  .sticker {
    display: none; /* optional: hide stickers on very small screens */
  }
}