:root {
  --wyyyy-bg: rgb(248 249 253);
  --wyyyy-font: rgb(62 70 91);
  --wyyyy-shadow: rgba(62 70 91 / 22%);
  --wyyyy-shadow-dark: rgba(62 70 91 / 32%);

  --cyan-50: #E0F7FA;
  --cyan-100: #B2EBF2;
  --cyan-200: #80DEEA;
  --cyan-300: #4DD0E1;
  --cyan-700: #0097A7;
  --cyan-800: #00838F;
  --cyan-900: #006064;
  --cyan-A10: #84FFFF;
}

body {
  margin: 0;
  background-color: #fff;
  font-family: Robert;
}


#cellBox {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: fit-content;
  padding: 0 0 100px 0;
  overflow: hidden;
}

/* ani-cell slots */
.ani-img {
  border-radius: 6px;
  max-width: 145px;
  min-width: 45px;
  height: 80px;
  pointer-events: none;
  filter: drop-shadow(0 0 3px var(--wyyyy-shadow-dark))
}
.ani-title {
  width: 100%;
  height: 34px;
  line-height: 30px;
  outline: none;
  white-space: nowrap;

  font-weight: bold;
  font-size: 22px;
  text-shadow: 0 1px 2px var(--wyyyy-shadow);
}
.ani-description {
  font-size: 11px;
  outline: none;
  white-space: nowrap;
}



#addAni {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 10;

  box-sizing: content-box;
  outline: none;
  width: fit-content;
  height: fit-content;
  font-size: 16px;
  font-weight: bold;

  color: #666666;
  text-shadow: 0 1px 2px #66666644;
  background-color: #ffffff05;
  backdrop-filter: blur(5px);
  border: 1px solid #eeeeeecc;

/*
  color: var(--cyan-800);
  text-shadow: 0 1px 2px var(--cyan-300);
  background-color: var(--cyan-200);
  box-shadow: 0 3px 15px var(--cyan-200);
*/

  user-select: none;
  margin: 20px;
  padding: 10px 25px 10px 25px;
  border-radius: 10px;
}