// *,
// *::before,
// *::after {
  // box-sizing: inherit;
  // outline: 1px dotted salmon;
// }
html {
  font-family: sans-serif;
  font-size: 16px;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  // padding: 0 2.5em;
  font-size: 100%;
  line-height: 1.5;
  background: #808080;
  color: #111;
  min-height: 100%;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: subpixel-antialiased !important;
}
body,
select {
  font-family: brandosans-regular-v100, AvenirNext-Regular, Corbel, "Lucida Grande", "Trebuchet Ms", "Segoe Ui", sans-serif;
}

a:active,
a:hover {
  outline: 0;
}

pre[class*="language-"],
code[class*="language-"] {
  font-family: "Fira Mono", Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace !important;
}

[class*="language-"] a {
  background: transparent;
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}

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

header,
main,
footer {
  display: block;
}
main,
footer {
  padding-right: 3.5rem;
  padding-left: 3.5rem;
  overflow: auto;
}
header,
select,
footer {
  letter-spacing: .05em;
}
header,
footer {
  padding-top: 1rem;
  background-color: $dark0_hard;
//  background: $dark0_hard url(../img/spectrum.png) fixed;
  color: $light0_hard;
  padding-bottom: 1px; // somehow collapses otherwise
}
// header {
  // padding-top: 1rem;
  // background-color: $dark0_hard;
  // background: $dark0_hard url(../img/spectrum.png) fixed;
  // color: $light0_hard;
  // padding-bottom: 1px; // somehow collapses otherwise
// }
footer {
  text-align: center;
}
footer a {
  display: block;
  text-decoration: none;
  padding: .25em 0 1.5em;
  color: $light0;
}
footer a:hover {
  color: peachpuff;
  text-decoration: underline;
}
main {
  padding-bottom: 6em;
}

// .col {
  // overflow: hidden;
// }
.col pre {
  max-height: 300px;
  border-radius: 5px;
}
.pad-h {
  padding-right: 3.5rem;
  padding-left: 3.5rem;
}
// only for screenshot
.col .screenshot {
  display: inline-block;
  font-size: 16px;
  padding-left: 1.5em;
  padding-right: 3.5em;
  padding-top: .5em;
  border: 1px solid #eee;
  border-color: #f4f4f4 #eee #ebebeb;
}
