body {
  background-color: #8b8680;
  font-family: "Segoe UI", sans-serif;
}

/* Make embedded images responsive with a max width */
.responsive-logo {
  max-width: 100px;
  width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
}

/* Cards styling */
.card {
  border-radius: 1rem !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  background-color: #f8f9fa !important;
}

/* Card body padding */
.card .card-body {
  padding: 1.5rem !important;
}

/* Badge font */
.card .badge {
  font-weight: 600 !important;
  font-size: 0.9rem !important;
}

.bi {
  color: #555; /* default gray tone */
}

.bi-difficulty { color: orange; }
.bi-platform   { color: blue; }
.bi-sensor     { color: red; }
.bi-power      { color: green; }
.bi-time       { color: teal; }





.project-card {
  /* Setup transition for opacity and max-height */
  transition: opacity 1s ease, max-height 0.3s ease;
  overflow: hidden;
  max-height: 1000px; /* large enough for full content */
  opacity: 1;
}

.project-card.hidden {
  opacity: 0;
  max-height: 0;
  pointer-events: none; /* disable interactions while hidden */
  margin: 0;
  padding: 0;
  border: 0;
}