body {
  font-family: Arial, sans-serif;
  background-color: white;
  margin: 0;
  padding: 0;
}

#toolbar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

#calendar {
    width: 48%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 1px;
    background-color: #ccc;
    padding: 1px;
    margin: 0 auto;
}

.calendar-cell {
  background-color: #fff;
  width: 100%;
  height: 0;
  padding-bottom: calc(100% - 2px);
  position: relative;
}

.calendar-cell.marked:before,
.calendar-cell.marked:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 100%;
  background-color: #000;
}

.calendar-cell.marked:before {
  transform: rotate(45deg) translateX(-50%);
}

.calendar-cell.marked:after {
  transform: rotate(-45deg) translateX(-50%);
}

.calendar-cell:not([data-date]) {
    background-color: #ccc;
}
.calendar-cell:hover {
    background: #f1f1f1;
    cursor: pointer;
    font-weight: bold;
}

#titleBar {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin: 10px 0 0;
}

#weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    justify-items: center;
    margin-bottom: 1px;
    width: 48%;
    margin: 15px auto 10px;
}

@import "https://unpkg.com/open-props/normalize.min.css";
@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/colors-hsl.min.css";
button {
  --_radius: 1.5rem;
  --_border: 0.125rem;
  --_padding: 0.25rem;
  --_text-padding: 0.75rem 1.5rem;
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--_padding);
  border: var(--_border) solid hsl(var(--surface-3-hsl));
  border-radius: var(--_radius);
  background-attachment: fixed;
/*  background-image: conic-gradient(from calc(var(--rx) * 360deg) at calc(var(--x) * 1px) calc(var(--y) * 1px), #f2330d, #26d962, #d9269d, #2680d9, #d94426);*/
  font-size: 1rem;
  isolation: isolate;
  margin: 0 1%;
}
button:hover {
  cursor: pointer;
}
button:is(:hover, :focus-visible) {
  --_hover: 1;
}
button::before, button::after {
  z-index: -1;
  content: "";
}
button::before {
  grid-area: 1/1;
  block-size: 100%;
  inline-size: 100%;
  border-radius: calc(var(--_radius) - var(--_border) - var(--_padding));
  backdrop-filter: blur(20px) brightness(2) var(--saturate);
}
button::after {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--_radius) - var(--_border));
  background-color: hsl(var(--surface-2-hsl)/calc(1 - var(--_hover, 0) * 0.25));
  transition: background-color 0.2s;
}

.text {
  grid-area: 1/1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--_text-padding);
}
.text > svg {
  width: 1.5rem;
  aspect-ratio: 1;
}

:root {
  --surface-2-hsl: var(--gray-3-hsl);
  --surface-3-hsl: var(--gray-4-hsl);
  --saturate: saturate(0.5);
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-2-hsl: var(--gray-8-hsl);
    --surface-3-hsl: var(--gray-7-hsl);
    --saturate: saturate(1);
  }
}