svg.icon {
  font-size: inherit;
  vertical-align: bottom;
}

body {
  font-family: Lato, sans-serif;
  color: $foreground-color;
}

a[target]:hover {
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  padding: 0.15em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}

p {
  padding: 0 0.5em;
  margin: 0.5em 0;
  font-family: 'Noto Serif KR', serif;
  line-height: 1.2em;
  text-align: center;
  text-transform: none;
  color: $highlight-color;

  a, a:active, a:visited, a:hover {
    color: $foreground-color;
  }

  a:hover {
    text-decoration: underline;
  }
}

i {
  font-family: Allura, cursive;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.2em;
  display: inline-block;
  color: $foreground-color;
}

b {
  font-style: italic;
  color: $foreground-color;
}

@mixin font-size($element, $size) {
  #{$element} { 
    font-size: $size;    
    > .header-height { height: $size * 1.5; }
  }
}

@mixin font-sizes($scale) {
  @include font-size(h1, 2.0rem * $scale);
  @include font-size(h2, 1.7rem * $scale);
  @include font-size(h3, 1.5rem * $scale);
  @include font-size(h4, 1.3rem * $scale);
  @include font-size(h5, 1.1rem * $scale);
  @include font-size(h6, 0.9rem * $scale);
}

@include font-sizes(1.0);

@include breakpoint-sm {
  @include font-sizes(1.3);
  p { font-size: 1rem; }
}

@include breakpoint-md {
  @include font-sizes(1.5);
  p { font-size: 1.1rem; }
}

@include breakpoint-lg {
  @include font-sizes(1.7);
  p { font-size: 1.5rem; }
  p.smaller { font-size: 1.2rem; }
}
