* {
  box-sizing: border-box;
}

body {
  cursor: url(../images/cursor.png), default;
  background-color: #c0c86d;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;

  display: flex;
  justify-content: center;
  align-items: center;
}

.bg {
  background-image: url(../images/background.png);
  background-repeat: no-repeat;
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.hole {
  background-color: black;
  border-radius: 50%;
  overflow: visible;
  width: 230px;
  height: 230px;
}

.hole-container {
  width: 20%;
  transform: translateY(-50px);

  display: flex;
  justify-content: center;
  align-items: center;
}

.mole {
  position: relative;
  right: 50px;
  bottom: 15px;
}

.hungry {
  cursor: url(../images/cursor-worm.png), default;
}

.gone,
.hide {
  display: none;
}

.win {
  max-width: 100vw;
  max-height: 100vh;
}

.worm {
  width: 1660px;
}

.worm-container {
  overflow: hidden;
  transition: width 0.5s ease-in-out;
}

.worm-box {
  width: 1660px;
}