@charset "UTF-8";
@font-face {
  font-family: "Laica Regular";
  src: url("/static/fonts/LaicaB-Regular.woff2") format("woff2"), url("/static/fonts/LaicaB-Regular.woff") format("woff");
}
@font-face {
  font-family: "Laica Italic";
  src: url("/static/fonts/LaicaB-Italic.woff2") format("woff2"), url("/static/fonts/LaicaB-Italic.woff") format("woff");
}
@font-face {
  font-family: "Laica Bold";
  src: url("/static/fonts/LaicaB-Bold.woff2") format("woff2"), url("/static/fonts/LaicaB-Bold.woff") format("woff");
}
@font-face {
  font-family: "Arnold Regular";
  src: url("/static/fonts/Arnold_v0.3-Regular.woff2") format("woff2"), url("/static/fonts/Arnold_v0.3-Regular.woff") format("woff");
}
@font-face {
  font-family: "Arnold Italic";
  src: url("/static/fonts/Arnold_v0.3-Italic.woff2") format("woff2"), url("/static/fonts/Arnold_v0.3-Italic.woff") format("woff");
}
@font-face {
  font-family: "Gig Bold";
  src: url("/static/fonts/GigV0.4-Bold.woff2") format("woff2"), url("/static/fonts/GigV0.4-Bold.woff") format("woff");
}
/*
// xs
property: value;

  @include bigger-than('sm') {
    property: value;
  }
  @include bigger-than('md') {
    property: value;
  }
  @include bigger-than('lg') {
    property: value;
  }
*/
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  height: 100%;
  font-size: calc(23px + (26 - 23) * (100vw - 320px) / (600 - 320));
}
@media (max-width: 320px) {
  html {
    font-size: 23px;
  }
}
@media (min-width: 600px) {
  html {
    font-size: 26px;
  }
}
@media (min-width: 600px) {
  html {
    font-size: calc(23px + (26 - 23) * (100vw - 601px) / (900 - 601));
  }
}
@media (min-width: 600px) and (max-width: 601px) {
  html {
    font-size: 23px;
  }
}
@media (min-width: 600px) and (min-width: 900px) {
  html {
    font-size: 26px;
  }
}
@media (min-width: 900px) {
  html {
    font-size: calc(26px + (28 - 26) * (100vw - 901px) / (1200 - 901));
  }
}
@media (min-width: 900px) and (max-width: 901px) {
  html {
    font-size: 26px;
  }
}
@media (min-width: 900px) and (min-width: 1200px) {
  html {
    font-size: 28px;
  }
}
@media (min-width: 1200px) {
  html {
    font-size: calc(28px + (32 - 28) * (100vw - 1201px) / (1500 - 1201));
  }
}
@media (min-width: 1200px) and (max-width: 1201px) {
  html {
    font-size: 28px;
  }
}
@media (min-width: 1200px) and (min-width: 1500px) {
  html {
    font-size: 32px;
  }
}

body {
  font-size: 0.8rem;
  line-height: 1rem;
  font-family: "Laica Regular", Georgia, serif;
  -webkit-font-kerning: normal;
          font-kerning: normal;
  color: #222;
  background: #FFF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.basic-container, article {
  margin: 0 auto;
  width: calc(290px + (550 - 290) * (100vw - 320px) / (600 - 320));
}
@media (max-width: 320px) {
  .basic-container, article {
    width: 290px;
  }
}
@media (min-width: 600px) {
  .basic-container, article {
    width: 550px;
  }
}
@media (min-width: 600px) {
  .basic-container, article {
    width: calc(550px + (700 - 550) * (100vw - 601px) / (900 - 601));
  }
}
@media (min-width: 600px) and (max-width: 601px) {
  .basic-container, article {
    width: 550px;
  }
}
@media (min-width: 600px) and (min-width: 900px) {
  .basic-container, article {
    width: 700px;
  }
}
@media (min-width: 900px) {
  .basic-container, article {
    width: calc(700px + (850 - 700) * (100vw - 901px) / (1200 - 901));
  }
}
@media (min-width: 900px) and (max-width: 901px) {
  .basic-container, article {
    width: 700px;
  }
}
@media (min-width: 900px) and (min-width: 1200px) {
  .basic-container, article {
    width: 850px;
  }
}
@media (min-width: 1200px) {
  .basic-container, article {
    width: calc(850px + (1024 - 850) * (100vw - 1201px) / (1500 - 1201));
  }
}
@media (min-width: 1200px) and (max-width: 1201px) {
  .basic-container, article {
    width: 850px;
  }
}
@media (min-width: 1200px) and (min-width: 1500px) {
  .basic-container, article {
    width: 1024px;
  }
}

.no-border {
  border: none;
}

@media (max-width: 1200px) {
  .lg-only {
    display: none;
  }
}

strong {
  font-family: "Laica Bold", Georgia, serif;
}

em, th {
  font-family: "Laica Italic", Georgia, serif;
}

h1 {
  font-size: 1.8rem;
  line-height: 2rem;
  font-family: "Gig Bold", Georgia, serif;
  padding: 0.5rem 0;
  color: #F36;
}

h2 {
  font-family: "Gig Bold", Georgia, serif;
  color: #F36;
  margin-top: 1em;
  font-size: 1.25em;
  line-height: 1.5em;
}

h2 > a, h2 > a:active, h2 > a:hover, h2 > a:visited, h2 > a:visited:hover {
  font-family: "Gig Bold", Georgia, serif;
}

p {
  font-family: "Laica Regular", Georgia, serif;
}

ul > li {
  text-indent: -1.2rem;
  padding-left: 1.2rem;
}

ul > li:before {
  content: "— ";
}

a {
  color: #F36;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  border-bottom: 1px solid #F36;
}

a:visited {
  color: #F36;
}

a:visited:hover {
  color: #F36;
  border-bottom: 1px solid #F36;
}

::-moz-selection {
  background: #FFEDED; /* WebKit/Blink Browsers */
}

::selection {
  background: #FFEDED; /* WebKit/Blink Browsers */
}

::-moz-selection {
  background: #FFEDED; /* Gecko Browsers */
}

figcaption {
  font-family: "Arnold Regular", Monaco, monospace;
  color: #1858A8;
  font-size: 0.55rem;
  line-height: 0.65rem;
  text-transform: lowercase;
  font-variant-caps: small-caps;
  margin-bottom: 1rem;
}

#chapter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

article {
  padding-top: 2rem;
}
@media (min-width: 600px) {
  article {
    padding-top: 2rem;
  }
}
@media (min-width: 900px) {
  article {
    padding-top: 2rem;
  }
}
@media (min-width: 1200px) {
  article {
    padding-top: 2rem;
    padding-left: 2rem;
    margin: 0;
  }
}

article p, article ul {
  margin-bottom: 0.5rem;
}

article ul {
  padding-top: 0;
}

@media (min-width: 1200px) {
  article h1 {
    padding-left: 4rem;
  }
  article h2 {
    padding-left: 4rem;
  }
  article p {
    padding-left: 4rem;
  }
  article ul {
    padding-left: 4rem;
  }
  article figcaption {
    padding-left: 4rem;
  }
  article table {
    margin-left: 4rem;
    width: calc(100% - 4rem);
  }
}
li > ul {
  padding-left: 1rem;
}

.large-image {
  width: 100%;
}

.large-image, .diagram {
  padding-bottom: 0.5rem;
}

.diagram {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
@media (min-width: 1200px) {
  .diagram {
    width: 60%;
  }
}

.small-image {
  float: right;
  clear: right;
  margin-left: 0.5rem;
  width: 33%;
  height: 33%;
}
@media (min-width: 900px) {
  .small-image {
    width: 25%;
    height: 25%;
  }
}

.example {
  padding: 0.5rem 0 1rem 0;
}
@media (min-width: 1200px) {
  .example {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

@media (min-width: 1200px) {
  .example-code {
    width: 73%;
  }
}
.example-code {
  margin-left: 1rem;
}

.example-code-noimage {
  margin-left: 1rem;
}

.example-image {
  margin-bottom: 0.5rem;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
@media (min-width: 1200px) {
  .example-image {
    width: 25%;
    height: 25%;
    margin-bottom: 0;
  }
}

img.example-image, img.ex-image {
  -webkit-box-shadow: 0 0.25rem 0.5rem #777;
          box-shadow: 0 0.25rem 0.5rem #777;
}

h2.cookbook {
  margin-bottom: 0rem;
  margin-top: 1.25rem;
  font-size: 1.25rem;
}

h2.workbook {
  color: #1858A8;
  margin-bottom: 0.25rem;
}

.exercise {
  margin-bottom: 0.5rem;
}
@media (min-width: 1200px) {
  .exercise {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

@media (min-width: 1200px) {
  .ex-text {
    width: 73%;
    margin-bottom: 0;
  }
}

@media (min-width: 1200px) {
  .ex-text-noimage {
    margin-bottom: 0;
  }
}

.ex-number, .recipe-title {
  background-color: #1858A8;
  margin-bottom: 0;
}

.ex-number {
  padding: 0.38rem 1rem 0.01rem 1rem;
}

.recipe-title {
  padding: 0.38rem 1rem 0.01rem 0.75rem;
}

.recipe-title p, .ex-number p {
  font-family: "Arnold Regular";
  font-size: 0.7rem;
  line-height: 0.7rem;
  color: #FFF;
  font-variant-caps: small-caps;
  text-transform: lowercase;
}

.recipe-title p {
  padding-left: 0px;
}

.recipe-code a:link {
  color: #FFF;
}

.recipe {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 0.5rem;
}

.recipe-without-image, .recipe-with-image  {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.recipe-with-image {
  width: 100%;
}
@media (min-width: 1200px) {
  .recipe-with-image {
    width: 73%;
  }
}

.recipe-without-image {
  width: 100%;
}

.recipe-image {
  margin-left: 0.5rem;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  width: 33%;
  height: 33%;
  -webkit-box-shadow: 0 0.25rem 0.5rem #777;
          box-shadow: 0 0.25rem 0.5rem #777;
}
@media (min-width: 900px) {
  .recipe-image {
    width: 25%;
    height: 25%;
  }
}

a.recipe-download {
  color: #FFF;
}

a:hover.recipe-download {
  color: #FFF;
  border-bottom: 1px solid #FFF;
}

a:visited.recipe-download {
  color: #FFF;
}

a:visited:hover.recipe-download {
  color: #FFF;
  border-bottom: 1px solid #FFF;
}

pre.recipe-code {
  width: 100%;
  border-top: none;
  margin-bottom: 1rem;
}

.ex-assignment {
  padding: 0.25rem 1rem 0.5rem 1rem;
  background-color: #E2F4FF;
}

.ex-assignment p, .ex-assignment ul, .ex-number p {
  padding-left: 0;
}

.ex-solution {
  font-family: "Arnold Regular";
  font-size: 0.7rem;
  line-height: 0.7rem;
  color: #1858A8;
  font-variant-caps: small-caps;
  text-transform: lowercase;
  text-decoration: none;
}

.ex-solution a {
  color: #1858A8;
}

.ex-solution a:hover {
  color: #1858A8;
  border-bottom: 1px solid #1858A8;
}

.ex-solution a:active {
  color: #1858A8;
}

.ex-solution a:visited {
  color: #1858A8;
}

.ex-image {
  margin-bottom: 0.5rem;
}
@media (min-width: 1200px) {
  .ex-image {
    width: 25%;
    height: 25%;
    margin-bottom: 0;
  }
}

.snippet-download-wrapper {
  margin-top: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.snippet-download {
  width: 1.8rem;
  text-align: center;
  background-color: #1858A8;
  margin-bottom: 0;
  padding: 0.1rem 0 0.1rem 0;
  font-family: "Arnold Regular";
  font-size: 0.65rem;
  line-height: 0.7rem;
  color: #FFF;
  font-variant-caps: small-caps;
  text-transform: lowercase;
}

.snippet-download a {
  color: #FFF;
}

.snippet-download a:hover {
  color: #FFF;
  border-bottom: 1px solid #FFF;
}

.snippet-download a:visited {
  color: #FFF;
}

.snippet-download a:visited:hover {
  color: #FFF;
  border-bottom: 1px solid #FFF;
}

#pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 1rem;
}

#prevButton, #nextButton {
  font-family: "Arnold Regular", Monaco, monospace;
  text-align: center;
  width: 50%;
}

@media (min-width: 1200px) {
  p#prevButton, p#nextButton {
    padding-left: 0;
  }
}

table {
  border-collapse: collapse;
  margin-bottom: 0.5em;
  display: table;
  width: 100%;
}

th {
  text-align: left;
  border-bottom: solid 1px #F36;
  border-top: solid 3px #F36;
  padding: 0.25em;
}

td {
  text-align: left;
  border-bottom: solid 1px #F36;
  padding: 0.25em;
}