@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Eater&family=Nosifer&display=swap');


.eater {
  font-family: "Eater", serif !important;
  font-weight: 400;
  font-style: normal;
}

.nosifer {
  font-family: "Nosifer", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.dancing {
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.parchment {
  background-image: url('/img/parchment.jpg');
  margin-left: 10px;
  margin-right: 10px;
  padding: 20px;

}


body,
.parchment {
  /* Replace with your image path */
  background-repeat: no-repeat;
  /* Prevents image repetition */
  background-size: cover;
  /* Scales the image to cover the entire element */
  background-position: center;
  /* Centers the image */
}

html,
body {
  height: 100%;
}


.ih {
  text-align: center;
  margin-top: 20px;
  margin-left: 10px;
  margin-right: 10px;
}

mark {
  background-color: yellow;
}

canvas#game {
  border: 1px solid #d3d3d3;
  background-color: #f1f1f1;
}

button,
li {
  cursor: pointer;
}

.fade-in {
  animation: fadeIn 0.5s ease-in forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  1% {
    opacity: 0;
    display: inherit;
  }

  to {
    opacity: 1;
    /* This will be applied at the very end */
  }
}

.fade-out {
  animation: fadeOut 0.5s ease-out forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  99% {
    opacity: 0;
  }

  to {
    opacity: 0;
    display: none;
    /* This will be applied at the very end */
  }
}

.hidden {
  display: none;
}