html {
  font-size: 18px;
}

body {
  background: e6e6e6;
  color: #297373;
  font-family: 'Fira Sans', sans-serif;
  text-align: center;
}

a {
  color: #FF8552;
  text-decoration: none;
}

a:visited {
  color: #FF8552;
}

header {
  font-family: 'Merriweather', serif;
  font-size: 1.2rem;
  text-align: left;
}
section {
  font-size: 1.5rem;
  line-height: 200%;
  text-align: left;
}

footer {
  font-size: .8rem;
  text-align: center;
}

/* classes, etc. */

.wrapper {
  margin: 0 auto;
  width: 55%;
}

/* couldn't resist changing colors on size */

@media (max-width: 900px) {
  html { font-size: 15px; }

  body {
    background: #fff;
    color: #43BCCD;
  }
  
  a,
  a:visited {
    color: #F9C80E;
  }
  header { font-size: 1.2rem;}

  section {font-size: 1.4rem;}
  .wrapper {
    width: 80%;
  }
}
@media (max-width: 400px) {
  html { font-size: 15px; }

  body {
    background: #4C5B5C;
    color: #fff;
  }
  
  a,
  a:visited {
    color: #DB5461;
  }
  
  header { font-size: 1rem;}

  section {font-size: 1.2rem;}
  .wrapper {
    width: 90%;
  }
}