$gradient: linear-gradient(to right, rgb(98, 127, 222), rgb(83, 74, 69));
$footer-height: 85px;

header {
  clear: both;
  padding: 20px;
  margin-bottom: 1rem;

  background: rgb(83, 74, 69); /* fallback for old browsers */
  background: $gradient; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  color: white;

  nav {
    a {
      color: white;
      margin-left: 2rem;
      padding-bottom: 3px;
      font-weight: bold;
      border-bottom-color: rgba(255, 255, 255, 0.3);

      &:hover {
        border-color: white;
      }
    }
  }

  .hero {
    clear: both;
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 1rem;

    h1 {
      text-align: center;
      font-size: 2rem;
    }

    .button {
      text-transform: uppercase;
      font-size: 1.1rem;
      display: inline-block;
      background-color: white;
      color:rgb(98, 127, 222);
      border-radius: 2rem;
      padding: 0.75em 2em;
      font-weight: 600;
    }
  }
}

footer {
  background: $gradient;
  padding-top: 30px;
  padding-bottom: 30px;
  color: white;
  font-weight: bold;
  height: $footer-height;
  text-align: center;
}