html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-end;
}
#kispy{
position: relative;
/* bottom: 100px; */
}


.hidden {
  display: none;
}

#kispy{
  display: flex;
  justify-content: center;
  margin:   auto;
  height: 300px;  width: 300px; 
  background-image:  url(assets/kispyPng4.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.btnTray{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  box-shadow: inset -1px -5px 13px 0px #d9fbbe;
  background: linear-gradient(to bottom, #b8e356 5%, #a5cc52 100%);
  background-color: #b8e356;
  border-radius: 6px;
  border: 1px solid #83c41a;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  padding: 14px 17px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #86ae47;
  margin: 2px;
  min-width: 90px;
}

.btn:hover {
  background: linear-gradient(to bottom, #a5cc52 5%, #b8e356 100%);
  background-color: #a5cc52;
}

.btn:active {
  position: relative;
  top: 1px;
}


@keyframes jump {
  0% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }

  40% {
    transform: translate3d(0, -10%, 0) scale3d(1, 1.01 1);
  }

  60% {
    transform: translate3d(0, -40%, 0) scale3d(1.02, 1.04, 1);
  }

  80% {
    transform: translate3d(0, -10%, 0) scale3d(1, 1.01 1);
  }

  100% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}

.jump {
  transform-origin: 20% 20%;
  animation: jump .3s linear;
}