styles.scss

/* ss global */
html, body {
  height: 100%;
  min-height: 100%;
}

body{
  background: linear-gradient(120deg, #1A1A1D, #131314) !important;
}

#content {
  height: 100%;
  min-height: 100%;
}

#loading {
  -webkit-animation: fadein 1.5s;
  -moz-animation: fadein 1.5s;
  -ms-animation: fadein 1.5s;
  -o-animation: fadein 1.5s;
  animation: fadein 1.5s;
  padding-top: 25%;

  p {
    padding-top: 1vh;
    text-align: center;
    color: #fff;
    font-size: 1.2rem;
  }

  .spinner {
    border: .5rem solid #f3f3f3; /* Light grey */
    border-top: .5rem solid #C3073F; /* Blue */
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    animation: spin 2s linear infinite;

    margin-left: auto;
    margin-right: auto;
  }

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

}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.invalid {
  margin-top: 0.5rem;
  color: #C3073F
}

.bigerror {
  margin-bottom: 0.5rem;
}