html, body {
  height: 100%;
  background: linear-gradient(to bottom, hsl(220, 48%, 55%), hsl(220, 100%, 38%));
  cursor: url("pointer.svg"), auto;
  overflow: hidden;
  margin: 0;
}

@keyframes blurout {
  from {
    filter: blur(0px);
  }
  to {
    filter: blur(4px);
  }
}

@keyframes chlorosis {
  0% {
    background-color: #1fbf00;
    border-color: #28ff00;
  }
  50% {
    background-color: #1fbf00;
    border-color: #28ff00;
  }
  80% {
    background-color: #bfbf00;
    border-color: #ffff00;
  }
}

.lilypad {
  position: fixed;
}

.sample, .rare {
  opacity: 0;
}

.leaf {
  position: absolute;
  background-color: #1fbf00;
  border: 5px solid #28ff00;
}

.thinborder {
  position: absolute;
  background-color: #1fbf00;
  border: 2.5px solid #28ff00;
}

.borderfull {
  position: absolute;
  background-color: #28ff00;
}

.borderless {
  position: absolute;
  background-color: #1fbf00;
}

.shaded {
  position: absolute;
  background-color: #158000;
}

.lily0-0 {
  border-radius: 50%;
  width: 10px;
  height: 10px;
}

.lily1-0 {
  border-radius: 50%;
  width: 25px;
  height: 25px;
}

.lily2-0 {
  width: 25px;
  height: 25px;
}

.lily3-0 {
  width: 35px;
  height: 35px;
}

.lily3-1 {
  rotate: 45deg;
  width: 10px;
  height: 10px;
  top: 16px;
  left: -5px;
}

.lily3-2 {
  rotate: 45deg;
  width: 10px;
  height: 10px;
  top: -5px;
  left: 16px;
}

.lily3-3 {
  rotate: 45deg;
  width: 10px;
  height: 10px;
  top: 35px;
  left: 16px;
}

.lily3-4 {
  rotate: 45deg;
  width: 10px;
  height: 10px;
  top: 16px;
  left: 35px;
}

.lily4-0 {
  width: 80px;
  height: 80px;
}

.lily4-1 {
  rotate: 45deg;
  width: 80px;
  height: 80px;
}

.lily4-2 {
  width: 65px;
  height: 65px;
  top: 7.5px;
  left: 7.5px;
}

.lily4-3 {
  rotate: 45deg;
  width: 65px;
  height: 65px;
  top: 7.5px;
  left: 7.5px;
}

.lily4-4 {
  width: 20px;
  height: 20px;
  top: 30px;
  left: 30px;
}