.copy-btn {
  transition: opacity .3s ease-in-out;
  opacity: 0;
  padding: 2px 6px;
  position: absolute;
  right: 2px;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  color: #333;
  cursor: pointer;
  background-color: #eee;
  background-image: linear-gradient(#fcfcfc,#eee);
  border: 1px solid #d5d5d5;
  border-radius: 3px;
}
.copy-btn.copied {
  animation: blink 1s;
}
.hljs:hover .copy-btn {
  opacity: 1;
}
.bot-content .copy-btn-content {
  bottom: 2px;
  opacity: 0.1;
}
.copy-btn-content:hover {
  opacity: 1;
}
.clippy {
  position: relative;
  top: 3px;
}
.active\:bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgba(52,53,65,var(--tw-bg-opacity));
}

.blink-cursor {
  position: relative;
  display: inline-block;
  height: 30px;
}

.blink-cursor::before {
  content: '';
  position: absolute;
  top: 0;
  left: 3px;
  width: 2px;
  height: 30px;
  background-color: black;
  animation: blink 1s infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

#side-bar.open-side {
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  display: flex;
  z-index: 40;
}

.close-btn svg {
  color: #333;
}

.nav-bottom {
  position: absolute;
  bottom: 40px;
  color: #eee;
  left: 20px;
  font-size: 12px;
}