#smileys {
  display: flex;
  height: 0px;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}
#smileys.show {
  height: 32px;
  transition: all 0.2s ease-in-out;
}
#smileys img {
  width: 32px;
  margin-right: 8px;
  transform: scale(1);
  image-rendering: pixelated;
  overflow:visible;
}
#smileys:hover {
  cursor: url("/assets/cursor/hover.png"), pointer;
}

#smiley {
  width: 32px;
  margin-right: 8px;
  transform: scale(1);
  image-rendering: pixelated;
  transform: scale 0.2s ease-in-out;
}
#smiley:hover {
  animation: lilbounce 0.2s ease-in-out;
  cursor: url("/assets/cursor/hover.png"), pointer;
}
@keyframes lilbounce {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.upload-file {
  margin-top: 8px;
  display: none;
}
.upload-file.show {
  display: block;
}

.painter {
  text-align: center;
  display: none;
  margin-top: 8px;
  height: 0;
  overflow: hidden;
}
.painter.show {
  height: auto;
  display: block;
}
.painter .app {
  display: flex;
  margin-bottom: 8px;
}
.painter .replay {
  border: 2px solid var(--inner-border-color);
  border-radius: 6px;

  padding: 12px;
  text-align: left;
  width: fit-content;
  display: flex;

  color: var(--text-color);
  background-color: var(--box-color);
}
.painter .replay .icon {
  margin-right: 8px;
}
.painter .replay input[type='checkbox'] {
  margin-right: 8px;
  padding: -4px 0;
}
.painter .replay label {
  line-height: 32px;
}

.painter .toolbox {
  width: 32px;
  padding: 8px 12px;
  border: 2px solid var(--inner-border-color);
  background-color: var(--box-color);
  border-radius: 8px 0 0 8px;
}
.painter .toolbox.left {
  border-right: none;
}

.painter .toolbox .tool {
  margin: 8px;
  padding: 0;
  font-size: 16px;
  color: var(--text-color);
  background: none;
  outline: transparent;
  border: 0;
}

.painter .toolbox .tool:hover {
  color: var(--hover-color);
}

.painter .toolbox .tool.selected {
  color: var(--hover-color);
}

.painter .toolbox input[type="color" i] {
  border-radius: 50%;
  inline-size: 30px;
  block-size: 32px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(153, 153, 153);
  margin-bottom: 4px;
}

.painter .toolbox input[type="color" i]::-webkit-color-swatch {
  border-radius: 50%;
}

.painter input[type="range"]{
  writing-mode: vertical-lr;
  direction: rtl;
  vertical-align: bottom;
  margin-bottom: 8px;
}

.painter #paint {
  border: 2px solid var(--inner-border-color);
  border-radius: 0 8px 8px 0;
  background: white;
}
.rainbow-marquee {
  animation: rainbow 2s linear;
  animation-iteration-count: infinite;
}
@keyframes rainbow {
  from {
    color: red;
  }
  20% {
    color: yellow;
  }
  40% {
    color: lime;
  }
  60% {
    color: blue;
  }
  80% {
    color: magenta;
  }
  100% {
    color: red;
  }
}