.background {
  background-image: url("bg.jpg");
  background-size: cover;
  background-position: center;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
}

.fade-leave-active {
  opacity: 0;
}

.active-icon i {
  transition: color 0.5s ease-in-out, opacity 0.5s ease-in-out;
  color: inherit;
}

.active-icon:not(:hover) i.text-gray-500 {
  color: inherit;
  opacity: 0.8;
}

.active-icon i.text-gray-700 {
  color: rgb(55 65 81);
}

a:focus {
  -webkit-tap-highlight-color: transparent;
}

.text-left {
  text-align: left;
}

#card-container {
  max-width: 80vw;
  max-height: 80vh;
}

.card-inner {
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.card-inner::-webkit-scrollbar {
  display: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin: 5px;
  font-size: 24px;
  color: white;
  border-radius: 50%;
  text-decoration: none;
}
.social {
  background-color: #1da1f2;
}
.content {
  background-color: #9146ff;
}
.support {
  background-color: #ff5a5f;
}
.other {
  background-color: #4caf50;
}