body {
  background-color: #f1f3f5;
}

.c-section {
  min-height: 100vh;
  padding: 15px;
}

.c-section--primary {
  background-color: #dee2e6;
  color: #212529;
}

.c-section--secondary {
  margin-top: 100vh;
}

.c-section__btn {
  cursor: pointer;
  background-color: #12b886;
  border: 0;
  color: white;
}

.c-section__btn:hover,
.c-section__btn:focus {
  background-color: #0ca678;
  color: white;
  box-shadow: none;
}

.c-section > .lead {
  color: #868e96;
}

.c-section__link {
  color: #495057;
}

.c-section__link:hover {
  color: #12b886;
}

.c-section__footer {
  color: #868e96;
}

.github-corner {
  display: inline-block;
  fill: #12b886;
  color: #fff;
  position: absolute;
  top: 0;
  border: 0;
  right: 0;
  z-index: 3;
}

.github-corner:hover,
.github-corner:focus {
  color: white;
}

.u-flex-extend {
  -webkit-box-flex: 1;
    -ms-flex: 1;
        flex: 1
}

.github-corner:hover .octo-arm {
  -webkit-animation: octocat-wave 560ms ease-in-out;
  animation: octocat-wave 560ms ease-in-out;
}

@-webkit-keyframes octocat-wave {
  0%,to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  20%,60% {
    -webkit-transform: rotate(-25deg);
    transform: rotate(-25deg);
  }
  40%,80% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
}

@keyframes octocat-wave {
  0%, to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  20%, 60% {
    -webkit-transform:rotate(-25deg);
    transform:rotate(-25deg);
  }
  40%, 80% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
}

@media (max-width: 500px) {
  .github-corner:hover .octo-arm {
    -webkit-animation:none;
    animation:none
  }
  .github-corner .octo-arm {
    -webkit-animation: octocat-wave 560ms ease-in-out;
    animation: octocat-wave 560ms ease-in-out;
  }
}