body {
  margin: 0;
  font-family: "Berkeley Mono Variable", monospace;
  text-transform: uppercase;

  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

#container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}

#header {
  font-size: 46pt;
  margin: 0;
  padding: 0;
  line-height: 46pt;
}

#day-grid {
  display: grid;
  width: 100%;
  height: 20px;
  grid-template-columns: repeat(7, 1fr);
  font-size: 10pt;
  gap: 5pt;
}

#cal-inner {
  width: 100%;
  flex-grow: 1;
}

#cal-grid {
  display: grid;
  height: calc(100% - 20px);
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 5pt;
}

.cal-day {
  font-size: 18pt;
  background-color: #f0f0f0;
  color: rgba(0, 0, 0, 0.4);
  padding: 5pt;
  padding-top: 2pt;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  border-radius: 5pt;
  border: 1px solid var(--month-color);
}

.cal-day.other-month {
  background-color: #eee;
  color: rgba(0, 0, 0, 0.2);
  border: 1px solid #ccc;
}