html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: 'Chaloops';
  color: #efc5c5;
  src: url('fonts/Chaloops-Medium.ttf') format('truetype');
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

#content {
  background-image: url('hra_background.svg');
  background-repeat: no-repeat;
  background-size: cover;
  /* or contain */
  position: relative;
  height: 55.3vw;
}

/* all child of content abs */
#content>* {
  position: absolute !important;
  height: inherit;
}

#animal {
  top: 51%;
  transition: left 1.5s ease-out;
  transform: translate(-50%, -50%);
  height: 30%;
}

.show-animal {
  left: 55%;


}

.tooltip {
  background-image: url(hra_bublina.svg);
  background-repeat: no-repeat;
  left: 26%;
  transform: scale(0.3);
  width: 100%;
  top: -28%;
  display: flex;
  justify-content: center;

  transition: 1s ease-in;
}

.tooltip> :first-child {
  margin-left: 17%;

}

.tooltip> :last-child {
  margin-right: 29%;

}


.tooltip img {
  bottom: 7%;
  width: 20%;
  margin: 1%;
  position: relative;
}

#menu {
  height: auto;
  transition: all 0.3s ease-in;
}

#kitchen {
  height: auto;
}

#chopping-board {
  top: 70%;
  width: 55%;
  height: 25%;
  left: 10%;
  background-image: url('hra_chopping-board.svg');
  background-repeat: no-repeat;
  background-size: cover;
  /* or contain */
}

#chopping-area {
  position: relative;
  top: 25%;
  left: 45%;
  width: 50%;
  height: 55%;
}

#chopping-area img {
  position: absolute;
  /* allow free placement */
  object-fit: contain;

}

#plate {
  top: 61%;
  width: 38%;
  height: 35%;
  left: 64%;
  background-image: url(hra_plate.svg);
  background-repeat: no-repeat;
  background-size: cover;
}

#start {
  left: 43%;
  height: 10%;
  width: 28%;
  top: 26%;
  cursor: pointer;
}

#plate-area {
  position: relative;
  width: 71%;
  height: 65%;
  top: 27%;
  left: 6%;
}

#plate-area img {
  position: absolute;
  /* allow free placement */
  object-fit: contain;
}

.hide {
  opacity: 0;
}

.hiddem-animal {
  left: -60%;

}

#item-shelve {
  display: flex;
  flex-direction: column;
  gap: 1%;
  margin: 1.5% 0 0 1.5%;
  width: 13%;
  align-items: center;
}

img.food {
  padding-bottom: 15%;
  width: 10vw
}

.item {
  margin-top: 14%;
}

.item.enlarged {
  transform: scale(1.5);
  /* enlarge 1.5x */
  transition: transform 0.3s ease;
  z-index: 10;
  /* so it appears above other elements */
}

#item-shelve .item:last-child {
  margin-top: auto;
  width: 111%;
  padding-left: 12%;
}




.close {
  display: none;
}

#restart-button {
  position: absolute;
  left: 24%;
  top: -3%;
  width: 50%;
  cursor: pointer;
}

#hra_lost_screen {

  background-image: url("hra_lost_screen.svg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;

}

.food {
  cursor: pointer;
}

.stars {
  top: 1%;
  left: 3.5%;
  position: relative;
  height: 5.4%;
  width: 70%;
  display: flex;
  justify-content: space-between;
}

.stars>* {
  width: 29%;

}

.transparent {
  opacity: 0.5;
}

#chopping-board img {
  position: absolute;
  /* allow free placement */
  object-fit: contain;
}

@keyframes shake {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  10% {
    transform: translate(-2px, -2px) rotate(-2deg);
  }

  20% {
    transform: translate(2px, 2px) rotate(2deg);
  }

  30% {
    transform: translate(-2px, 2px) rotate(-2deg);
  }

  40% {
    transform: translate(2px, -2px) rotate(2deg);
  }

  50% {
    transform: translate(-1px, 1px) rotate(-1deg);
  }

  60% {
    transform: translate(1px, -1px) rotate(1deg);
  }

  70% {
    transform: translate(-1px, 1px) rotate(-1deg);
  }

  80% {
    transform: translate(1px, -1px) rotate(1deg);
  }

  90% {
    transform: translate(-1px, 1px) rotate(-1deg);
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

#chopping-board.shake {
  animation: shake 0.5s ease;
}

#timer {
  position: absolute;
  top: 12%;
  height: 0;
  left: 25%;
  font-family: 'Chaloops', sans-serif;
  color: #efd8c5;
  font-size: 10vw;
  -webkit-text-stroke: 4px #c4511c;
}