/* Täytä koko näyttö, ei marginaaleja eikä skrollia */
html, body {
  margin: 0;
  padding: 0;
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;
  font-family: sans-serif;
  background-color: #c8dceb;
}

/* Koko ruudun kokoinen kontti */
#container {
  position: fixed;
  inset: 0;              /* top: 0; right: 0; bottom: 0; left: 0; */
  width: 100dvw;
  height: 100dvh;
  margin: 0;
  padding: 0;

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

/* Kalenterialue täyttää containerin */
#calendar {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Taustakuva täyttää koko ruudun */
#calendar img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* peittää koko alan, voi hieman leikata reunoista */
  display: block;        /* poistaa kuvien inline-välin */
}

/* Ovien yleinen tyyli (jos käytössä) */
.door {
  border: 1px solid #fff;
  width: 23%;
  height: 15.25%;
  position: absolute;
  color: #fff;
  font-size: 1.5em;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
}

.door:not(.disabled):hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
}

.disabled {
  border-color: #000;
  background-color: rgba(196, 254, 171, 0.15);
  color: #000;
  cursor: default;
}

/* Modal peittää koko ruudun */
#modal {
  position: fixed;
  inset: 0;
  width: 100dvw;
  height: 100dvh;
  margin: 0;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.78);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;          /* jos sisältö on korkeampi kuin ruutu */
}

/* Modalin sulkunappi */
#modal a {
  color: #fff;
  font-size: 2.5em;
  position: absolute;
  top: 2%;
  right: 2%;
  text-decoration: none;
}

#modal a:hover {
  color: #a19a9a;
}

/* Modalin kuva */
#modal img {
  border: 1px solid #fff;
  max-width: 95dvw;
  max-height: 90dvh;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* (Halutessasi voit lisätä media queryjä pienille näytöille) */
/*
@media (max-width: 600px) {
  .door {
    font-size: 1.2em;
  }

  #modal img {
    width: 90%;
  }
}
*/