:root {
  --gray-custom-normal: #6f6f6f;
  --gray-custom-light: #ededee;
  --gray-custom-text: #3b3938;
  --gray-custom-dark: #383838;
  --red-custom: #ff595a;
}
html {
  scroll-behavior: smooth;
}
/* Simple page transitions - CSS only */
body {
  transition: opacity 0.3s ease-in-out;
}
::-webkit-scrollbar {
  width: 10px;
  background-color: var(--gray-custom-light);
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgb(209, 209, 209);
}
::-webkit-scrollbar-thumb {
  background: var(--gray-custom-text);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gray-custom-text);
}
::selection {
  color: #fff;
  background: #000000;
}
::-moz-selection {
  color: #fff;
  background: #000000;
}
::marker {
  content: "";
  display: none;
}
@property --from {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

.counter {
  transition: --from 1s;
  counter-reset: int var(--from);
  animation: counter var(--time, 1000) forwards ease-in-out;
}

.counter::after {
  content: counter(int);
}

@keyframes counter {
  to {
    --from: var(--to, 100);
  }
}
body {
  font-family: "Be Vietnam Pro", sans-serif;
  color: var(--gray-custom-text);
  font-weight: 400;
}