*,
::before,
::after {
  box-sizing: inherit;
  // outline: 1px dotted salmon;
}

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

// http://madebymike.com.au/writing/precise-control-responsive-typography/
// http://codepen.io/MadeByMike/pen/YPJJYv?editors=110
// These values are the minimum and maximum viewport sizes to apply the font scaling
$min_width: 400;
$max_width: 800;
// These values represent the range of fon-tsize to apply
// These values effect the base font-size, headings and other elements will scale proportionally
$min_font: 14;
$max_font: 24;

:root { font-size: #{$min_font}px; }
// This part is a little bit ugly, I will explain what is going on in a blog post soon.
@media (min-width: #{$min_width}px) and (max-width: #{$max_width}px){
  :root {
    font-size: calc( #{$min_font}px + (#{$max_font} - #{$min_font}) * ( (100vw - #{$min_width}px) / ( #{$max_width} - #{$min_width}) ));
  }
}
@media (min-width: #{$max_width}px){
   :root {
     font-size: #{$max_font}px;
   }
}

html {
  box-sizing: border-box;
  cursor: default;
  font-family: sans-serif;
  line-height: 1.5;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

html,
body {
  background-color: color(monochrome-bluesky-01);
  color: color(gray-20);
  min-height: 100vh;
}

body {
  margin: 0;
  font: 100%/#{$line-height} $bodytext;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: subpixel-antialiased !important;
}

body {
  font-family: $wf-bodytext;
}

.header {
  position: relative;
  z-index: 2;
  height: 96px;

  @include mq($until: tablet) {
    text-align: center;
    // padding: #{$half-line-height}em 1.5em .309em;
    padding: .5em 1.5em .309em;
  }

  @include mq($from: tablet) {
    background-image: linear-gradient(to bottom, $gray-dark, $gray-dark 50%, transparent 0, transparent);
  }

}

.repo-title svg {
  @include mq($until: tablet) {
    display: none;
  }
}

// .tagline {
//   color: $red;
// }

.conditionallyhidden {
  @include mq($from: tablet) {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}

p {
  margin: 0;
  // padding: .75em 0;
  padding: #{$half-line-height}em 0;
}

h3 + p,
h4 + p,
article h3 + ul,
article h4 + ul {
  padding-top: 0;
}

article p,
blockquote,
.svg-colortiles {
  max-width: 36em;
}

blockquote {
  font-family: $wf-bodytext-italic;
}

h1,
h2,
h3,
h4 {
  font-weight: normal;
}

h1 {
  font-family: $wf-semibold;
  font-size: 2em;
  margin: 0;
  line-height: 1.075;
  font-weight: normal;
  letter-spacing: -.0125em;
}


h2 {
  font-size: 1.5em;
  color: color(red-14);
  margin: 0 0 .5em;
  line-height: .95;

  @include mq($from: tablet) {
    font-family: $wf-extralight;
    font-size: 3em;
  }
  @include mq($from: desktop) {
    font-size: 4em;
  }
  @include mq($from: wide) {
    font-size: 5em;
  }

}

h3 {
  font-family: $wf-subheader;
}

h3,
h4 {
  font-size: 1.33334em;
  margin: #{$half-line-height}em 0 -.05em;
  // padding: 0;
  color: color(monochrome-bluesky-18);
}

h4 {
  font-family: $wf-semibold;
  text-transform: uppercase;
}

code,
pre {
  font-family: $monospace;
  font-size: .75rem;
}

pre,
code {
  font-family: $wf-monospace;
}

pre {
  margin: 2em 0;
  padding: .25em 1.5em 1em;
  white-space: pre;
  word-wrap: normal;
  overflow: auto;

  figcaption & {
    white-space: normal;
    font-size: .65em;
    margin: 0;
    padding: 0.75em 0;
    color: color(monochrome-bluesky-12);
  }
}

article > pre {
  background-color: color(monochrome-bluesky-18);
  color: color(monochrome-bluesky-01);
}

pre code {
  margin: 0;
  padding: 0;
  background-color: transparent;
  border: none;
  word-wrap: normal;
  max-width: initial;
  display: inline;
  overflow: initial;
  line-height: inherit;
}

pre code:before,
pre code:after {
  content: normal;
}

b,
strong {
  font-weight: normal;
  font-family: $wf-semibold;
}

i,
em {
  font-style: normal;
  font-weight: normal;
  font-family: $wf-bodytext-italic;
}

blockquote em,
blockquote b,
blockquote strong {
  font-style: normal;
  font-weight: normal;
  font-family: $wf-semibolditalic;
}

small,
.small {
  font-size: 83.3333%;
}

sub,
sup {
  font-size: 83.3333%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

::-moz-selection {
  background-color: adjust-color(color(bluesky-11),$lightness: 30%);
  color: #000000;
  text-shadow: none;
}

::selection {
  background-color: adjust-color(color(bluesky-11),$lightness: 30%);
  color: #000000;
  text-shadow: none;
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
  display: block;
  border-style: none;
}

svg {
  fill: currentColor;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: .75em 0;
}

a {
  background-color: transparent;
  color: color(bluesky-13);
  text-decoration: none;
  transition: all .3s;
}

article a,
footer a {
  box-shadow: inset 0 -.33em 0 transparent;
}

article a:hover,
footer a:hover {
  color: color(bluesky-16);
  box-shadow: inset 0 -.33em 0 transparentize($blue,.5);
}

a,
button {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

article ul,
article ol {
  // padding: .75em .5em;
  padding: .75em 0;
  margin-top: 0;
  margin-bottom: .5em;
}

article ul {
  // text-indent: -.2em;
  // margin-left: -.55em;
}
article ol {
//   margin-left: -.5em;
}

article ol ul {
  padding-left: 1.5em;
}

article ul li {
  list-style: none;
  position: relative;
  text-indent: -.15rem;
  // padding-left: .35em;
}

article ul li::before {
  content: " \B7"; /* middot in unicode -> &middot; */
  display: inline-block;
  font-size: 1.25em;
  line-height: 0;
  vertical-align: middle;
  position: relative;
  // top: -.05em;
  // padding-right: 4px;
  color: color(lime-13);;
  transform: translate(-.15rem,-.1em);
}

article .list-inline li::before {
  content: "";
  display: none;
}

article ul ol,
article ol ol {
  margin: .5rem 0 1rem 1.45rem;
}

article ul li li {
  margin-left: 0;
}

article ul ol li {
  margin-left: -.75rem;
}

article p code,
article ul code {
  font-size: .875em;
  margin: 0;
  border: 1px solid #ddd;
  background-color: #e6e6e6;
  border-radius: 3px;
  padding: 2px 0 0 0;
}

article p code:before,
article p code:after,
article ul code:before,
article ul code:after {
  content: "\00a0";
  letter-spacing: -0.2em;
}


.nav-site,
.footer {

  @include mq($from: tablet) {
    height: 3em;
  }

}

footer {
  position: absolute;
  right:0;bottom:0;left:0;
  min-height: 62px;
  text-align: center;
  background-color: color(monochrome-bluesky-05);
  padding: .5em;
}

main {
  min-height: calc(100vh - 17em);
  overflow: auto;
  position: relative;
  z-index: 1;
  padding: 0 1.5em 8em;

  @include mq($from: tablet) {
    min-height: calc(100vh - 9.1em);
  }
  @include mq($from: desktop) {
    padding-right: 3em;
    padding-left: 3em;
  }

  @include mq($from: xlwide) {
    min-height: calc(100vh - 5.015em);
  }
}

details > summary:first-of-type {
  border-top: 1px solid color(monochrome-bluesky-04);
  border-bottom: 1px solid  color(monochrome-bluesky-06);
  padding-top: 0.75em;
  padding-bottom: 0.75em;

  &::marker {
    color: color(lime-13);
  }

}
