* {
  user-select: none;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background:
    center bottom / auto 700px no-repeat url(./hungry.png),
    radial-gradient(cornflowerblue, lightseagreen);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

header {
  position: fixed;
  top: 30px;
  right: 30px;
  cursor: default;
}

div.food {
  position: absolute;
  font-size: 40px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

div#drop-zone {
  border-radius: 50%;
  width: 250px;
  height: 150px;
  border: solid 10px violet;
  position: absolute;
  margin-right: 340px;
  margin-bottom: 340px;
  opacity: 0;
}

div#drop-zone.hovered {
  background: rgba(238, 130, 238, 0.5);
}

.hidden {
  opacity: 0;
}

div#drop-zone.shown {
  opacity: 1;
}

.disabled {
  opacity: 0.5;
}