:root {
  font-size: 2.3vmin; }
  @media (max-width: 795px) {
    :root {
      font-size: 19px; } }
* {
  font-family: 'Open Sans';
  font-weight: 300;
  text-align: center;
  line-height: 1.4;
  margin: 0; }
  * a {
    font-size: 0.8rem;
    text-decoration: none;
    color: #b51717; }
    * a:hover {
      color: #881111; }
  * h1 {
    font-size: 1.5rem; }
    * h1 + h2 {
      padding: 0 0.25rem; }
  * h2 {
    font-size: 1.1rem;
    color: #b51717; }
  * h3 {
    font-size: 1.1rem;
    color: #b51717;
    padding: 0.7rem 0; }
  * p {
    font-size: 0.8rem; }
  * img {
    width: 8rem; }

nav {
  border: 1px solid black; }

footer {
  padding: 0.7rem;
  color: white;
  border-top: 2px solid #f0f0f0;
  background-color: #313131; }

body {
  background-color: #f8f8f8; }
  body #page2, body #page4, body #page6 {
    background-color: white; }
  body .button {
    display: inline-block;
    padding: 0.2rem 0;
    margin: 0.5rem 1.2rem;
    width: 5rem;
    border: 1px solid #098ac1;
    color: #098ac1;
    border-radius: 7px; }
    body .button.preview {
      border: 2px solid #07AD96;
      color: #07AD96; }
      body .button.preview:hover {
        background-color: #07AD96;
        color: white; }
    body .button.contact {
      color: #069e89;
      border-color: #069e89;
      width: 7rem; }
      body .button.contact:hover {
        background-color: #069e89;
        color: white; }
    body .button.resume {
      color: #cc1a1a;
      border-color: #cc1a1a;
      width: 7rem; }
      body .button.resume:hover {
        background-color: #cc1a1a;
        color: white; }
    body .button:hover {
      background-color: #098ac1;
      color: white; }
  body .card {
    margin: 0.5rem;
    width: 20rem;
    display: inline-block; }
    body .card p, body .card li {
      font-size: 0.9rem;
      text-align: left; }
      body .card p::before, body .card li::before {
        content: "- "; }
    @media (max-width: 400px) {
      body .card {
        width: 80%; } }

#page1 {
  background-image: url(../images/the6.png);
  background-size: cover;
  padding: 0 1.0rem 2.5rem; }
  #page1 h1, #page1 p {
    padding: 0.9rem; }
  #page1 .logo {
    width: 10rem; }
  #page1 .intro {
    margin: 0 auto;
    max-width: 40rem; }
  #page1 .spacer {
    height: 2.5rem; }

/*
#page2 h2 + p {
  padding: 1rem 0;
  color: #07AD96;
  max-width: 24rem;
  margin: 0 auto; }
@media (min-width: 400px) {
  #page2 .card > p {
    padding-left: 2rem; } }

#page3 .card {
  border: 1px solid #dfdfdf;
  border-radius: 5px;
  background-color: #f3f3f3;
  min-height: 33rem;
  display: inline-block;
  vertical-align: top;
  padding: 0 1rem; }
  #page3 .card p + .button {
    margin: 1.5rem 0; }
  #page3 .card:hover {
    background-color: #eeeeee; }
  #page3 .card .projImg {
    width: 10rem;
    margin: 1rem auto; }
    #page3 .card .projImg img {
      width: 100%; }
*/

#page4 {
    padding: 2.5rem 1.0rem 2.5rem }
    #page4 .SimpleBlocksIcon {
      width: 3.5rem; }
    #page4 .SimpleBlocksScreen {
        max-width: 18rem;
        width: 100%;
    }
    #page4 h1 {
      color: #07AD96; }
    #page4 p {
      max-width: 40rem;
      margin: 0 auto; }
    #page4 .appBadge {
      display: inline-block;
      width: 7rem;
      margin: 1.2rem 1rem; }

#page5 {
    padding: 2.5rem 1.0rem 2.5rem
}

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