*,
::before,
::after {
  box-sizing: border-box;
}

body {
  color: #fff;
  background-color: #222;
  font-family: sans;
  margin-top: 5em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body a {
  color: white;
}
body h1 {
  text-align: center;
  margin-bottom: 0;
}
body .description {
  font-style: italic;
  margin-bottom: 3em;
}

#inputForm {
  width: min(100%, 15em);
}
#inputForm * {
  width: 100%;
}
#inputForm div {
  display: flex;
}
#inputForm div input {
  padding: 1em;
}
#inputForm div [type=submit] {
  flex: 0;
}
#inputForm details, #inputForm input {
  margin-bottom: 1em;
}
#inputForm #filters {
  flex-direction: column;
}
#inputForm #filters label {
  text-transform: capitalize;
}
#inputForm #filters [type=checkbox] {
  width: initial;
  margin-bottom: initial;
}

#calendar {
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  max-width: 100%;
  scroll-behavior: smooth;
  mask-image: linear-gradient(to right, transparent 0%, black 1em, black calc(100% - 1em), transparent 100%);
}
#calendar .year {
  --day-size: 1em;
  --gap: 2px;
  --p: 1em;
  --pl: 4.5em;
  --weekday-width: 1.5em;
  position: relative;
  padding: var(--p);
  padding-left: var(--pl);
  margin: 1em;
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-columns: var(--day-size);
  grid-auto-flow: column;
  grid-template-columns: var(--weekday-width) auto;
  justify-content: left;
  gap: var(--gap);
  background: #363440;
  border-radius: 0.5em;
  min-width: calc(var(--pl) + var(--weekday-width) + 54 * (var(--day-size) + var(--gap)) + var(--p));
}
#calendar .year::before {
  content: attr(data-year);
  position: absolute;
  left: 0.1em;
  height: 100%;
  text-align: center;
  writing-mode: tb;
  font-size: 3em;
}
#calendar .year * {
  width: var(--day-size);
  height: var(--day-size);
}
#calendar .year .day {
  --ratio: calc(var(--x) / var(--max));
  border-radius: 0.2em;
  background-color: #080064;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQEAAAABCAYAAADemxtJAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAKdJREFUOI2NkEESwyAMAxc+3o8XqQeYYMBNckJC9hpTvvoYGdsgQzi9eIH2u9NPluZ9ws/nrT0ZP33T1nO/j0AFu2JV7ApB2xUyfdWW574kf1dbzloN/4b7t/aZezcjry2I/s8GjFHQh7dRyGx6f2AoZMaDH3i7D9ow5iV8GPOnvniLn/p6jzN+sm/k7/se+91l/b65IQtZtHHKQmjJ1rxNz54nvFHzA4thDpAaUxnxAAAAAElFTkSuQmCC);
  background-size: cover;
  background-position-x: calc(256 * var(--day-size) * (var(--ratio) - 1));
}
#calendar .year .day:hover {
  transform: scale(1.3);
  box-shadow: 0 0 1em gold;
}
#calendar .year span {
  font-family: monospace;
}

/*# sourceMappingURL=style.css.map */