/* 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%;

}