// Base Rules
// --------------------------------------------------


// App Structure
// ----------------------------------
* {
  box-sizing: border-box;
}

// All font sizes use rem units
// By default, 1rem equals 10px. For example, 1.4rem  === 14px
// $font-size-root value, which is on the <html> element
// is what can scale all fonts
html {
  width: 100%;
  height: 100%;

  font-size: $font-size-root;
}

body {
  width: 100%;
  max-width: 100%;

  min-width: $nav-bar-min-width;

  height: 100%;
  max-height: 100%;

  font-family: $font-family-base;
  font-size: $font-size-base;
  color: $text-color;
  background-color: $body-bg;
}

// Font size of heading
// ----------------------------------

@each $h, $s in $headings {
  #{$h} {
    font-size: $s;
  }
}

// Element base rule
// ----------------------------------

h1, h2 {
  margin-top: ($spacer * 2);
  margin-bottom: $spacer;
}

p {
  line-height: $line-height-base;
  margin-bottom: $spacer;
}

a {
  color: $link-color;
  background: transparent;
  text-decoration: none;

  &:hover {
    color: $link-hover-color;
  }
}

ul, li {
  padding: 0;
}

li {
  list-style: none;
}
