/* Settings */

$min_width: 320px;
$max_width: 1200px;
$min_font: 16px;
$max_font: 24px;

$text-color: #353535;
$link-color: #3c6e71;
$bg-color: #d9d9d9;
$accent-color-1: #f3f4f4;
$accent-color-2: #777777;

$header-font: Inter, sans-serif;
$body-font: 'Crimson Pro', serif;
$code-font: 'JetBrains Mono', monospace, sans-serif;

/* Responsive Text */

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
  $u1: unit($min-vw);
  $u2: unit($max-vw);
  $u3: unit($min-font-size);
  $u4: unit($max-font-size);

  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
    & {
      font-size: $min-font-size;
      @media screen and (min-width: $min-vw) {
        font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
      }
      @media screen and (min-width: $max-vw) {
        font-size: $max-font-size;
      }
    }
  }
}

html {
    @include fluid-type($min_width, $max_width, $min_font, $max_font);
}

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

h1, h2, h3, h4, h5, h6 {
    font-family: $header-font;
}

p, h1, h2, h3, h4, h5, h6, nav, pre, ul, ol, table, blockquote, hr {
    margin: 40px auto;
    max-width: 650px;
    padding: 0;
}

p {
    line-height: 1.6em;
}

/* Navigation */

nav {
    font-family: $header-font;
    font-weight: 800;
}

.current {
    color: $text-color;
}

/* Links */

a {
    text-decoration: none;
    color: $link-color;
}

a:hover {
    text-decoration: underline;
}

/* CSS for Markdown */

code {
  font-family: $code-font;
  font-size: .75em;
  border: 1px solid $accent-color-2;
  border-radius: .25rem;
  padding: 0 .125rem;
  background: $accent-color-1;
}

pre code {
  display: block;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
  overflow-x: scroll;
  max-width: 100%;
  min-width: 100px;
}

blockquote {
    border-left: 4px solid $accent-color-1;
    padding: 0 15px;
    color: $accent-color-2;
}

blockquote blockquote {
    padding-right: 0;
}

hr {
  border-color: $accent-color-2;
}

/* Tables */

table {
  border: 1px solid $accent-color-2;
  /*margin: 1rem 0;*/
}

table tr:nth-child(2n) {
  background: $accent-color-1;
}

thead {
  background: $text-color;
  color: $bg-color;
  font-family: $header-font;
}

td, th {
  padding: .35rem .7rem;
  border: 1px solid $accent-color-1;
}

/* Scroll Indicator */

/* Style the header: fixed position (always stay at the top) */
.header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: $accent-color-1;
}

/* The progress container (grey background) */
.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 8px;
  background: $accent-color-2;
  width: 0%;
}