@import url("https://fonts.googleapis.com/css2?family=Parisienne&display=swap");
* {
  box-sizing: border-box;
}

html, body {
  position: relative;
  font-family: sans-serif;
  width: 100%;
  height: 100%;
}

h1, h2 {
  font-weight: normal;
}

.align-right {
  text-align: right;
}

.align-center {
  text-align: center;
}

.back-button {
  position: fixed;
  left: 3vw;
  top: calc(98vh - 24px);
  width: 24px;
  height: 24px;
  z-index: 1000;
}
.back-button > svg {
  width: 24px;
  height: 24px;
  fill: white;
}

.download {
  margin-top: 1em;
}
.download a {
  text-decoration: none;
}

main {
  z-index: 100;
}

.top-index main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: cursive;
}
.top-index form input, .top-index form button {
  border-radius: 3px;
  border: 0 none;
  font-size: 1.5em;
  padding: 0.3rem 0.5rem;
}
.top-index form input[type=text] {
  width: 5ch;
}
.top-index form button {
  color: white;
  background: #044204;
}
.top-index .error {
  margin-bottom: 1em;
  padding: 0.5em 1em;
  background-color: #ff4d4d;
  border: 3px solid darkred;
  outline: 2px solid white;
  border-radius: 3px;
  color: white;
}

.calendar-index main {
  width: 100%;
  /*
  	window: 100px, gap 50px
  	6 column: 6*100 + 5*50 = 850
  	4 column: 4*100 + 3*50 = 550
  	3 column: 3*100 + 2*50 = 400
  	2 column: 2*100 + 50   = 250
   */
  max-width: calc(850px + 10vw);
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 5vh 5vw 20vh;
}
@media (max-width: 400px) {
  .calendar-index main {
    max-width: calc(400px + 10vw);
  }
}
@media (max-width: 1000px) {
  .calendar-index main {
    max-width: calc(550px + 10vw);
  }
}
.calendar-index h1 {
  margin: 2em 0 1em;
  font-family: "Parisienne", cursive;
  font-size: 3em;
  color: red;
  text-align: center;
  text-shadow: 0 0 5px #044204, 0 0 8px white;
}
.calendar-index ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 50px;
  list-style-type: none;
  padding-left: 0;
}
.calendar-index li {
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  background: #044204;
  color: #999;
  border: 1px solid black;
  border-radius: 3px;
  box-shadow: 0 0 6px 3px white;
}
.calendar-index li a {
  color: #044204;
  text-shadow: 0 0 5px white, 0 0 10px lightgreen;
}
.calendar-index li > div {
  text-shadow: 0 0 3px #044204;
}
.calendar-index li > *::after {
  content: attr(data-day);
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 105px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: darkred;
  --mask:
  	linear-gradient(to top,#0000 25px,#000 0),
  	radial-gradient(15px,#000 98%,#0000) bottom/20px 30px;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  transition: top 0.4s;
}
.calendar-index li.opened a {
  color: white;
}
.calendar-index li.opened > *::after {
  top: -90%;
  transition: top 0.4s;
}
.calendar-index li:not(.opened) a:hover {
  color: #a5f9a5;
  transition: color 0.2s;
}

.calendar-date .main {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 3em;
  padding: 5em 5vw 0;
}
.calendar-date video {
  display: block;
  max-width: min(90vw, 90vh);
}
.calendar-date audio {
  display: block;
  max-width: 100%;
  width: 90vw;
}
.calendar-date .photo img,
.calendar-date .link img {
  max-width: 100%;
}
.calendar-date .text {
  max-width: 75ch;
  padding: 5ch;
  border-radius: 3px;
  background-color: rgba(230, 230, 230, 0.9);
}
.calendar-date .too-early h1 {
  font-family: "Parisienne", cursive;
  font-size: 3em;
  color: red;
}

.winter_landscape .back-button > svg {
  fill: black;
}
.winter_landscape a {
  color: black;
}

.globe_house {
  color: white;
}
.globe_house a {
  color: white;
}
.globe_house main {
  background-color: rgba(0, 27, 71, 0.7);
}

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