@import "./node_modules/nes.css/css/nes.css";

#message-screen {
  /* children nodes can be absolutely positioned inside it */
  position: relative;
  width: 100vw;
  height: 100vh;
}

#btn-open-no {
  /* keep inside message screen */
  position: absolute;
  /* smoother animation */
  transition: left 0.15s ease-out, top 0.15s ease-out;
}

#btn-open-yes {
  transform: scale(1);
  transition: transform 0.2s ease;
}

.food-button {
  width: 100%;
  text-align: left;
}

.screen {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.button-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

img {
  width: 75%;
}

#spinny-cat {
  width: 45%;
}

.img-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.cuisines-container {
  display: flex;
  flex-direction: column;
}

.cuisines-container > button {
  margin-bottom: 15px;
}

/* button {
  width: 94%;
} */

.screen-body {
  margin-top: 50px;
  margin-bottom: 50px;
}

.hidden {
  display: none;
}

.small {
  font-size: 0.7rem;
}

@keyframes fall {
  to {
    transform: translateY(100vh);
    opacity: 0;
  }
}