:root
{
  --primary-color: #2e57b0;
  --secondary-color: #a8a8a8;
  --tertiary-color: whitesmoke;
  --focus-color: rgb(162, 209, 255);
  --other-focus-color: rgb(60, 158, 255);
  --maxfocus-color: RoyalBlue;
  --gradient-color: rgb(0, 15, 60);
  --text-color: #0e0e0e;

  --animation-delay-1: 2s;
  --animation-delay-2: 0.4s;
  --animation-delay-3: 0.8s;
}

.loader
{
  display: none;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
  min-width: 100%!important;
  min-height: 100%!important;
	z-index: 99;
  justify-content: center;
  align-items: center;
  background-color: var(--tertiary-color);
}

.loader--dot
{
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 4px;
  border-radius: 50%;
  background-color: var(--primary-color);
  animation-name: dots;
  animation-duration: var(--animation-delay-1);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.loader--dot:nth-child(2)
{
  background-color: var(--other-focus-color);
  animation-delay: var(--animation-delay-2);
}
.loader--dot:nth-child(3)
{
  background-color: var(--maxfocus-color);
  animation-delay: var(--animation-delay-3);
}
@keyframes dots 
{
  50%
  {
    opacity: 0;
    transform: scale(0.7) translateY(10px);
  }
}

.loader--text
{
  font-family: 'EncodeSans_Condensed-Semibold', sans-serif;
  font-size: 0.99rem;
  color: var(--primary-color);
  position: relative;
  margin: 8px 0;
}

.loader--image
{
  width: clamp(20px,30%,60px); /* min,preferred,max */
  height: auto;
  margin: 10px 0;
  border-radius: 50%;
  border: 0.4vh solid var(--secondary-color)!important;
}