/* Common styles, palette and elements used across sites. */

:root {

  /* RED */
  --red-900: #7f2819;
  --red-800: #a33324;
  --red-700: #c3472f;
  --red-600: #d85037;
  --red-500: #e55639;
  --red-400: #ea7061;
  --red-300: #f09b82;
  --red-200: #f6bbb2;
  --red-100: #fce6e3;

  /* ORANGE */
  --orange-900: #853f10;
  --orange-800: #a95a19;
  --orange-700: #ca6b23;
  --orange-600: #de7a28;
  --orange-500: #f1882d;
  --orange-400: #f3a457;
  --orange-300: #f7b78f;
  --orange-200: #faddb5;
  --orange-100: #fdf2e4;

  /* YELLOW */
  --yellow-900: #856f12;
  --yellow-800: #a98d17;
  --yellow-700: #cca81d;
  --yellow-600: #e4c424;
  --yellow-500: #f9cf25;
  --yellow-400: #fad95a;
  --yellow-300: #fbe48d;
  --yellow-200: #fcf0b5;
  --yellow-100: #fef9e4;

  /* GREEN */
  --green-900: #255c2b;
  --green-800: #31763a;
  --green-700: #3bb245;
  --green-600: #43a14a;
  --green-500: #47ac4f;
  --green-400: #6bbf72;
  --green-300: #92d197;
  --green-200: #c0e6c4;
  --green-100: #ebf7ec;

  /* TEAL */
  --teal-900: #18605a;
  --teal-800: #20776a;
  --teal-700: #27a78d;
  --teal-600: #2da89a;
  --teal-500: #30baa1;
  --teal-400: #59c9b5;
  --teal-300: #84d9cb;
  --teal-200: #b8ebe3;
  --teal-100: #e7f9f5;

  /* BLUE */
  --blue-900: #274266;
  --blue-800: #346082;
  --blue-700: #40729f;
  --blue-600: #4774b7;
  --blue-500: #4c7cc2;
  --blue-400: #6c95cf;
  --blue-300: #93b1de;
  --blue-200: #c1d3ed;
  --blue-100: #eaf1fa;

  /* PURPLE */
  --purple-900: #533469;
  --purple-800: #68428a;
  --purple-700: #8052a4;
  --purple-600: #8e5bb3;
  --purple-500: #965fbf;
  --purple-400: #aa7ecc;
  --purple-300: #c1a1da;
  --purple-200: #dccff0;
  --purple-100: #f3ecf9;

  /* PINK */
  --pink-900: #7f333f;
  --pink-800: #9f4366;
  --pink-700: #be546a;
  --pink-600: #d05f76;
  --pink-500: #e26680;
  --pink-400: #e88299;
  --pink-300: #f0a9b7;
  --pink-200: #f6d0d7;
  --pink-100: #fceef1;


  /* BROWN */
  --brown-900: #55402c;
  --brown-800: #70503a;
  --brown-700: #886048;
  --brown-600: #98704a;
  --brown-500: #a36c4e;
  --brown-400: #b5896a;
  --brown-300: #cbb79f;
  --brown-200: #e3d1bf;
  --brown-100: #f4eee7;


  --grey-900: #2c2c2c; /* dark */
  --grey-800: #3a3a3a;
  --grey-700: #4a4a4a;
  --grey-600: #5c5c5c;
  --grey-500: #7a7a7a;
  --grey-400: #9a9a9a;
  --grey-300: #bdbdbd;
  --grey-200: #e0e0e0;
  --grey-100: #f8f8f8; /* light */

  --paper: #f8f5f0;
  --black: #000;
  --white: #fff;
  --terminal: #0C1020;

  /* PAPER */
  --paper-900: #b4aca1;
  --paper-800: #c7bfb5;
  --paper-700: #d9d2c9;
  --paper-600: #e9e4dd;
  --paper-500: #f8f5f0;
  --paper-400: #fbf9f6;
  --paper-300: #fdfcf9;
  --paper-200: #fefdfb;
  --paper-100: #ffffff;

  /* INK*/
  --ink-900: #1f1c18;
  --ink-800: #2e2a25;
  --ink-700: #403b35;
  --ink-600: #564f48;
  --ink-500: #6d655c;
  --ink-400: #847c73;
  --ink-300: #9e968d;
  --ink-200: #bdb5ab;
  --ink-100: #ded7ce;

  --heading-font: 'Figtree', sans-serif;;
  --body-font: 'Figtree',  sans-serif;;
  --code-font: 'Consolas', 'Source Code Pro', monospace;
  --handwriting-font: 'Kalam', 'Figtree', sans-serif;
  --marker-font: 'Permanent Marker', 'Figtree', sans-serif;

  --radius: 5px;

}

/* Code blocks */

tt, code, kbd, samp, pre {
    font-family: var(--code-font);
    font-size: 0.95em; /* Rel so it scales in headings */
    line-height: 1.5;
    font-weight: 500;
}

.codehilitetable {
    display: block;
    margin-left: -1.5rem;
}

.code-block, .codehilite {
    position: relative;
    background-color: var(--ink-900);
    border-radius: var(--radius);

    padding: 0.5rem 1.5rem;
    margin: 2rem 0;
}

.code-block-language {
    display: none;
    position: absolute;
    top: 0rem;
    right: 1rem;
    color: var(--handwriting-font);
    text-transform: uppercase;
    font-size: 0.7rem;
}

p code, li code {
    padding: 0em 0.5em;
    border-radius: var(--radius);
    background-color: var(--paper-600);
}

.copy-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.25rem;
    font-weight: 300;
    }

.copy-button:before {
    font-family: 'FontAwesome';
    content:"\f0c5"
}

.copy-button.copied:before {
    content:"\f00c\f0ea"
}

.copy-button:hover {
    cursor: pointer;
}


/*

Atom One Dark by Daniel Gamage
Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax

base:    #282c34
mono-1:  #abb2bf
mono-2:  #818896
mono-3:  #5c6370
hue-1:   #56b6c2
hue-2:   #61aeee
hue-3:   #c678dd
hue-4:   #98c379
hue-5:   #e06c75
hue-5-2: #be5046
hue-6:   #d19a66
hue-6-2: #e6c07b

*/
pre code {
    padding: 0.5em 1em;
}


.hljs {
  display: block;
  color: #abb2bf;
}

.hljs-comment,
.hljs-quote {
  color: #63677e;
  font-style: italic;
}

.hljs-doctag,
.hljs-keyword,
.hljs-formula {
  color: #e19ef5;
}

.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
  color: #e06c75;
}

.hljs-literal {
  color: #56b6c2;
}

.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string {
  color: #a3eea0;
}

.hljs-built_in,
.hljs-class .hljs-title {
  color: #fdce68;
}

.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
  color: #eddc96;
}

.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
  color: #61aeee;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-link {
  text-decoration: underline;
}




/* Admonitions */

.admonition {
    position: relative;
    padding: 1rem 3rem 1rem 1rem;
    position: relative;
    line-height: 1.8em;
    margin: 3rem 0;
    border-radius: 5px;
    color: var(--grey-900);
    border: solid 3px var(--grey-900);
    box-shadow: inset 0 -5px 0 0 color-mix(in srgb, var(--grey-900) 10%, transparent);
}

.admonition-kind {
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    font-size: 1rem;
}

.admonition-body {
    margin-right: 2rem;
}

p.admonition {
    font-size: 1rem;
    font-family: var(--body-font);
}

.admonition-note {
    background-color: var(--yellow-100);
    color: var(--yellow-700);
    border-color: var(--yellow-700);
    box-shadow: inset 0 -5px 0 0 color-mix(in srgb, var(--yellow-700) 10%, transparent);
}

.admonition-note code { background-color: color-mix(in srgb, var(--yellow-600) 10%, transparent); }


.admonition-info {
}

.admonition-info code { background-color: color-mix(in srgb, var(--grey-900) 10%, transparent); }


.admonition-tip {
    background-color: var(--blue-100);
    color: var(--blue-600);
    border-color: var(--blue-600);
    box-shadow: inset 0 -5px 0 0 color-mix(in srgb, var(--blue-600) 10%, transparent);
}

.admonition-tip code { background-color: color-mix(in srgb, var(--blue-600) 10%, transparent); }



.admonition-warning {
    background-color: var(--red-100);
    color: var(--red-600);
    border-color: var(--red-600);
    box-shadow: inset 0 -5px 0 0 color-mix(in srgb, var(--red-600) 10%, transparent);
}

.admonition-warning code { background-color: color-mix(in srgb, var(--red-600) 10%, transparent); }



.admonition-ok {
    background-color: var(--green-100);
    color: var(--green-600);
    border-color: var(--green-600);
    box-shadow: inset 0 -5px 0 0 color-mix(in srgb, var(--green-600) 10%, transparent);
}

.admonition-ok code { background-color: color-mix(in srgb, var(--green-600) 10%, transparent); }


.admonition-poop {
    background-color: var(--brown-100);
    color: var(--brown-600);
    border-color: var(--brown-600);
    box-shadow: inset 0 -5px 0 0 color-mix(in srgb, var(--brown-600) 10%, transparent);
}

.admonition-poop code { background-color: color-mix(in srgb, var(--brown-600) 10%, transparent); }


.admonition-challenge {
    background-color: var(--purple-100);
    color: var(--purple-600);
    border-color: var(--purple-600);
    box-shadow: inset 0 -5px 0 0 color-mix(in srgb, var(--purple-600) 10%, transparent);
}

.admonition-challenge code { background-color: color-mix(in srgb, var(--purple-600) 10%, transparent); }


p.admonition a {
    color: inherit;
    text-decoration: underline;
}





  /* Blinker */

  .blink, .snippet strong {
    animation: blinker 1s linear infinite;
  }

  @keyframes blinker {
    0% {
        filter: invert(0);
      }

      49% {
        filter: invert(0);
      }

    50% {
      filter: invert(1);
    }
    100% {
        filter: invert(1);
      }

}



/* Box model tweaks */

.pure-g > * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.l-box { padding-left: 1rem; }
.l-box-2 { padding-left: 1rem; }

.m-box {
    padding-left: 1rem;
    padding-right: 1rem;
}
.m-box-2 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.r-box { padding-right: 1rem; }
.r-box-2 { padding-right: 2rem; }

.v-box {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.v-box-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}


.blockl { padding-right: 0.5rem;}

.blockr {
    padding-left: 0.5rem;
}


.align-left {
    text-align:right;
}

.align-right {
    text-align:right;
}

.align-center {
    text-align:center;
}

/* Containers */

#container-top, #container, #container-bottom, .constrain {
    max-width: 1080px;
    margin: 0 auto 0; /* minus here */
    position: relative;
    z-index: 1;
}

body.column #container-top, body.column #container, body.column #container-bottom, .constrain {
    max-width: 800px;
}


body.centered #container, body.centered #container_bottom, .center-child {
    justify-content: center;
}



/* Common text styles */

.pure-g [class*=pure-u] {
    font-family: var(--body-font);
}



h1, h2, h3, h4, h5, h6  {
    font-family: var(--heading-font);
}

/* Header sizes */

h1 {
    font-size: 3rem;
}
h2, .block-subtitle {
    font-size: 1.8rem;
}
h3 {
    font-size: 1.6rem;
}
h4 {
    font-size: 1.4rem;
}
h5 {
    font-size: 1.2rem;
}
h6 {
    font-size: 1rem;
}

h1 {
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

h2, h3, h4, h5, h6 {
  font-weight: bold;
}


.subtitle {
    font-size: 1.75rem;
    margin-top: 0;
    font-family: var(--heading-font);
    font-weight: 300;
    font-size: 1.5rem;
    color: var(--text-tint);
}



article h2,
article h3,
article h4,
article h5,
.body-text h2,
.body-text h3,
.body-text h4,
.body-text h5,
.body-text h6
  {
    margin-top: 3rem;
    margin-bottom: 0;
}

article,
article p,
article li,
.body-text,
.body-text p,
.body-text li {
    font-family: var(--body-font);
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
}

article ol,
article ul,
.body-text ol,
.body-text ul {
    font-size: 1rem;
}

article p em, .body-text p em {
  font-family: var(--handwriting-font);
  font-weight: 600;
  font-style: normal;
}


article, .body-text {
    font-weight: 400;
}

article a {
    color: #E85F5C;
}

article iframe {
    display: block;
    margin: 0 auto;
}

blockquote {
    margin: 0.25rem 0;
    padding: 0.1rem 1.5rem;
    background-color: rgba(0,0,0,0.025);
}

blockquote p {
    font-family: var(--body-font);
    font-style: italic;
}


/* Article images */

article img, .body-text img {
    display: block;
    float: none;
    clear: both;
    max-width: 80%;
    height: auto;
    margin: 2rem auto;
}

article img + em, .body-text img + em {
    display: block;
    width: 80%;
    font-family: var(--body-font);
    font-style: normal;
    font-size: 1rem;
    font-weight: 400;
    margin: -1.5rem auto 2rem auto;
    text-align: center;
    color: var(--text-tint)
}


/* Saywhat */

.saywhat {
    margin: 2em 0 0 0;
    clear: both;
    padding: 0rem 5rem;
    line-height: 1.8em;
    font-size: 1.1rem;
    font-family: var(--code-font);
}

.saywhat:after {
    content: "";
    display: table;
    clear: both;
  }

.saywhat .who {
    display: inline-block;
    margin-top: -1.5rem;
    width: 7rem;
    height: 7rem;
    background-size: contain;
    background-repeat: no-repeat;
    clear: after;
}

.saywhatl {
    text-align: right;
}

.saywhatl .who { /* looking left: default */
    transform: rotate(10deg);
    float: right;
    margin-left: 0.5em;
}

.saywhatr {
    text-align: left;
}

.saywhatr .who { /* looking right */
    transform: scaleX(-1) rotate(10deg);
    float: left;
    margin-right: 0.5em;
}


/* Table */

.pure-table-tight td, .pure-table-tight th {
    font-size: 1em;
    line-height: 1.5em;
    padding: 0.25em 1em;
    border: none;

}

table.pure-table {
    margin: 4rem auto;
    border: none;
    min-width: 100%;
    background-color: var(--paper-100);
  }

/*
 Tabbed regions (multipart code blocks)
*/

ul.tabs{
    margin: 1rem 0 0 0;
    padding: 0px;
    list-style: none;

}

ul.tabs li{
    background: none;
    color: #1f1f1f;
    display: inline-block;
    padding: 0 1rem;
    cursor: pointer;
    font-family: 'Source Code Pro', 'Futura', 'Century Gothic', 'AppleGothic', sans-serif;
    font-size: 1.1rem;
}


.tab-content{
    display: none;
}

.tab-content.current{
    display: inherit;
}


.multicode ul.tabs {
    padding-inline-start: 0;
    margin-bottom: 0;
}

.multicode ul.tabs li {
    line-height: 2;
    background: #D3D6D8;
    color: #4F5C66;
}

.multicode ul.tabs li.current {
    background: #1f1f1f;
    color: #000a;
}

.multicode .code-block {
    margin-top: 0;
}

.multicode .code-block-outer {
    position: relative;
    background-color: #1f1f1f;
    border-radius: 0 5px 5px 5px;
    padding: 0;
}


/* Strike, del */
s, strike {
  background: url("../images/marker.1eedfd5db7a6.svg");
  text-decoration: none;
  background-position: center 0.1em;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}




h2 em,
.with-highlights-em em,
.with-highlights-strong strong {
    position: relative;
    display: inline-block;
    z-index: 100;
}

.with-highlights-em em {
    font-style: normal;
}

.with-highlights-strong strong {
    font-weight: normal;
}

h2 em::after,
.with-highlights-em em::after,
.with-highlights-strong strong::after {
    position: absolute;
    display: inline-block;
    background-image: url("../images/highlight.e7d556b78c81.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    left: 0;
    top: 10%;
    width: 100%;
    height: 100%;
    z-index: -1;
    content: "";
}