#waifu-toggle {
  background-color: #caa7b7;
  border-radius: 8px;
  bottom: 66px;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  left: 0;
  margin-left: -100px;
  padding: 5px 2px 5px 5px;
  position: fixed;
  transition: margin-left 1s;
  width: 62px;
  writing-mode: vertical-rl;
}

#waifu-toggle.waifu-toggle-active {
  margin-left: -50px;
}

#waifu-toggle.waifu-toggle-active:hover {
  margin-left: -30px;
}

#waifu {
  bottom: -1000px;
  /*left: 80%;*/
  right: 28px;
  line-height: 0;
  margin-bottom: -15px;
  position: fixed;
  transform: translateY(3px);
  transition: transform .3s ease-in-out, bottom 3s ease-in-out;
  z-index: 999;
}

#waifu:hover {
  transform: translateY(0);
}

#waifu-tips {
  animation: shake 50s ease-in-out 5s infinite;
  border-radius: 12px;
  box-shadow: 0 3px 15px 2px transparent;
  font-size: 14px;
  line-height: 24px;
  margin: -30px 20px;
  min-height: 70px;
  opacity: 0;
  overflow: hidden;
  padding: -20px 10px;
  position: absolute;
  text-overflow: ellipsis;
  transition: opacity 1s;
  width: 220px;
  word-break: break-all;
  color: #caa7b7;
  /*#b30450e8*/
}

#waifu-tips.waifu-tips-active {
  opacity: 1;
  transition: opacity .2s;
}

#waifu-tips span {
  color: #d4237a;
}

#waifu-tool span {
  display: block;
  cursor: pointer;
  color: #5b6c7d;
  transition: .2s;
}

#waifu #live2d {
  cursor: grab;
  height: 300px;
  position: relative;
  width: 300px;
}

#waifu #live2d:active {
  cursor: grabbing;
}

#waifu-tool {
  color: #aaa;
  opacity: 0;
  position: relative;
  left: 240px;
  bottom: 210px;
  transition: opacity 1s;
  width: 44px;
  height: 250px;
}


#waifu:hover #waifu-tool {
  opacity: 1;
}

#waifu-tool span {
  color: #7b8c9d;
  cursor: pointer;
  display: block;
  line-height: 30px;
  text-align: center;
  transition: color .3s;
  margin-top: 18%;
}

#waifu-tool span:hover {
  color: #0684bd; /* #34495e */
}

#waifu-tool span img {
  width: 45%;
}

@keyframes shake {
  2% {
    transform: translate(.5px, -1.5px) rotate(-.5deg);
  }

  4% {
    transform: translate(.5px, 1.5px) rotate(1.5deg);
  }

  6% {
    transform: translate(1.5px, 1.5px) rotate(1.5deg);
  }

  8% {
    transform: translate(2.5px, 1.5px) rotate(.5deg);
  }

  10% {
    transform: translate(.5px, 2.5px) rotate(.5deg);
  }

  12% {
    transform: translate(1.5px, 1.5px) rotate(.5deg);
  }

  14% {
    transform: translate(.5px, .5px) rotate(.5deg);
  }

  16% {
    transform: translate(-1.5px, -.5px) rotate(1.5deg);
  }

  18% {
    transform: translate(.5px, .5px) rotate(1.5deg);
  }

  20% {
    transform: translate(2.5px, 2.5px) rotate(1.5deg);
  }

  22% {
    transform: translate(.5px, -1.5px) rotate(1.5deg);
  }

  24% {
    transform: translate(-1.5px, 1.5px) rotate(-.5deg);
  }

  26% {
    transform: translate(1.5px, .5px) rotate(1.5deg);
  }

  28% {
    transform: translate(-.5px, -.5px) rotate(-.5deg);
  }

  30% {
    transform: translate(1.5px, -.5px) rotate(-.5deg);
  }

  32% {
    transform: translate(2.5px, -1.5px) rotate(1.5deg);
  }

  34% {
    transform: translate(2.5px, 2.5px) rotate(-.5deg);
  }

  36% {
    transform: translate(.5px, -1.5px) rotate(.5deg);
  }

  38% {
    transform: translate(2.5px, -.5px) rotate(-.5deg);
  }

  40% {
    transform: translate(-.5px, 2.5px) rotate(.5deg);
  }

  42% {
    transform: translate(-1.5px, 2.5px) rotate(.5deg);
  }

  44% {
    transform: translate(-1.5px, 1.5px) rotate(.5deg);
  }

  46% {
    transform: translate(1.5px, -.5px) rotate(-.5deg);
  }

  48% {
    transform: translate(2.5px, -.5px) rotate(.5deg);
  }

  50% {
    transform: translate(-1.5px, 1.5px) rotate(.5deg);
  }

  52% {
    transform: translate(-.5px, 1.5px) rotate(.5deg);
  }

  54% {
    transform: translate(-1.5px, 1.5px) rotate(.5deg);
  }

  56% {
    transform: translate(.5px, 2.5px) rotate(1.5deg);
  }

  58% {
    transform: translate(2.5px, 2.5px) rotate(.5deg);
  }

  60% {
    transform: translate(2.5px, -1.5px) rotate(1.5deg);
  }

  62% {
    transform: translate(-1.5px, .5px) rotate(1.5deg);
  }

  64% {
    transform: translate(-1.5px, 1.5px) rotate(1.5deg);
  }

  66% {
    transform: translate(.5px, 2.5px) rotate(1.5deg);
  }

  68% {
    transform: translate(2.5px, -1.5px) rotate(1.5deg);
  }

  70% {
    transform: translate(2.5px, 2.5px) rotate(.5deg);
  }

  72% {
    transform: translate(-.5px, -1.5px) rotate(1.5deg);
  }

  74% {
    transform: translate(-1.5px, 2.5px) rotate(1.5deg);
  }

  76% {
    transform: translate(-1.5px, 2.5px) rotate(1.5deg);
  }

  78% {
    transform: translate(-1.5px, 2.5px) rotate(.5deg);
  }

  80% {
    transform: translate(-1.5px, .5px) rotate(-.5deg);
  }

  82% {
    transform: translate(-1.5px, .5px) rotate(-.5deg);
  }

  84% {
    transform: translate(-.5px, .5px) rotate(1.5deg);
  }

  86% {
    transform: translate(2.5px, 1.5px) rotate(.5deg);
  }

  88% {
    transform: translate(-1.5px, .5px) rotate(1.5deg);
  }

  90% {
    transform: translate(-1.5px, -.5px) rotate(-.5deg);
  }

  92% {
    transform: translate(-1.5px, -1.5px) rotate(1.5deg);
  }

  94% {
    transform: translate(.5px, .5px) rotate(-.5deg);
  }

  96% {
    transform: translate(2.5px, -.5px) rotate(-.5deg);
  }

  98% {
    transform: translate(-1.5px, -1.5px) rotate(-.5deg);
  }

  0%, 100% {
    transform: translate(0, 0) rotate(0);
  }
}