/*

SMOOTH RESPONSIVE RESIZE
Sizes based on View Width.

–

VARIABLES

The min screen size is 320px.

Setting 24px as the min font-size for <h1>.
Setting 64px as the max font-size for <h1>.

The objetive is make a smooth responsive resize between min e max sizes.
This will set the best size according screen size.

–

CALCULATING H1 SIZES

At 320px screen, font-size is equal 24px (7.5vw).
24*100/320 = 7.5vw

7.5vw is the "speed" for <h1> resizing.

At this speed <h1> will reach 64px at 853px.
24*100/5 = 480px

So, at 853px screen, the max font-size will be 64px.

*/

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #111;
  font-family: cousine, monospace;
  margin: 40px 16px;
}

h1, p {
  max-width: 800px;
  margin: 0 auto;  
}

h1 {
  color: #DDD;
  font-size: 24px;
  font-family: 'Ropa Sans', sans-serif;
  text-transform: uppercase;
  margin-bottom: 16px;
}

p {
  color: #9E9E9E;
  font-size: 16px;
  font-family: 'Cousine', monospace;
  line-height: 1.5;
}

@media screen and (min-width: 320px) {
  h1 {
     font-size: 7.5vw;
     margin-bottom: 5vw;    
  }  
  p {
     font-size: 5vw;
  }
}  

@media screen and (min-width: 853px) {
  h1 {
     font-size: 64px;
  }
}  

@media screen and (min-width: 640px) {
  h1 {
     margin-bottom: 32px;  
  }
} 

@media screen and (min-width: 480px) {
  p {
     font-size: 24px;
  }
}