App.scss

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
@import url('https://fonts.googleapis.com/css?family=PT+Serif:400,700');
@import "variables.scss";

* { box-sizing: border-box; font-family: $sans; }
html {
  min-width: 320px;
}
body, h1, h2, h3, p { margin: 0; padding: 0; font-weight: 400;}

a {
  color: $teal;
  text-decoration: none;
}
.desktop { display: none;
  @include desktop() { display: block }
}
.mobile { display: block;
  @include desktop() { display: none; }
}

.App {
  background-repeat: no-repeat;
  background-size: 300%;
  background-position-x: 50%;
  background-position-y: 70px;
  text-align: center;
  @include desktop() {
    background-size: 100%;
    background-position-y: 61px;
  }
  section {
    background: white !important;
    border: 1px solid $borderColor;
    margin: $padding;
    padding: calc(#{$padding}*2);
    @include desktop() {
      max-width: 715px;
      margin: $padding auto;
    }
  }
}

h1 {
  color: $primaryText;
  font-family: $serif;
}

h2 {
  color: $primaryText;
  font-size: 18px;
  font-family: $serif;
}
h3 {
  font-size: 16px;
  font-family: $serif;
}
hr {
  margin: calc(#{$padding} * 4) 0;
  border-color: white;
}

.Footer {
  height: 120px;
  background-color: $lightGrayBg;
  padding: calc(#{$padding} * 1.5);
  @include desktop() {
    padding: $padding 20%;
  }
  div {
    float: left;
    text-align: left;
    font-size: 12px;

    p, a {
      color: $lightGrayText;
      text-decoration: none;
    }
  }
  .logo {
    width: 80px;
  }
  .social {
    float: right;
    width: 27px;
    margin-left: $padding;
  }
}