body{
  background-color: skyblue;
  user-select: none;
}
#clickScreen{
  position: absolute;
  z-index: 1;
  top: 0%;
  background-color: skyblue;
  left: 0%;
  width: 100vw;
  height: 100vh;
}
#animalScreen{
  border: 1px solid white;
  overflow: auto;
}
#cake{
  position: relative;
  top: 10vh;
  display: block;
}
#footAmount{
  font-family: cursive;
}
#foodOffers{
  background-color: skyblue;
  width: 20vw;
  height: 65vh;
  position: absolute;
  top: 10vh;
  left: 3vw;
  border: 1px solid white;
  border-radius: 5%;
  overflow: auto;
}
#moneyOffers{
  background-color: skyblue;
  width: 20vw;
  height: 65vh;
  position: absolute;
  top: 10vh;
  left: 77vw;
  border: 1px solid white;
  border-radius: 5%;
  overflow: auto;
}
.upgrade{
  outline: none;
  border: 1px solid #bdeaf9;
  background-color: #67cff9;
  width: 90%;
  margin: 5%;
  padding: 1%;
}
.upgrade:hover{
  cursor: pointer;
  font-weight: bold;
}
#shopButton{
  background-color: skyblue;
  position: relative;
  width: 10vw;
  top: 5vh;
  border: 1px solid white;
  border-radius: 5%;
}
.toggles{
  background-color: skyblue;
  position: relative;
  width: 10vw;
  top: 5vh;
  border: 1px solid white;
  border-radius: 5%;
}
#shopButton:hover{
  cursor: pointer;
  font-weight: bold;
}
.toggles:hover{
  cursor: pointer;
  font-weight: bold;
}
#animalScreen{
  width: 80vw;
  height: 80vh;
  position: absolute;
  top: 10vh;
  left: 10vw;
  background-color: skyblue;
}
#description{
  border: 1px solid white;
  width: 50vw;
  height: 3vh;
  position: absolute;
  top: 80vh;
  left: 23vw;
  padding: 2%;
}
#cakeScreen{
  width: 55vw;
  height: 50vh;
  position: relative;
  top: 20vh;
  display: none;
}
#eatingCake{
  display: block;
  width: 30vh;
}
#eatingCake:hover{
  cursor: pointer;
}
#animalStat{
  border: 1px solid white;
  width: 15%;
  height: 50%;
  position: fixed;
  left: 12vw;
  top: 35vh;
  display: none;
}
.u0{
  background-color: skyblue;
}
.u1{
  background-color: #8eeccc;
}
.u2{
  background-color: #bdec8e;
}
.u3{
  background-color: #ecdf8e;
}
.u4{
  background-color: #ecbb8e;
}
.u5{
  background-color: #ec8e8e;
}
.u6{
  background-color: #ec8ed3;
}
.u7{
  background-color: #44ff00;
}
.u8{
  background-color: #eeff00;
}
.u9{
  background-color: #7f00ad;
}
.u10{
  background-color: #ff0000;
}
.u11{
  background-color: #0008ff;
}
.u12{
  background-color: #757575;
  border: 2px solid gold;
}

.mystery{
  color: #e864e8;
}
img{
  display: none;
}
.passive{
  border: 1px solid black;
}
#statScreen{
  border: 1px solid white;
  z-index: 14;
  background-color: skyblue;
  width: 75vw;
  height: 80vh;
  position: absolute;
  padding: 5%;
  left: 8.75vw;
  display: none;
}
#invis{
  color: skyblue;
}