/* calendar block with margins */
ul.cal {
  --day-width: calc(min(10em, 90%/7));
  --day-height: 7em;
  --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;
  border: 1px solid black;
  border-radius: 5px;
  background: white;
  margin: 0.1em 0.2em 0;
  text-align:center;
  font-weight: bold;
}

/* 
  Seems like using --day-width won't work, especially for percentages since
  the base used for the percentage isn't the same in the two contexts, and calc
  is evaluated at time of use (so the percentages are recalculated). The
  percentage version was trial and error to tune size. For the em+px measures
  uses the sum of width, margins, padding, and borders
*/
span.multiday {
  width: calc(var(--multiday) * min(10.2em + 2px,12.5%) - 0.8em - 2px);
}

/* 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}