styles.css

@import "./styles/paddings.css";
@import "./styles/yacf.css";
html, body {
  color: #000000;
  font-family: 'Roboto', sans-serif;
  height: 100%;
  width: 100%;
}

.header {
  background-image: linear-gradient(rgba(0, 0, 0, .65), rgba(0, 0, 0, .65)), url(./images/background.jpg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  color: #ffffff;
}

.heading {
  text-align: center;
  text-transform: uppercase;
}

.title {
  font-size: 1.2rem;
  letter-spacing: 3.5px;
  font-weight: 1000;
}

.signature {
  margin-top: 5px;
  display: block;
  font-size: 10px;
  font-weight: 500;
}

.signature a {
  color: white;
}

.subtitle {
  text-align: center;
  margin-top: 10px;
  display: block;
  font-size: 1em;
  font-weight: 300;
  color: #868e96;
}

.footer {
  min-height: 10vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  color: lightgrey;
}

/* Inputs */

.text-box {
  width: 90%;
  height: 3rem;
  padding-left: 2.5%;
  padding-right: 2.5%;
  background-color: transparent;
  color: white;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
  overflow: hidden;
}

.button {
  width: 10%;
  height: 3rem;
  background-color: transparent;
  color: white;
  font-family: 'Roboto', sans-serif;
}

.border-left {
  border-left: 2px solid white;
}

button:hover {
  cursor: pointer;
  background-color: white;
  color: rgba(0, 0, 0, 1);
}

.input {
  text-align: center;
  border-radius: 5px;
  border: 2px solid white;
}

.input.input-error {
  border-color: red;
}

.input-error-message {
  color: red;
}

.input.input-error .border-left {
  border-color: red;
}

.input.input-loading {
  height: 48px;
  border: none;
}

.input.input-loading img {
  background: white;
  height: 36px;
}

.arrows {
  width: 25px;
  height: 25px;
  position: absolute;
  bottom: 20px;
  cursor: pointer;
}

.arrows path {
  fill: #ffffff;
  stroke-width: 1px;
  animation: arrow 2s infinite;
  -webkit-animation: arrow 2s infinite;
}

@keyframes arrow {
  0% {
    opacity: 0
  }
  40% {
    opacity: 1
  }
  80% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

@-webkit-keyframes arrow
/*Safari and Chrome*/

  {
  0% {
    opacity: 0
  }
  40% {
    opacity: 1
  }
  80% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

.arrows path.a1 {
  animation-delay: -1s;
  -webkit-animation-delay: -1s;
  /* Safari 和 Chrome */
}

.arrows path.a2 {
  animation-delay: -0.5s;
  -webkit-animation-delay: -0.5s;
  /* Safari 和 Chrome */
}

.arrows path.a3 {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
  /* Safari 和 Chrome */
}

a {
  text-decoration: none;
  color: #000000;
}

.fade {
  -webkit-animation: fadein 4s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 4s;
  /* Firefox < 16 */
  -ms-animation: fadein 4s;
  /* Internet Explorer */
  -o-animation: fadein 4s;
  /* Opera < 12.1 */
  animation: fadein 4s;
}

@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;
  }
}

@keyframes fade-in-and-out {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes fade-in-and-out {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes fade-in-and-out {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fade-in-and-out {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-in-and-out {
  -webkit-animation: fade-in-and-out 2s infinite;
  -moz-animation: fade-in-and-out 2s infinite;
  -o-animation: fade-in-and-out 2s infinite;
  animation: fade-in-and-out 2s infinite;
}

a:hover {
  -webkit-animation: fade-in-and-out 2s infinite;
  -moz-animation: fade-in-and-out 2s infinite;
  -o-animation: fade-in-and-out 2s infinite;
  animation: fade-in-and-out 2s infinite;
}

.spin {
  -webkit-animation: animation-spin 2s infinite linear;
  -moz-animation: animation-spin 2s infinite linear;
  -o-animation: animation-spin 2s infinite linear;
  animation: animation-spin 2s infinite linear;
}

@-moz-keyframes animation-spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes animation-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes animation-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


@keyframes spinner {
  to {transform: rotate(360deg);}
}
 
.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #000;
  animation: spinner .6s linear infinite;
}