:root {
  --calendar-background: rgb(0, 90, 56);
  --calendar-text: rgb(255, 255, 255);
  --calendar-text-link: rgb(245, 234, 135);

  --calendar-door: rgb(201, 23, 10);
  --calendar-door-background: rgb(5, 56, 37);
  --calendar-door-highlight: rgb(255, 217, 0);
  --calendar-door-highlight-radius: 2em;
  --calendar-door-size: 160px;

  --calendar-border: white;
  --calendar-border-sealed: gray;
  --calendar-border-width: 2px;

  color-scheme: light dark;
}

body {
  text-align: center;
  margin: 0;
}

.calendar {
  color: var(--calendar-text);
  background-color: var(--calendar-background);
  padding: 30px;
  text-align: initial;

  display: inline-grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;

  box-shadow: 0 0 20px black;
  margin: 10px; /* So shadow is not cut off */
}

/*
Where the media query widths come from:

- Each door has a width of 164px.
- Between two doors is a gap of 20px.
- The calendar has padding of 30px and a margin of 10px.

Thus the width of the page as a function of the number of columns is:

f(n) = 10 + 30 + 164*n + 20*(n-1) + 30 + 10
     =      30 + 164*n + 20*n     + 30
     =      60 + 184*n

f(5) = 980 (the default)
f(4) = 796
f(3) = 612
f(2) = 428
f(1) = 244
*/

@media (max-width: 980px) {
  .calendar {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 796px) {
  .calendar {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 612px) {
  .calendar {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 428px) {
  .calendar {
    grid-template-columns: 1fr;
  }
}

.slot {
  width: var(--calendar-door-size);
  height: var(--calendar-door-size);
  border: var(--calendar-border-width) solid var(--calendar-border);
  display: flow-root;
}

.content {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}

/*****************/
/* Calendar name */
/*****************/

.name {
  background-color: var(--calendar-door);
}

.name h1 {
  font-size: 1.5em;
  margin: 10px;
}

/*****************/
/* Door contents */
/*****************/

.door {
  border-color: var(--calendar-border-sealed);
  border-style: dashed;
}

.door.open {
  border-color: var(--calendar-border);
  border-style: solid solid solid dashed;
}

.door .content {
  background-color: var(--calendar-door-background);
}

/*
The ::before pseudo element is necessary so the shadow shows up on top of the
door contents.
*/
.door::before {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  box-shadow: 0 0 20px inset black;
  pointer-events: none;
}

.door p {
  margin: 10px;
  text-align: center;
}

.door a {
  color: var(--calendar-text-link);
}

.door img {
  display: block;
}

/*******************/
/* Hinge mechanism */
/*******************/

input {
  display: none;
}

.door {
  position: relative; /* For hinge */
}

.hinge {
  position: absolute;
  top: 0;

  width: 0;
  height: inherit;

  transition:
    transform 1s ease-out,
    filter 1s ease-out;
}

input:checked ~ .hinge {
  transform: perspective(50em) rotateY(-130deg);
  filter: brightness(80%);
}

.flap {
  width: var(--calendar-door-size);
  height: inherit;
  background-color: var(--calendar-door);

  display: flex;
  align-items: center;
  justify-content: center;
}

.flap span {
  font-size: 3em;
  font-weight: bold;

  width: var(--calendar-door-highlight-radius);
  height: var(--calendar-door-highlight-radius);
  border: 5px solid var(--calendar-door-highlight);
  border-radius: var(--calendar-door-highlight-radius);

  display: flex;
  justify-content: center;
  align-items: center;
}