body {
  background: #fafafa;
  color: #333333;
  margin-top: 5rem;
}

h1, h2, h3, h4, h5, h6 {
  color: #444444;
}

ul {
  margin: 0;
}

.bg-steel {
  background-color: #5f788a;
}

.site-header .navbar-nav .nav-link {
  color: #cbd5db;
}

.site-header .navbar-nav .nav-link:hover {
  color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}

.content-section {
  background: #ffffff;
  padding: 10px 20px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-bottom: 20px;
}

.article-title {
  color: #444444;
}

a.article-title:hover {
  color: #428bca;
  text-decoration: none;
}

.article-content {
  white-space: pre-line;
}

.article-img {
  height: 65px;
  width: 65px;
  margin-right: 16px;
}

.article-metadata {
  padding-bottom: 1px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e3e3e3
}

.article-metadata a:hover {
  color: #333;
  text-decoration: none;
}

.article-svg {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

.account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
}

.account-heading {
  font-size: 2.5rem;
}

.ball {
      display: inline-block;
      width: 60%;
      height: 60%;
      margin: 20px;
      border-radius: 50%;
      position: relative;
      background: radial-gradient(circle at 50% 40%, #fcfcfc, #efeff1 66%, #9b5050 100%);
      overflow: hidden;
      animation: ballGrow 2s ease-out forwards;
      transform: scale(0.5);
    }
    .ball:after {
      content: "";
      position: absolute;
      top: 5%;
      left: 10%;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
      -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
      -moz-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
      -ms-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
      -o-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
      transform: translateX(-80px) translateY(-90px) skewX(-20deg);
    }

    .stage {
      width: 75px;
      height: 75px;
      display: inline-block;
      margin: 10px;
      -webkit-perspective: 90px;
      -moz-perspective: 90px;
      -ms-perspective: 90px;
      -o-perspective: 90px;
      perspective: 90px;
      -webkit-perspective-origin: 50% 50%;
      -moz-perspective-origin: 50% 50%;
      -ms-perspective-origin: 50% 50%;
      -o-perspective-origin: 50% 50%;
      perspective-origin: 50% 50%;
    }

    .number {
      position: absolute;
      width: 100%;
      text-align: center;
      line-height: 45px;
      font-size: 16px;
      color: black;
      font-family: Arial, sans-serif;
      animation: ballRoll 2s ease-out;
    }

    .number:after {
      content: attr(data-number);
      position: absolute;
      transform: translateX(-75%);
      opacity: 0;
      animation: numberReveal 0.1s 1.5s reverse forwards;
    }

    .number:before {
      content: "";
      position: absolute;
      transform: translateX(-25%);
      animation: numberReveal 0.1s 1.5s forwards;
    }

    @keyframes ballRoll {
      0%, 20%, 50% {
        opacity: 1;
        transform: translateY(0) rotateX(0) scale(1);
      }
      10%, 35%, 75% {
        transform: translateY(100%) rotateX(170deg) scale(0.4);
      }
      11%, 36%, 76% {
        transform: translateY(-100%) rotateX(-170deg) scale(0.3);
        opacity: 0;
      }

    }

    @keyframes ballGrow {
      0% {
        transform: scale(0.5);
      }
      100% {
        transform: scale(1);
      }
    }

    @keyframes numberReveal {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }


    .stage:nth-child(2) .ball,
    .stage:nth-child(2) .number {
      animation-delay: 0.3s;
    }

    .stage:nth-child(2) .number:after,
    .stage:nth-child(2) .number:before {
      animation-delay: 1.8s;
    }

    .stage:nth-child(3) .ball,
    .stage:nth-child(3) .number {
      animation-delay: 0.6s;
    }

    .stage:nth-child(3) .number:after,
    .stage:nth-child(3) .number:before {
      animation-delay: 2.1s;
    }

    .stage:nth-child(4) .ball,
    .stage:nth-child(4) .number {
      animation-delay: 0.9s;
    }

    .stage:nth-child(4) .number:after,
    .stage:nth-child(4) .number:before {
      animation-delay: 2.4s;
    }

    .stage:nth-child(5) .ball,
    .stage:nth-child(5) .number {
      animation-delay: 1.2s;
    }

    .stage:nth-child(5) .number:after,
    .stage:nth-child(5) .number:before {
      animation-delay: 2.7s;
    }

    .stage:nth-child(6) .ball,
    .stage:nth-child(6) .number {
      animation-delay: 1.5s;
    }

    .stage:nth-child(6) .number:after,
    .stage:nth-child(6) .number:before {
      color: red;
      animation-delay: 3.0s;
    }

    .stage:nth-child(7) .ball,
    .stage:nth-child(7) .number {
      animation-delay: 1.8s;
    }

    .stage:nth-child(7) .number:after,
    .stage:nth-child(7) .number:before {
        color: red;
        animation-delay: 3.3s;
    }