:root {
  --primary: #8cc740;
  --secondary: #f7931e;
  --text: #f9f9f9;
  --bg: #95aa9d;
  --dark: #333333;
  --border: #e0e0e0;
  --textgray: #333333;
}

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

body {
  font-family: "Roboto", sans-serif;
  overflow-x: hidden;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

/* For Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 8px; /* scrollbar width */
}

::-webkit-scrollbar-track {
  background: #1e1e2f; /* track color */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #9333ea; /* purple thumb */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #7e22ce; /* darker purple on hover */
}

/* For Firefox */
* {
  scrollbar-width: thin; /* "auto" or "thin" */
  scrollbar-color: #9333ea #1e1e2f; /* thumb color track color */
}