@import "tachyons/tachyons.min.css";
@import "grid.css";
@import url(https://fonts.bunny.net/css?family=alegreya:400);
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.game {
  font-family: "Alegreya", serif;
  font-size: 16px;
  color: white;
  background: #46515d;
  background: url("/public/images/game/bg.webp") left top/320px 192px repeat, #8b8fa0;
}
.game li p {
  margin: 0;
}

.game-wrapper {
  background: #3c3a50;
  border-radius: 4px;
}

.content, #inventoryHeader {
  padding: 14px;
}

.content > * {
  opacity: 0; /* start invisible */
  transform: translateY(-20px); /* start slightly above */
  animation: slideIn 0.5s forwards ease-in-out;
}

.content > *:nth-child(1) {
  animation-delay: 0s;
}

.content > *:nth-child(2) {
  animation-delay: 0.2s;
}

.content > *:nth-child(3) {
  animation-delay: 0.4s;
}

.content > *:nth-child(4) {
  animation-delay: 0.6s;
}

.content > *:nth-child(5) {
  animation-delay: 0.8s;
}

.content > *:nth-child(6) {
  animation-delay: 1s;
}

.content > *:nth-child(7) {
  animation-delay: 1.2s;
}

.content > *:nth-child(8) {
  animation-delay: 1.4s;
}

.content > *:nth-child(9) {
  animation-delay: 1.6s;
}

.content > *:nth-child(10) {
  animation-delay: 1.8s;
}

@media (min-width: 768px) {
  .game {
    font-size: 18px;
  }
  .content {
    padding: 14px;
    width: 100%;
  }
}
@media (min-width: 1024px) {
  .game {
    font-size: 20px;
  }
  .content {
    padding: 20px;
    width: 50ch;
  }
}
main {
  width: 100%;
  flex: 1 auto;
}

footer {
  flex-shrink: 0;
}

:modal {
  min-width: 30ch;
  max-width: 40ch;
  color: white;
  background-color: #1f232e;
  border: 4px solid transparent;
  border-image: linear-gradient(45deg, magenta, rebeccapurple, dodgerblue, green) 1;
  box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.5);
}

::backdrop {
  background: #000;
  opacity: 0.6;
}

.bg-index {
  background: #ED4264; /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #FFEDBC, #F7889F); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #FFEDBC, #F7889F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.bg-episodes {
  background: #ED4264; /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #FFEDBC, #F7889F); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #FFEDBC, #F7889F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.bg-ep1 {
  background: #C9FFBF; /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #FFAFBD, #C9FFBF); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #FFAFBD, #C9FFBF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.bg-ep2 {
  background: #C6FFDD; /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #f7797d, #FBD786, #C6FFDD); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #f7797d, #FBD786, #C6FFDD); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.bg-ep3 {
  background: #9796f0; /* fallback for old browsers */
  background: linear-gradient(to bottom, #9796f0, #fbc7d4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.bg-ep4 {
  background: #DBD4B4; /* fallback for old browsers */
  background: linear-gradient(to bottom, #CC95C0, #DBD4B4, #7aa1d2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.bg-ep5 {
  background: #c0c0aa; /* fallback for old browsers */
  background: linear-gradient(to bottom, #c0c0aa, #1cefff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.bg-game {
  /* background: #0E0E10 url("/public/images/game/bg.png") repeat right top; */
  /* background: #0E0E10; */
}

.bg-changelog {
  background: #d4d4ef;
  background: linear-gradient(-60deg, #a1b3c6, #efedc2);
}

.riddle {
  display: inline-block;
  padding: 12px 20px;
  border: 4px solid transparent;
  border-image: linear-gradient(45deg, magenta, rebeccapurple, dodgerblue, green) 1;
}
.riddle p {
  margin: 0;
}

.wave-text {
  font-weight: bold;
  display: inline-block;
}

.wave-text span {
  display: inline-block;
}

.wave-text span {
  animation: wave 1s infinite ease-in-out;
}

.wave-text span:nth-child(1) {
  animation-delay: 0s;
}

.wave-text span:nth-child(2) {
  animation-delay: 0.1s;
}

.wave-text span:nth-child(3) {
  animation-delay: 0.2s;
}

.wave-text span:nth-child(4) {
  animation-delay: 0.3s;
}

.wave-text span:nth-child(5) {
  animation-delay: 0.4s;
}

.wave-text span:nth-child(6) {
  animation-delay: 0.6s;
}

.wave-text span:nth-child(7) {
  animation-delay: 0.7s;
}

.wave-text span:nth-child(8) {
  animation-delay: 0.8s;
}

.wave-text span:nth-child(9) {
  animation-delay: 0.9s;
}

.wave-text span:nth-child(10) {
  animation-delay: 0.1s;
}

.wave-text span:nth-child(11) {
  animation-delay: 0.11s;
}

.wave-text span:nth-child(12) {
  animation-delay: 0.12s;
}

.wave-text span:nth-child(13) {
  animation-delay: 0.13s;
}

.wave-text span:nth-child(14) {
  animation-delay: 0.14s;
}

.wave-text span:nth-child(15) {
  animation-delay: 0.15s;
}

.wave-text span:nth-child(16) {
  animation-delay: 0.16s;
}

.wave-text span:nth-child(17) {
  animation-delay: 0.17s;
}

.wave-text span:nth-child(18) {
  animation-delay: 0.18s;
}

.wave-text span:nth-child(19) {
  animation-delay: 0.19s;
}

.wave-text span:nth-child(20) {
  animation-delay: 0.2s;
}

@keyframes wave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px); /* move letters up for a wave-like effect */
  }
}
@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.button {
  display: inline-block;
  color: white;
  background: hsla(0, 0%, 100%, 0.2);
}

.word-wrap {
  word-wrap: break-word;
}

.game-actions a p {
  margin: 0;
}

.tria:before {
  content: "";
  position: absolute;
  top: 100%;
  width: 0;
  height: 0;
  border: 6px solid;
}

.tria-up:before {
  top: -10px;
}

.tria-dw:before {
  top: 100%;
}

.tria-dw-r-black:before {
  border-color: #000 #000 transparent transparent;
}

.tria-dw-l-black:before {
  border-color: #000 transparent transparent #000;
}

.tria-up-r-black:before {
  border-color: transparent #000 #000 transparent;
}

.tria-up-l-black:before {
  border-color: transparent transparent #000 #000;
}

.tria-dw-r-white:before {
  border-color: #fff #fff transparent transparent;
}

.tria-dw-l-white:before {
  border-color: #fff transparent transparent #fff;
}

.tria-up-r-white:before {
  border-color: transparent #fff #fff transparent;
}

.tria-up-l-white:before {
  border-color: transparent transparent #fff #fff;
}

.tria-left-0:before {
  left: 0%;
}

.tria-left-25:before {
  left: 25%;
}

.tria-left-50:before {
  left: 50%;
}

.tria-left-75:before {
  left: 75%;
}

.top-0 {
  top: 0;
}

.top-05 {
  top: 5%;
}

.top-10 {
  top: 10%;
}

.top-20 {
  top: 20%;
}

.top-30 {
  top: 30%;
}

.top-40 {
  top: 40%;
}

.top-50 {
  top: 50%;
}

.top-60 {
  top: 60%;
}

.top-70 {
  top: 70%;
}

.top-80 {
  top: 80%;
}

.top-90 {
  top: 90%;
}

.top-100 {
  top: 100%;
}

.bottom-0 {
  bottom: 0;
}

.bottom-05 {
  bottom: 5%;
}

.bottom-10 {
  bottom: 10%;
}

.bottom-20 {
  bottom: 20%;
}

.bottom-30 {
  bottom: 30%;
}

.bottom-40 {
  bottom: 40%;
}

.bottom-50 {
  bottom: 50%;
}

.bottom-60 {
  bottom: 60%;
}

.bottom-70 {
  bottom: 70%;
}

.bottom-80 {
  bottom: 80%;
}

.bottom-90 {
  bottom: 90%;
}

.bottom-100 {
  bottom: 100%;
}

.left-0 {
  left: 0;
}

.left-05 {
  left: 5%;
}

.left-10 {
  left: 10%;
}

.left-20 {
  left: 20%;
}

.left-30 {
  left: 30%;
}

.left-40 {
  left: 40%;
}

.left-50 {
  left: 50%;
}

.left-60 {
  left: 60%;
}

.left-70 {
  left: 70%;
}

.left-80 {
  left: 80%;
}

.left-90 {
  left: 90%;
}

.left-100 {
  left: 100%;
}

.right-0 {
  right: 0;
}

.right-05 {
  right: 5%;
}

.right-10 {
  right: 10%;
}

.right-20 {
  right: 20%;
}

.right-30 {
  right: 30%;
}

.right-40 {
  right: 40%;
}

.right-50 {
  right: 50%;
}

.right-60 {
  right: 60%;
}

.right-70 {
  right: 70%;
}

.right-80 {
  right: 80%;
}

.right-90 {
  right: 90%;
}

.right-100 {
  right: 100%;
}

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