.simple-calendar {
  background-color: var(--whitesmoke);
  padding: 1rem;
  border-radius: 0.5rem;
  height: 100%;

  .calendar-heading nav {
    display: inline-block;
  }

  .calendar-heading time {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--dark-blue);
    text-align: center;
  }

  .day {
    height: 80px;
    padding: 0.5rem;
    text-align: center;
    border: 1px solid #ebbdc1; /* Add a light border for clarity */
  }

  .wday-0 {}

  .wday-1 {}

  .wday-2 {}

  .wday-3 {}

  .wday-4 {}

  .wday-5 {}

  .wday-6 {}

  .today {
    color: var(--dark-blue);
    background: var(--blue);
  }

  .past {
    color: var(--light);
  }

  .future {
    color: var(--dark-teal);
    background: var(--white);
  }

  .start-date {}


  .table {
    width: 100%;
  }

  .calendar-heading>nav {
    justify-content: space-between;
    display: flex;
  }

  .prev-month {}

  .next-month {}

  .has-events {
    background-color: var(--teal);
    color: var(--dark-teal);
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  thead th {
    background-color: #8B3E46; /* Background color for headers */
    color: #FFF8F9; /* Text color for headers */
    text-align: center; /* Horizontal alignment */
    vertical-align: middle; /* Vertical alignment */
    padding: 10px; /* Add some padding for better appearance */
    border: 1px solid #ebbdc1; /* Add a light border for clarity */
  }
}