body {
  background: url("../images/white-wall.jpg") repeat center; }

#banner {
  padding: 30px; }
  #banner #banner-container {
    text-align: center; }
    #banner #banner-container img#headshot {
      width: 300px;
      margin: 30px 30px 20px;
      box-shadow: 0 15px 20px rgba(51, 51, 51, 0.5);
      border-radius: 200px; }
      @media only screen and (max-width: 769px) {
        #banner #banner-container img#headshot {
          width: 250px;
          margin: 20px 20px 15px; } }
      @media only screen and (max-width: 480px) {
        #banner #banner-container img#headshot {
          width: 200px;
          margin: 10px; } }
    #banner #banner-container h1 {
      font-family: "Rock Salt", cursive;
      font-size: 72px;
      line-height: 100px;
      color: #3399cc;
      margin: 30px;
      text-shadow: 0 10px 10px rgba(51, 51, 51, 0.5); }
      @media only screen and (max-width: 769px) {
        #banner #banner-container h1 {
          font-size: 60px;
          line-height: 90px;
          margin: 20px; } }
      @media only screen and (max-width: 601px) {
        #banner #banner-container h1 {
          font-size: 48px;
          line-height: 72px;
          margin: 15px; } }
      @media only screen and (max-width: 480px) {
        #banner #banner-container h1 {
          font-size: 42px;
          line-height: 56px;
          margin: 15px; } }
      @media only screen and (max-width: 400px) {
        #banner #banner-container h1 {
          font-size: 30px;
          line-height: 48px; } }
  @media only screen and (max-width: 769px) {
    #banner {
      padding: 15px; } }
  @media only screen and (max-width: 601px) {
    #banner {
      padding: 10px; } }

#about {
  padding: 0px 30px 30px; }
  #about #about-container {
    background: white;
    box-shadow: 0 5px 15px rgba(51, 51, 51, 0.5);
    padding: 30px;
    max-width: 1200px;
    margin: 0 auto;
    overflow: auto; }
    @media only screen and (max-width: 769px) {
      #about #about-container {
        padding: 20px; } }
    @media only screen and (max-width: 601px) {
      #about #about-container {
        padding: 15px; } }
    #about #about-container #about-heading {
      text-align: center;
      color: #3399cc;
      font-family: "Sniglet", cursive;
      font-size: 48px;
      margin: 0;
      margin-bottom: 30px; }
      @media only screen and (max-width: 769px) {
        #about #about-container #about-heading {
          font-size: 30px; } }
      @media only screen and (max-width: 601px) {
        #about #about-container #about-heading {
          font-size: 24px;
          margin-bottom: 5px; } }
      @media only screen and (max-width: 480px) {
        #about #about-container #about-heading {
          font-size: 20px; } }
      @media only screen and (max-width: 400px) {
        #about #about-container #about-heading {
          font-size: 18px; } }
      @media only screen and (max-width: 350px) {
        #about #about-container #about-heading {
          font-size: 14px; } }
    #about #about-container .about-paragraph {
      font-family: "Mandali", sans-serif;
      font-size: 18px;
      line-height: 24px;
      color: #003366;
      margin: 0;
      margin-top: 15px; }
      @media only screen and (max-width: 769px) {
        #about #about-container .about-paragraph {
          font-size: 16px;
          line-height: 21px; } }
      @media only screen and (max-width: 480px) {
        #about #about-container .about-paragraph {
          font-size: 14px;
          line-height: 20px; } }
      @media only screen and (max-width: 400px) {
        #about #about-container .about-paragraph {
          font-size: 12px;
          line-height: 16px; } }
  @media only screen and (max-width: 769px) {
    #about {
      padding: 15px; } }
  @media only screen and (max-width: 601px) {
    #about {
      padding: 10px; } }

#contact {
  padding: 0 30px 30px; }
  #contact #contact-container {
    background: #003366;
    box-shadow: 0 5px 15px rgba(51, 51, 51, 0.5);
    padding: 30px;
    max-width: 630px;
    margin: 0 auto;
    overflow: auto;
    text-align: center; }
    @media only screen and (max-width: 769px) {
      #contact #contact-container {
        padding: 30px;
        max-width: 500px; } }
    @media only screen and (max-width: 601px) {
      #contact #contact-container {
        padding: 20px;
        max-width: 300px; } }
    #contact #contact-container #contact-heading {
      color: white;
      font-family: "Sniglet", cursive;
      font-size: 48px;
      margin: 0;
      margin-bottom: 30px; }
      @media only screen and (max-width: 769px) {
        #contact #contact-container #contact-heading {
          font-size: 48px;
          margin-bottom: 20px; } }
      @media only screen and (max-width: 601px) {
        #contact #contact-container #contact-heading {
          font-size: 30px;
          margin-bottom: 10px; } }
    #contact #contact-container a, #contact #contact-container a:visited {
      color: white;
      display: block;
      font-family: "Mandali", sans-serif;
      font-size: 40px;
      line-height: 48px;
      text-decoration: none;
      margin: 0;
      margin-top: 30px;
      transition: 0.5s linear; }
      @media only screen and (max-width: 769px) {
        #contact #contact-container a, #contact #contact-container a:visited {
          font-size: 32px;
          line-height: 36px;
          margin-top: 20px; } }
      @media only screen and (max-width: 601px) {
        #contact #contact-container a, #contact #contact-container a:visited {
          font-size: 20px;
          line-height: 24px;
          margin-top: 10px; } }
    #contact #contact-container a:hover {
      color: #3399cc; }
  @media only screen and (max-width: 769px) {
    #contact {
      padding: 15px; } }
  @media only screen and (max-width: 601px) {
    #contact {
      padding: 10px; } }

#resume {
  padding: 0 30px 30px; }
  #resume #resume-container {
    background: white;
    box-shadow: 0 5px 15px rgba(51, 51, 51, 0.5);
    padding: 30px;
    max-width: 630px;
    margin: 0 auto;
    overflow: auto;
    font-size: 0;
    text-align: center; }
    @media only screen and (max-width: 769px) {
      #resume #resume-container {
        padding: 30px;
        max-width: 500px; } }
    @media only screen and (max-width: 601px) {
      #resume #resume-container {
        padding: 20px;
        max-width: 300px; } }
    #resume #resume-container #resume-heading {
      color: #3399cc;
      font-family: "Sniglet", cursive;
      font-size: 48px;
      margin: 0;
      margin-bottom: 10px; }
      @media only screen and (max-width: 769px) {
        #resume #resume-container #resume-heading {
          font-size: 48px;
          margin-bottom: 0px; } }
      @media only screen and (max-width: 601px) {
        #resume #resume-container #resume-heading {
          font-size: 30px;
          margin-bottom: 0px; } }
    #resume #resume-container a, #resume #resume-container a:visited {
      display: inline-block;
      width: 220px;
      height: 50px;
      margin: 15px 10px 0px;
      text-align: center;
      text-decoration: none;
      box-shadow: 0 3px 5px 0 rgba(51, 51, 51, 0.5);
      font-size: 24px;
      font-family: "Mandali", sans-serif; }
      #resume #resume-container a:hover, #resume #resume-container a:visited:hover {
        box-shadow: 0px 6px 10px 0px rgba(51, 51, 51, 0.5); }
    #resume #resume-container .button, #resume #resume-container .button:visited {
      border: #003366 solid 5px;
      background: white;
      color: #003366; }
    #resume #resume-container .button-inverse, #resume #resume-container .button-inverse:visited {
      border: #003366 solid 5px;
      background: #003366;
      color: white; }
  @media only screen and (max-width: 769px) {
    #resume {
      padding: 15px 15px 30px; } }
  @media only screen and (max-width: 601px) {
    #resume {
      padding: 10px 10px 30px; } }

footer {
  width: 100%;
  text-align: center;
  height: 60px;
  background: #3399cc;
  margin: 0;
  padding: 0;
  overflow: auto; }
  footer p {
    color: white;
    font-family: "Mandali", sans-serif;
    font-size: 18px;
    line-height: 24px;
    margin: 18px 30px; }
    footer p a, footer p a:visited, footer p a:hover {
      color: #003366;
      text-decoration: none; }
    @media only screen and (max-width: 769px) {
      footer p {
        font-size: 14px; } }

/*# sourceMappingURL=main.css.map */