@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Roboto:wght@400;700&display=swap');

:root {
  --ellipseSize: 16px;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Lora', sans-serif;
  color: rgba(0, 0, 0, 0.8);
  font-weight: 700;
}

::-webkit-scrollbar {
  width: 6px !important;
  cursor: grabbing;
}

::-webkit-scrollbar-track {
  background: rgba(30, 30, 30, .75) !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(125, 125, 135, 1) !important;
  border-radius: 0px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(155, 155, 165, 1) !important;
  cursor: grab;
}

@keyframes loaderEllipsis {
  0%   { margin-bottom: 0px; margin-bottom: 0px; }
  25%  { margin-bottom: 7px; margin-bottom: 7px; }
  75%  { margin-bottom: -7px; margin-bottom: -7px; }
  100% { margin-bottom: 0px; margin-bottom: 0px; }
}

.cursor-wait {
  cursor: wait;
}

.text-justify {
  text-align: justify;
}

.loader {
  margin: 0 auto;

  width: 42px;
  height: 42px;

  border: 6px solid rgba(33,33,47,1);
  border-bottom: 6px solid rgb(0, 198, 248);

  border-radius: 50%;

  transform: rotate(0deg);
  animation: spin-it .7s ease-in-out infinite;

  z-index: 15;
}

@keyframes spin-it {
 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}