body {
  margin: 0;
  overflow: hidden;
  image-rendering: pixelated;
}

canvas {
  display: block;
  image-rendering: pixelated;
}

/* --- Start Screen --- */

#screen-container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

#start-screen {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  image-rendering: pixelated;
}

.screen-btn {
  position: absolute;
  cursor: pointer;
  display: block;
  width: 20%;
  height: 14%;
}

/* PLAY button - left - overlay */
#btn-play {
  left: 5%;
  bottom: 35%;
  width: 20%;
  height: 14%;
}

/* UPDATE INGREDIENTS button - right - overlay*/
#btn-ingredients {
  right: 5%;
  bottom: 35%;
  width: 20%;
  height: 14%;
}

#recipeBox {
  position: absolute;
  bottom: 1vh;
  right: 0.1vw;

  width: 20vw;
  height: 45vh;
  padding: 2vw;

  background-image: url("../assets/clipboard.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;

  font-family: "Pixelify Sans", sans-serif;
  font-size: 1.2vw;
  color: black;

  z-index: 10;
}

#recipeBox ul {
  padding-top: 0;
  padding-left: 2.8vw;
  padding-right: 2.8vw;
  list-style-type: square;
  margin-top: 0;
}

#recipeBox h3 {
  text-align: center;
  padding-top: 2vh;
  margin-bottom: 0.5vh;
  margin-top: 4.5vh;
}