html {
    box-sizing: border-box;
  }
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }
  html,
  body {
    margin: 0;
  }
  html {
    font-size: 14px;
  }
  body {
    background-color: #e6e6e6;
    font-family: "Open Sans", sans-serif;
  }
  h1,
  h2 {
    margin-top: 0;
    font-family: "Oswald", sans-serif;
    color: #fff;
  }
  h1 {
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 0.67rem;
  }
  h2 {
    font-weight: normal;
    font-size: 1.75rem;
    line-height: 1.47;
    margin-bottom: 0.5rem;
  }
  p {
    margin-top: 0;
    line-height: 1.5;
  }
  a {
    text-decoration: none;
    color: #293a4a;
  }
  a:visited {
    color: #293a4a;
  }
  select {
    margin-bottom: 1.22rem;
  }
  .subtitle {
    color: #fff;
    margin-bottom: 2.22rem;
    font-size: 1.33rem;
    font-weight: 300;
    line-height: 1.3;
  }
  .outer-wrapper {
    background-color: #3776ad;
    padding: 6%;
    padding-bottom: 92px;
    text-align: center;
  }
  .content-wrapper {
    display: inline-block;
    text-align: left;
  }
  select {
    font-size: 18px;
    font-weight: 300;
    font-family: "Open Sans", sans-serif;
    color: #4a4a4a;
    border: 1px solid #466580;
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 2px 0 rgb(255, 255, 255);
    background: #e6e6e6
      linear-gradient(rgb(242, 242, 242) 0%, rgb(212, 212, 212) 100%);
    width: 280px;
    height: 36px;
    padding-left: 0.5em;
  }
  #postcard {
    width: 280px;
    height: 202px;
    position: absolute;
    background-image: url("../img/empty-state@2x.jpg");
    background-size: cover;
    box-shadow: 3px 6px 20px 0 rgba(0, 0, 0, 0.5);
    padding-top: 58px;
  }
  #greeting {
    font-family: "Boogaloo", cursive;
    text-align: center;
    font-size: 19px;
    color: #fdfcfc;
    margin-bottom: 2px;
  }
  #state-heading {
    font-family: "Oswald", sans-serif;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    font-size: 35px;
    line-height: 1.1;
    color: #fff;
    float: left;
    width: 100%;
  }
  footer {
    text-align: center;
    border-top: 1px solid #c0c0c0;
    margin-top: 150px;
    padding: 20px;
  }
  footer p {
    font-weight: 300;
    color: #575757;
    margin-bottom: 0;
  }
  
  @media (min-width: 400px) {
    html {
      font-size: 16px;
    }
  }
  
  @media (min-width: 470px) {
    html {
      font-size: 17px;
    }
    .outer-wrapper {
      padding-top: 30px;
      padding-bottom: 140px;
    }
    select {
      width: 300px;
    }
    #postcard {
      width: 406px;
      height: 292px;
      padding-top: 88px;
    }
    #greeting {
      font-size: 28px;
      margin-bottom: 2px;
    }
    #state-heading {
      font-size: 50px;
    }
    footer {
      margin-top: 194px;
    }
  }
  
  @media (min-width: 960px) {
    html {
      font-size: 18px;
    }
    .outer-wrapper {
      padding-bottom: 80px;
    }
    .content-wrapper {
      max-width: 850px;
      margin: auto;
      padding: 0 20px;
    }
    .step {
      display: inline-block;
      vertical-align: top;
    }
    .first.step {
      width: 300px;
      margin-right: 94px;
    }
    .second.step {
      width: 406px;
    }
    footer {
      padding: 30px;
    }
  }