@import "normalize.css";

html, body {
  min-height: 100%;
  background-color: #fafafa;
}

main {
  max-width: 640px;
  margin: 0 auto;
}

main section {
  padding: 2em 0;
}

/* Loader */
.loader {
  position: relative;
  display: flex;
}
.loader:before , .loader:after {
  content: '';
  width: 15px;
  height: 15px;
  display: inline-block;
  position: relative;
  margin: 0  5px  ;
  border-radius: 50%;
  color: #8bc7a8;
  background: currentColor;
  box-shadow: 50px 0 ,  -50px 0;
  animation: left 1s infinite ease-in-out;
}
.loader:after {
  color: #5198c4;
  animation: right 1.1s infinite ease-in-out;
}


@keyframes right {
  0% , 100%{transform: translateY(-10px) }
  50% { transform: translateY(10px) }
}

@keyframes left {
  0% , 100%{ transform: translateY(10px) }
  50% { transform: translateY(-10px) }
}