/* calendar block with margins */
ul.cal {
  --day-width: calc(min(6.8em, 90%/7));
  --day-height: 5em;
  --multiday: 5;
  display: block;
  margin-bottom: 1em;
  counter-reset: date
}
/* clear floats after calendar is done */
ul.cal::after {
  content:"";
  display:table;
  clear:both;
}
/* size and shape of calendar date boxes */
ul.cal li {
  display:inline-block;
  page-break-inside: avoid;
  float:left;
  width: var(--day-width);
  height: var(--day-height);
  vertical-align:top;
  border: 1px solid black;
  padding: 0.1em;
}
ul.cal * { font-size: 10pt }
/* start a new week every seven days */
ul.cal li:nth-child(7n+1) {clear:left}

/* weekday listings not full height */
ul.cal li.weekday {
  height: 2ex; 
  font-weight: bold;
  text-align: center;
}

/* (optional month) and date at top of each day box */
li[month]::before, li[month]~li:not(.weekday)::before {
  display: block;
  margin: -0.1em -0.1em 0;
  padding-right: 0.2em;
  text-align: right;
  counter-increment: date;
  content: attr(month) " " counter(date);
}

/* reset day of month for new months */
@supports (counter-set:  date 0) {
  li[month] {
    counter-set: date 0;
  }
}
@supports not (counter-set:  date 0) {
  li[month] {
    counter-reset: date;
  }
}
 

/* multi-day event, default to five days */
span.multiday {
  position: absolute;
  display:block;
  /* days*(day width + padding + border) - one day border - local border & margin */
  width: calc(var(--multiday)*var(--content-width)/7 - 3px - 0.4em);
  border: 1px solid black;
  border-radius: 5px;
  background: white;
  margin: 0.1em 0.2em 0;
  text-align:center;
  font-weight: bold;
}

/* per-month background colors */
li[month="Jan"]::before, li[month="Jan"]~li:not([month])::before {background: #fff6a2}
li[month="Feb"]::before, li[month="Feb"]~li:not([month])::before {background: #cfadfd}
li[month="Mar"]::before, li[month="Mar"]~li:not([month])::before {background: #dcb2a4}
li[month="Apr"]::before, li[month="Apr"]~li:not([month])::before {background: #9bd7b3}
li[month="May"]::before, li[month="May"]~li:not([month])::before {background: #92b2f6}
li[month="Jun"]::before, li[month="Jun"]~li:not([month])::before {background: #83ebd8}
li[month="Jul"]::before, li[month="Jul"]~li:not([month])::before {background: #d8f9de}
li[month="Aug"]::before, li[month="Aug"]~li:not([month])::before {background: #55dee5}
li[month="Sep"]::before, li[month="Sep"]~li:not([month])::before {background: #dec5bf}
li[month="Oct"]::before, li[month="Oct"]~li:not([month])::before {background: #c5bff2}
li[month="Nov"]::before, li[month="Nov"]~li:not([month])::before {background: #bff2f3}
li[month="Dec"]::before, li[month="Dec"]~li:not([month])::before {background: #f2f3d0}