.loading {
  align-self: center;
  justify-self: center;
  margin: calc((var(--height-of-container) - var(--diameter))/4) auto; /* solved for relationship changed */
  padding: 0;
  width: var(--diameter);
  height: var(--diameter);
  border-radius: var(--diameter);
  box-shadow: 0px 0px 0rem 0rem #00c1f0;
  animation: pulse 1s linear 0s infinite alternate-reverse both;
}

  .loading::after {
    font-family: 'Poppins', sans-serif;
    content: 'loading . . . ';
    position: absolute;
    width: calc((var(--diameter)*10)/4);
    overflow-y: hidden;
    font-size: calc(var(--diameter)/10);
    height: calc((var(--diameter)/10)*1.4);
    display: inline-block;
    margin-top: calc(var(--diameter)/2.2);
    margin-left: calc(var(--diameter)/3.5);
    text-align: left;
    animation: dotdotdot 2s linear 0s infinite normal both;
  }

/* .droplet {
        background: white;
        border-radius: calc(var(--diameter));
        border-top-left-radius: 0px;
        height: calc(var(--diameter)/10);
        width: calc(var(--diameter)/10);
        transform: rotateY(45deg);
        transform: rotateX(45deg);
        transform: rotateZ(45deg);
        margin: 1rem auto;
        animation: falling 3s linear 0s infinite normal both;
      } */

.highlight {
  border-radius: calc(var(--diameter));
  border-top-left-radius: 0px;
  background: transparenta;
  border-bottom: 5px double white;
  height: calc(var(--diameter)/12);
  width: calc(var(--diameter)/12);
}

@keyframes falling {
  from {
    margin-top: -3rem;
    background: white;
  }

  to {
    margin-top: calc(var(--diameter));
    background: var(--accent-color);
  }
}

@keyframes pulse {
  from {
    box-shadow: 0px 0px 0rem 0rem #00c1f0;
  }

  to {
    box-shadow: 0px 0px calc(var(--diameter)/10) calc(var(--diameter)/45) #00c1f0;
  }
}

@keyframes dotdotdot {
  from {
    width: calc((var(--diameter)/5)*2);
  }

  to {
    width: calc((var(--diameter)/5)*3);
  }
}
}