@font-face {
  font-family: "JosefinSansLight";
  src: url("fonts/JosefinSans-Light.ttf")  format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "CedarvilleCursiveRegular";
  src: url("fonts/CedarvilleCursive-Regular.ttf")  format("truetype");
  font-weight: normal;
  font-style: normal;
}
body {
  margin: 0;
  padding: 0;
  background-color: white;
  font-family: "JosefinSansLight";
  white-space: nowrap;
  cursor: url("images/mouse.png") 12 13, auto;
  font-size: 0;
}
a {
  color: #000;
  text-decoration: none;
}
a:hover {
  color: #000;
  text-decoration: none;
}
.main {
  display: grid;
  grid-template-columns: repeat(auto-fill, 24vh);
  grid-column-gap: 1vw;
  grid-row-gap: 2vw;
  justify-content: center;
  margin: 3vw 5vw 3vw 5vw;
}
.button {
  position: relative;
}
.button img {
  position: relative;
  width: 23.4vh;
  border: 0.3vh solid black;
  border-radius: 0.7vh;
}
.button:hover {
  cursor: url("images/mouse_over.png") 12 13, pointer;
}
.button:hover .front {
  top: -1vh;
  left: -1vh;
}
.button .back {
  position: absolute;
  top: 0;
  left: 0;
}
.popup {
  transition: opacity 0.25s ease-in-out;
}
.curtain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: white;
  opacity: 0.9;
}
body:has(.popup:not(.hidden)) {
  overflow: hidden;
}
.secret {
  position: fixed;
  width: 50vw;
  top: 40vh;
  left: 25vw;
  min-height: 5vw;
  display: grid;
  grid-template-columns: auto auto;
  justify-items: center;
  align-items: center;
  border: 0.2vw solid black;
  border-radius: 0.5vw;
  background-color: white;
}
.secret .thumb {
  display: inline-block;
  height: 10vw;
  margin-left: 1vw;
}
.secret .text {
  display: inline-block;
  font-family: "CedarvilleCursiveRegular";
  font-size: 2vw;
  line-height: 2.6vw;
  text-align: left;
  white-space: normal;
  padding: 1.7vw 2vw 1.7vw 1vw;
}
.empty {
  grid-template-columns: 50vw 0;
}
.closeBubble {
  position: fixed;
  top: 1vw;
  right: 1vw;
  cursor: url("images/mouse_over.png") 12 13, pointer;
}
.closeBubble img {
  height: 6vh;
}
.closeBubble .hoverImg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}
.closeBubble:hover .hoverImg {
  opacity: 1;
}
.hidden {
  opacity: 0;
  pointer-events: none;
}