:root {
  --accent-green-1: #bdf5cf;
  --accent-green-2: #7fe9ad;
  --accent-green-3: #5fdc93;
  --card-bg: rgba(255, 255, 255, 0.55);
  --sidebar-bg: rgba(255, 255, 255, 0.72);
  --card-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  --card-hover-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

#footer {
  background: linear-gradient(135deg, var(--accent-green-1), var(--accent-green-2), var(--accent-green-3)) !important;
}

#card-info-btn,
#rightside > div > button,
#rightside > div > a,
#pagination .page-number.current {
  background: linear-gradient(135deg, var(--accent-green-1), var(--accent-green-2), var(--accent-green-3)) !important;
  border: none;
}

#card-info-btn:hover,
#rightside > div > button:hover,
#rightside > div > a:hover,
.layout .pagination > *:not(.space):hover {
  background: linear-gradient(135deg, #a9f0c5, #6fe3a1, #4fd58b) !important;
}

/* Glassmorphism effect on cards */
.card-widget,
.recent-post-item,
#post,
#page,
#archive .article,
.tag-cloud-list,
.category-list,
.pagination {
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Home hero: avatar above title, centered */
#page-header.full_page #site-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

#page-header.full_page #site-info::before {
  content: "";
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: url("/img/avatar.jpg") center / cover no-repeat;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
  border: 4px solid rgba(255, 255, 255, 0.7);
}

@media (max-width: 768px) {
  #page-header.full_page #site-info::before {
    width: 84px;
    height: 84px;
    border-width: 3px;
  }
}

/* Home hero: make center title different from nav title */
#page-header.full_page #site-title {
  position: relative;
  visibility: hidden;
}

#page-header.full_page #site-title::after {
  content: "👋 Welcome to My Blog";
  visibility: visible;
  display: block;
}