style.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: "Rubik";
  src: url("./fonts/Rubik-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 1 999;
  font-style: normal;
}

@font-face {
  font-family: "Rubik";
  src: url("./fonts/Rubik-Italic-VariableFont_wght.ttf")
    format("truetype-variations");
  font-weight: 1 999;
  font-style: italic;
}

@font-face {
  font-family: "Noto Color Emoji";
  src: url("./fonts/NotoColorEmoji-Regular.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
  unicode-range: U+1f1e6-1f1ff;
}

.tooltip {
  --tooltip-offset: calc(100% + 6px + var(--tooltip-tail, 0px));
  --tooltip-tail-offset: calc(100% + 6px - var(--tooltip-tail));
}

.text-gradient {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

html,
body {
  scroll-behavior: smooth;
  font-family: "Rubik", "Noto Color Emoji", sans-serif;
  scrollbar-color: hsl(var(--p)) hsl(var(--b3));
}

/* width */
::-webkit-scrollbar {
  width: 8px;
  border-radius: 4px;
}

/* Track */
::-webkit-scrollbar-track {
  background: hsl(var(--b3));
  border-radius: 4px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: hsl(var(--p));
  border-radius: 4px;
}

.serverCard {
  cursor: pointer;
  user-select: none;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation: button-pop var(--animation-btn, 0.25s) ease-out;

  &:hover {
    transform: scale(1.01);
  }

  &:active:hover,
  &:active:focus {
    animation: none;
    transform: scale(0.99);
  }
}