@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
@import url("./assets/fonts/Gilroy/Gilroy.css");

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

body {
  font-family: "Inter", sans-serif;
  background-color: #14161f;
  color: #fff;
}

.font-gilroy {
  font-family: "Gilroy", sans-serif;
}

.text-gradient {
  background: linear-gradient(87deg, #798fff 15%, #d375ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-gradient {
  background: linear-gradient(87deg, #798fff 15%, #d375ff 100%);
}

.border-gradient {
  position: relative;
  background: linear-gradient(87deg, #798fff 15%, #d375ff 100%);
}

.border-gradient::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background: #14161f;
  border-radius: 9999px;
}

/* Scrollbar */

*::-webkit-scrollbar {
  width: 4px;
}

*::-webkit-scrollbar-thumb {
  background-color: #798fff;
  /* border: 3.5px solid transparent; */
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
  border-width: 2px;
}

/* Custom Line Through */

.custom-line-through::before {
  content: "";
  position: absolute;
  top: 53%;
  left: -2.5%;
  width: 105%;
  height: 6px;
  background-color: #fff;
}

.bg-gradient-card {
  content: "";
  /* position: absolute; */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(20, 22, 31, 0) 0%,
    rgba(20, 22, 31, 0.6) 100%
  );
}

.button {
  @apply 2xl:text-[40px] xl:text-2xl sm:text-base text-sm;
}

/* Feedback Form */

.feedback-field:focus ~ .feedback-placeholder {
  top: 0;
}

.feedback-field:focus ~ .feedback-placeholder-2 {
  opacity: 0;
}

.feedback-field:valid ~ .feedback-placeholder {
  top: 0;
}

.feedback-field:valid ~ .feedback-placeholder-2 {
  opacity: 0;
}

.feedback-field::placeholder {
  @apply lg:text-base text-sm font-semibold text-[#77787d];
}
