@font-face {
  font-family: "neue";
  src: url("/fonts/NeueMachina-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "satoshi";
  src: url("/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Sail";
  src: url("/fonts/Sail-Regular.otf") format("truetype");
}

:root {
  --ax-track-color: #000000;
  --ax-thumb-color: #fc785d;
  --ax-size: 5px;
}

body::-webkit-scrollbar {
  width: var(--ax-size);
}

body::-webkit-scrollbar-track {
  background: var(--ax-track-color);
  border-radius: 16px;
}

body::-webkit-scrollbar-thumb {
  background: var(--ax-thumb-color);
  border-radius: 16px;
}

@supports not selector(::-webkit-scrollbar) {
  body {
    scrollbar-color: var(--ax-thumb-color) var(--ax-track-color);
  }
}
::-webkit-scrollbar-thumb:hover {
  background: #f45e3f;
}
@keyframes underline {
  0% {
    transform: scaleX(0);
    transform-origin: bottom right;
  }
  100% {
    transform: scaleX(1);
    transform-origin: bottom left;
  }
}

.underline-animation {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.underline-animation::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px; /* Adjust the height of the underline */
  background-color: currentColor; /* Use the text color */
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}