@import "../../stylesheets/modularscale";

$modularscale: (
  base: 16px,
  ratio: 1.5
);

@debug ms(-1);
@debug ms();
@debug ms(0);
@debug ms(1);
@debug ms(2);

$modularscale: (
  base: 1em,
  ratio: 1.3,
  20em: (
    ratio: 1.3
  ),
  60em: (
    ratio: 1.6
  ),
);

body {
  line-height: 1.3;
  margin: 0 auto;
  padding: 10% 5% 50%;
  max-width: 42em;
  font-size: ms(0);
}

h1 {
  @include ms-respond(font-size, 5);
  line-height: 1;
}
h2 {
  @include ms-respond(font-size, 4);
  line-height: 1;
}
h3 {
  @include ms-respond(font-size, 3);
  line-height: 1;
}
h4 {
  @include ms-respond(font-size, 2);
  line-height: 1;
}
h5 {
  @include ms-respond(font-size, 1);
  line-height: 1;
}
h6 {
  @include ms-respond(font-size, 0);
  line-height: 1;
}