body {
  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.year-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.month-box {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  /* Remove background and color from here */
}

.month-header {
  font-weight: bold;
  text-align: center;
  margin-bottom: 0.5rem;
  background: #212529;
  color: #fff;
  border-radius: 4px;
  padding: 0.25rem 0;
}

.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: 0.75rem;
  gap: 0.25rem;
}

.day-name {
  text-align: center;
  font-weight: bold;
  color: #fff;
  background: rgba(33,37,41,0.7); /* bg-dark with opacity */
  border-radius: 3px;
  padding: 2px 0;
}

.day {
  text-align: center;
  padding: 0.25rem;
}

.empty {
  visibility: hidden;
}
.faded-year {
  color: #888;
  opacity: 0.5;
  font-size: 1.1rem;
}