/* Example usage */
body {
  font-family: "Poppins", sans-serif;
}

@font-face {
  font-family: "Roboto";
  src: url("../css/fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("../css/fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("../css/fonts/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("../css/fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

.times-roman {
  font-family: "Times New Roman", Times, serif;
}

.tomkin {
  font-family: "Tomkin", Times, serif;
}

@keyframes scrollUp {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(-100%);
  }
}

.marquee {
  display: flex;
  width: max-content;
  animation: scroll 25s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.slider {
  -webkit-appearance: none;
  height: 6px;
  border-radius: 5px;
  background: #e5e7eb;
  outline: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--secondary-color);
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(154, 1, 0, 0.2);
}