base.css

@charset "UTF-8";



/* VARIABLES -------------------------------------------------------------- */

:root {
  --heading-font: 'Open Sans', sans-serif;
  --main-font: 'Open Sans', sans-serif;
  --minor-font: 'Open Sans', sans-serif;
  --heading-color: rgba(0,0,50,.9);
  --main-color: rgba(70,70,90,.9);
  --minor-color: rgb(190,190,200);
  --emphasis-color: rgb(27,211,165);
}



/* DEFAULTS --------------------------------------------------------------- */

html {
  color: var(--main-color);
  font-family: var(--main-font);
  font-size: 16px;
  font-weight: 400;
}

/* TYPOGRAPHY ------------------------------------------------------------- */

.primary-heading {
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: 2rem;
  font-weight: 400;
}



/* LINKS & BUTTONS -------------------------------------------------------- */

/* LAYOUT ----------------------------------------------------------------- */

/* COMPONENTS ------------------------------------------------------------- */

@keyframes bouncing-loader {
  to {
    opacity: 0.1;
    transform: translate3d(0, -.8rem, 0);
  }
}
.bouncing-loader {
  display: flex;
  justify-content: center;
}
.bouncing-loader__ball {
  width: .8rem;
  height: .8rem;
  margin: 1rem .2rem;
  background: #8385aa;
  border-radius: 50%;
  animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader__ball:nth-child(2) {
  animation-delay: 0.2s;
}
.bouncing-loader__ball:nth-child(3) {
  animation-delay: 0.4s;
}



.loader-wrapper {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.loader-animation {
  margin: 100px auto 0;
  width: 50px;
  text-align: center;
}

.loader-animation > div {
  width: 10px;
  height: 10px;
  background-color: #333;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: loader-bounce 1.4s infinite ease-in-out both;
  animation: loader-bounce 1.4s infinite ease-in-out both;
}

.loader-animation .bounce1 {
  -webkit-animation-delay: -.32s;
  animation-delay: -.32s;
}

.loader-animation .bounce2 {
  -webkit-animation-delay: -.16s;
  animation-delay: -.16s;
}

@-webkit-keyframes loader-bounce {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1) }
}

@keyframes loader-bounce {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}




/* COSMETIC --------------------------------------------------------------- */

/* UTILITY ---------------------------------------------------------------- */

/* STATE ------------------------------------------------------------------ */