/**
 * A simple theme for my VF Online Workshop
 */
/* Literata Variable */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 200 900;
  src: url("../../lib/font/Literata-Roman-VF-subset.woff2") format("woff2 supports variations"), url("../../lib/font/Literata-Roman-VF-subset.woff2") format("woff2-variations"); }

@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 200 900;
  src: url("../../lib/font/Literata-Italic-VF-subset.woff2") format("woff2 supports variations"), url("../../lib/font/Literata-Italic-VF-subset.woff2") format("woff2-variations"); }

/* Roboto Extremo */
@font-face {
  font-family: 'Roboto Extremo';
  font-style: oblique 0deg 10deg;
  font-stretch: 25 151;
  /* default: 100 */
  font-weight: 100 900;
  /* default: 400 */
  src: url("../../lib/font/RobotoExtremo-VF-slnt-alpha.woff2") format("woff2 supports variations"), url("../../lib/font/RobotoExtremo-VF-slnt-alpha.woff2") format("woff2-variations");
  /* opsz: 8 144 / default: 14 */
  /* GRAD: -1 1 / default: 0 */ }

.reveal a {
  line-height: 1.3em; }

/*********************************************
 * GLOBAL STYLES
 *********************************************/
body {
  background: #F8FAFB;
  background-color: #F8FAFB; }

.reveal {
  font-family: "Literata", "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
  font-size: 40px;
  font-weight: normal;
  color: #363636; }

::selection {
  color: #fff;
  background: #26351C;
  text-shadow: none; }

::-moz-selection {
  color: #fff;
  background: #26351C;
  text-shadow: none; }

.reveal .slides section,
.reveal .slides section > section {
  line-height: 1.3;
  font-weight: inherit; }

/*********************************************
 * HEADERS
 *********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  margin: 0 0 20px 0;
  color: #383D3D;
  font-family: "Literata", "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
  font-weight: normal;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
  word-wrap: break-word; }

.reveal h1 {
  font-size: 3.77em; }

.reveal h2 {
  font-size: 2.11em; }

.reveal h3 {
  font-size: 1.55em; }

.reveal h4 {
  font-size: 1em; }

.reveal h1 {
  text-shadow: none; }

/*********************************************
 * OTHER
 *********************************************/
.reveal p {
  margin: 20px 0;
  line-height: 1.3; }

/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
  max-width: 95%;
  max-height: 95%; }

.reveal strong,
.reveal b {
  font-weight: bold; }

.reveal em {
  font-style: italic; }

.reveal ol,
.reveal dl,
.reveal ul {
  display: inline-block;
  text-align: left;
  margin: 0 0 0 1em; }

.reveal ol {
  list-style-type: decimal; }

.reveal ul {
  list-style-type: disc; }

.reveal ul ul {
  list-style-type: square; }

.reveal ul ul ul {
  list-style-type: circle; }

.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
  display: block;
  margin-left: 40px; }

.reveal dt {
  font-weight: bold; }

.reveal dd {
  margin-left: 40px; }

.reveal blockquote {
  display: block;
  position: relative;
  width: 70%;
  margin: 20px auto;
  padding: 5px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }

.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
  display: inline-block; }

.reveal q {
  font-style: italic; }

.reveal pre {
  display: block;
  position: relative;
  width: 90%;
  margin: 20px auto;
  text-align: left;
  font-size: 0.55em;
  font-family: monospace;
  line-height: 1.2em;
  word-wrap: break-word;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }

.reveal code {
  font-family: monospace;
  text-transform: none; }

.reveal pre code {
  display: block;
  padding: 5px;
  overflow: auto;
  max-height: 400px;
  word-wrap: normal; }

.reveal table {
  margin: auto;
  border-collapse: collapse;
  border-spacing: 0; }

.reveal table th {
  font-weight: bold; }

.reveal table th,
.reveal table td {
  text-align: left;
  padding: 0.2em 0.5em 0.2em 0.5em;
  border-bottom: 1px solid; }

.reveal table th[align="center"],
.reveal table td[align="center"] {
  text-align: center; }

.reveal table th[align="right"],
.reveal table td[align="right"] {
  text-align: right; }

.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
  border-bottom: none; }

.reveal sup {
  vertical-align: super;
  font-size: smaller; }

.reveal sub {
  vertical-align: sub;
  font-size: smaller; }

.reveal small {
  display: inline-block;
  font-size: 0.6em;
  line-height: 1.2em;
  vertical-align: top; }

.reveal small * {
  vertical-align: top; }

/*********************************************
 * LINKS
 *********************************************/
.reveal a {
  color: #51483D;
  text-decoration: none;
  -webkit-transition: color .15s ease;
  -moz-transition: color .15s ease;
  transition: color .15s ease; }

.reveal a:hover {
  color: #8b7c69;
  text-shadow: none;
  border: none; }

.reveal .roll span:after {
  color: #fff;
  background: #25211c; }

/*********************************************
 * IMAGES
 *********************************************/
.reveal section img {
  margin: 15px 0px;
  background: rgba(255, 255, 255, 0.12);
  border: 4px solid #363636;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }

.reveal section img.plain {
  border: 0;
  box-shadow: none; }

.reveal a img {
  -webkit-transition: all .15s linear;
  -moz-transition: all .15s linear;
  transition: all .15s linear; }

.reveal a:hover img {
  background: rgba(255, 255, 255, 0.2);
  border-color: #51483D;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }

/*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
.reveal .controls {
  color: #51483D; }

/*********************************************
 * PROGRESS BAR
 *********************************************/
.reveal .progress {
  background: rgba(0, 0, 0, 0.2);
  color: #51483D; }

.reveal .progress span {
  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

/*********************************************
 * PRINT BACKGROUND
 *********************************************/
@media print {
  .backgrounds {
    background-color: #F8FAFB; } }

html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

.reveal {
  /* general code cue styles */ }
  .reveal .slides {
    text-align: left; }
    .reveal .slides > * {
      height: 100%; }
  .reveal a, .reveal a:link, .reveal a:visited {
    text-decoration: underline;
    text-decoration-thickness: 0.0125em;
    text-underline-offset: .075em;
    text-decoration-skip-ink: auto;
    transition: all .2s ease; }
  .reveal h1 {
    font-size: 7vw;
    font-weight: 900;
    font-variation-settings: 'opsz' 72; }
  .reveal h3 {
    font-size: 2.75vw; }
  .reveal cite {
    font-size: 2.5vw;
    font-style: italic;
    margin: 0; }
  .reveal figure {
    margin: 0;
    padding: 0;
    position: relative; }
    .reveal figure img {
      border: none;
      height: auto;
      max-width: 100%;
      width: 100%; }
  .reveal pre {
    font-family: 'Input Mono VF', monospace;
    font-size: 1.45vw;
    margin: 0;
    width: 100%; }
    .reveal pre code {
      background-color: transparent;
      background-image: linear-gradient(120deg, rgba(0, 0, 36, 0.9) 0%, rgba(0, 0, 71, 0.9) 35%, rgba(0, 0, 121, 0.9) 100%);
      color: #ffffff;
      font-family: 'Input Mono VF', monospace;
      max-height: none; }
  .reveal .code-cue {
    position: absolute;
    bottom: 1vh;
    right: 0;
    transition: all 2s ease-in-out;
    width: 44vw;
    z-index: 99; }
    .reveal .code-cue.visible:not(.current-fragment) {
      opacity: 0 !important; }
  .reveal .resource-link {
    background-color: rgba(33, 33, 33, 0.9);
    border-radius: 0 0.25em 0 0;
    bottom: 0;
    color: #ffffff;
    font-family: "Roboto Extremo";
    font-size: 1.5vw;
    font-weight: 450;
    left: 0;
    padding: 0.25em 1.5em;
    position: absolute;
    z-index: 90; }
  .reveal .slides > .title-slide {
    padding-top: 20vh;
    padding-left: 7.5vw; }
    .reveal .slides > .title-slide h1 {
      font-size: 6vw;
      font-variation-settings: 'opsz' 45;
      line-height: 0.9;
      text-shadow: -1px -1px 0 #F0F1FB; }
      .reveal .slides > .title-slide h1 .bigger {
        font-size: 9.8vw;
        line-height: 0.7;
        font-variation-settings: 'opsz' 72; }
    .reveal .slides > .title-slide h2 {
      font-size: 2.75vw;
      font-style: italic; }
  .reveal .slides > .section-title {
    padding-top: 30vh;
    padding-left: 7.5vw;
    background-color: #363636; }
    .reveal .slides > .section-title > * {
      color: #F8FAFB; }
    .reveal .slides > .section-title h3 {
      font-size: 5.75vw;
      font-variation-settings: 'opsz' 45;
      font-weight: 785;
      line-height: 0.9;
      text-shadow: -1px -1px 0 #363636; }
    .reveal .slides > .section-title h4 {
      font-size: 2.75vw;
      font-style: italic; }
  .reveal .vf-quote {
    width: 41vw;
    margin: 32vh 0 0 3vw; }
    .reveal .vf-quote h3 {
      font-family: "Literata";
      font-variant-ligatures: common-ligatures;
      font-style: italic;
      font-weight: 200;
      text-align: left;
      transition: all 1s ease-in;
      letter-spacing: normal; }
    .reveal .vf-quote h4 {
      font-family: "Roboto Extremo";
      font-size: 2.25vw;
      font-style: oblique 5deg;
      font-stretch: 85%;
      font-weight: 250;
      text-align: left; }
  .reveal .present .vf-quote h3 {
    font-weight: 300; }
  .reveal .vf-explained {
    transition: all 1s ease-in-out; }
  .reveal .future .vf-explained {
    opacity: 0; }
  .reveal .present .vf-explained {
    opacity: 1;
    position: absolute;
    top: 15vh;
    left: 48vw;
    z-index: 10;
    transition-delay: 2s; }
    .reveal .present .vf-explained .font {
      background: url(../../lib/images/font_outline.svg) no-repeat;
      background-size: contain;
      background-position: top left;
      font-family: "Roboto Extremo";
      font-size: 4vw;
      font-weight: 100;
      width: 1.75em;
      text-align: center;
      line-height: 2.25;
      transition: all 2s ease-in-out; }
    .reveal .present .vf-explained .font1 {
      font-stretch: 60%;
      font-weight: 100;
      position: absolute;
      top: 0;
      left: 0; }
    .reveal .present .vf-explained .font2 {
      font-stretch: 65%;
      font-weight: 150;
      position: absolute;
      top: 0;
      left: 10vw; }
    .reveal .present .vf-explained .font3 {
      font-stretch: 70%;
      font-weight: 200;
      position: absolute;
      top: 0;
      left: 20vw; }
    .reveal .present .vf-explained .font4 {
      font-stretch: 75%;
      font-weight: 250;
      position: absolute;
      top: 0;
      left: 30vw; }
    .reveal .present .vf-explained .font5 {
      font-stretch: 80%;
      font-weight: 300;
      position: absolute;
      top: 0;
      left: 40vw; }
    .reveal .present .vf-explained .font6 {
      font-stretch: 70%;
      font-weight: 400;
      position: absolute;
      top: 21vh;
      left: 0; }
    .reveal .present .vf-explained .font7 {
      font-stretch: 75%;
      font-weight: 450;
      position: absolute;
      top: 21vh;
      left: 10vw; }
    .reveal .present .vf-explained .font8 {
      font-stretch: 80%;
      font-weight: 500;
      position: absolute;
      top: 21vh;
      left: 20vw; }
    .reveal .present .vf-explained .font9 {
      font-stretch: 85%;
      font-weight: 550;
      position: absolute;
      top: 21vh;
      left: 30vw; }
    .reveal .present .vf-explained .font10 {
      font-stretch: 90%;
      font-weight: 600;
      position: absolute;
      top: 21vh;
      left: 40vw; }
    .reveal .present .vf-explained .font11 {
      font-stretch: 80%;
      font-weight: 700;
      position: absolute;
      top: 42vh;
      left: 0; }
    .reveal .present .vf-explained .font12 {
      font-stretch: 85%;
      font-weight: 750;
      position: absolute;
      top: 42vh;
      left: 10vw; }
    .reveal .present .vf-explained .font13 {
      font-stretch: 90%;
      font-weight: 800;
      position: absolute;
      top: 42vh;
      left: 20vw; }
    .reveal .present .vf-explained .font14 {
      font-stretch: 95%;
      font-weight: 850;
      position: absolute;
      top: 42vh;
      left: 30vw; }
    .reveal .present .vf-explained .font15 {
      font-stretch: 100%;
      font-weight: 900;
      position: absolute;
      top: 42vh;
      left: 40vw; }
  .reveal .present.merged .vf-explained .font {
    top: 0;
    left: 10vw;
    font-size: 20vw;
    line-height: 1.5;
    padding-bottom: 0.25em;
    width: 27vw; }
    .reveal .present.merged .vf-explained .font1 {
      opacity: 1; }
    .reveal .present.merged .vf-explained .font2 {
      opacity: .035; }
    .reveal .present.merged .vf-explained .font3 {
      opacity: .035; }
    .reveal .present.merged .vf-explained .font4 {
      opacity: .045; }
    .reveal .present.merged .vf-explained .font5 {
      opacity: .035; }
    .reveal .present.merged .vf-explained .font6 {
      opacity: .5;
      -webkit-text-stroke: 1px #363636;
      text-stroke: 1px #363636;
      color: transparent; }
    .reveal .present.merged .vf-explained .font7 {
      opacity: .045; }
    .reveal .present.merged .vf-explained .font8 {
      opacity: .075; }
    .reveal .present.merged .vf-explained .font9 {
      opacity: .035; }
    .reveal .present.merged .vf-explained .font10 {
      opacity: .035; }
    .reveal .present.merged .vf-explained .font11 {
      opacity: .5;
      -webkit-text-stroke: 1px #363636;
      text-stroke: 1px #363636;
      color: transparent; }
    .reveal .present.merged .vf-explained .font12 {
      opacity: .045; }
    .reveal .present.merged .vf-explained .font13 {
      opacity: .035; }
    .reveal .present.merged .vf-explained .font14 {
      opacity: .035; }
    .reveal .present.merged .vf-explained .font15 {
      opacity: .5;
      -webkit-text-stroke: 1px #363636;
      text-stroke: 1px #363636;
      color: transparent; }
  .reveal .vf-collie {
    transition: all 1s ease-in-out; }
    .reveal .vf-collie .variable_collies img {
      margin-top: -42vh; }
    .reveal .vf-collie div[class*="axis-"] {
      color: #fff;
      font-family: "Roboto Extremo";
      font-size: 4vw;
      transition: all 2s ease-in-out; }
    .reveal .vf-collie .axis-width1 {
      font-stretch: 80%;
      font-weight: 600;
      opacity: 0;
      text-align: center;
      width: 12vw;
      position: absolute;
      top: 14vh;
      left: 19.25vw;
      z-index: 5; }
      .reveal .vf-collie .axis-width1 .diagram-line {
        width: 100%;
        height: 1vh;
        border-top: solid 2px #fff;
        border-left: solid 2px #fff;
        border-right: solid 2px #fff; }
    .reveal .vf-collie.varcol-width .axis-width1 {
      font-stretch: 150%;
      opacity: 1; }
    .reveal .vf-collie .axis-width2 {
      font-stretch: 100%;
      font-weight: 400;
      opacity: 0;
      text-align: center;
      width: 9vw;
      position: absolute;
      top: 16vh;
      left: 48vw;
      z-index: 5; }
      .reveal .vf-collie .axis-width2 .diagram-line {
        width: 100%;
        height: 1vh;
        border-top: solid 2px #fff;
        border-left: solid 2px #fff;
        border-right: solid 2px #fff; }
    .reveal .vf-collie.varcol-width .axis-width2 {
      font-stretch: 25%;
      opacity: 1; }
    .reveal .vf-collie .axis-weight1 {
      font-weight: 600;
      opacity: 0;
      text-align: center;
      width: 15vw;
      position: absolute;
      top: 85vh;
      left: 16vw;
      z-index: 5; }
      .reveal .vf-collie .axis-weight1 .diagram-line {
        position: absolute;
        top: -1vh;
        left: 0;
        width: 100%;
        height: 1vh;
        border-bottom: solid 2px #fff;
        border-left: solid 2px #fff;
        border-right: solid 2px #fff; }
    .reveal .vf-collie.varcol-weight .axis-weight1 {
      font-weight: 900;
      opacity: 1; }
    .reveal .vf-collie .axis-weight2 {
      font-weight: 600;
      opacity: 0;
      text-align: center;
      width: 12vw;
      position: absolute;
      top: 82vh;
      left: 43vw;
      z-index: 5; }
      .reveal .vf-collie .axis-weight2 .diagram-line {
        position: absolute;
        top: -1vh;
        left: 0;
        width: 100%;
        height: 1vh;
        border-bottom: solid 2px #fff;
        border-left: solid 2px #fff;
        border-right: solid 2px #fff; }
    .reveal .vf-collie.varcol-weight .axis-weight2 {
      font-weight: 100;
      opacity: 1; }
    .reveal .vf-collie .axis-xheight1 {
      font-variation-settings: 'YTLC' 450;
      opacity: 0;
      position: absolute;
      top: 25vw;
      left: 2vw;
      z-index: 5; }
      .reveal .vf-collie .axis-xheight1 .diagram-line {
        position: absolute;
        top: -15vh;
        right: -2vw;
        width: 1vw;
        height: 45vh;
        border-bottom: solid 2px #fff;
        border-left: solid 2px #fff;
        border-top: solid 2px #fff; }
    .reveal .vf-collie.varcol-xheight .axis-xheight1 {
      font-variation-settings: 'YTLC' 570;
      opacity: 1; }
    .reveal .vf-collie .axis-xheight2 {
      font-variation-settings: 'YTLC' 550;
      opacity: 0;
      position: absolute;
      top: 26vw;
      left: 31vw;
      z-index: 5; }
      .reveal .vf-collie .axis-xheight2 .diagram-line {
        position: absolute;
        top: -15vh;
        right: -2vw;
        width: 1vw;
        height: 40vh;
        border-bottom: solid 2px #fff;
        border-left: solid 2px #fff;
        border-top: solid 2px #fff; }
    .reveal .vf-collie.varcol-xheight .axis-xheight2 {
      font-variation-settings: 'YTLC' 416;
      opacity: 1; }
  .reveal .vf-collie2 .variable_collies2 img {
    margin-top: -10vh; }
  .reveal .vf-collie2 .axis-slant {
    color: #fff;
    font-family: "Roboto Extremo";
    font-size: 4vw;
    font-style: oblique 0deg;
    transition: all 2s ease-in-out;
    font-weight: 400;
    opacity: 1;
    text-align: center;
    width: 12vw;
    position: absolute;
    top: 27.5vw;
    left: 23.95vw;
    z-index: 5; }
    .reveal .vf-collie2 .axis-slant .label {
      padding-right: 2vw; }
    .reveal .vf-collie2 .axis-slant .diagram-line {
      position: absolute;
      top: -20vh;
      right: 0;
      width: 2px;
      height: 30vh;
      border-left: solid 2px #fff;
      transition: all 1s ease-in-out; }
    .reveal .vf-collie2 .axis-slant .diagram-line2 {
      position: absolute;
      top: -20vh;
      right: 0;
      width: 2px;
      height: 30vh;
      border-left: solid 2px #fff;
      transition: all 2s ease-in-out;
      transform-origin: bottom right; }
  .reveal .vf-collie2.varcol-slant .axis-slant {
    font-style: oblique 12deg; }
  .reveal .vf-collie2.varcol-slant .diagram-line {
    opacity: 0.6; }
  .reveal .vf-collie2.varcol-slant .diagram-line2 {
    transform: rotate(32deg);
    transform-origin: bottom right; }
  .reveal .axis h4 {
    font-family: "Roboto Extremo";
    font-weight: 100;
    font-size: 3vw;
    margin: 5vh 0 0 5vw;
    max-width: 45vw; }
  .reveal .axis h3 {
    font-family: "Literata";
    font-size: 5.65vw;
    font-weight: 800;
    font-variation-settings: 'opsz' 72;
    line-height: 1.05;
    margin: 0 0 0 5vw;
    max-width: 45vw;
    font-variant-ligatures: common-ligatures discretionary-ligatures; }
  .reveal .axis cite {
    margin: 0 0 0 5vw; }
  .reveal .axis .example {
    border-left: solid 1px black;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: absolute;
    right: 3vw;
    top: 15vh;
    width: 47vw;
    height: 35vh;
    text-align: center;
    font-size: 7vw;
    transition: all 2s ease-in-out; }
  .reveal .axis.weight .example {
    font-family: "Roboto Extremo";
    font-weight: 100; }
  .reveal .axis.weight.present .example {
    font-weight: 900; }
  .reveal .axis.width .example {
    font-family: "Roboto Extremo";
    font-stretch: 25%;
    font-weight: 300; }
  .reveal .axis.width.present .example {
    font-stretch: 150%;
    font-weight: 300; }
  .reveal .axis.slant .example {
    font-family: "Roboto Extremo";
    font-style: oblique 1deg;
    font-weight: 300; }
  .reveal .axis.slant.present .example {
    font-style: oblique 10deg;
    font-weight: 300; }
  .reveal .axis.italic .example {
    font-family: "Literata";
    font-style: italic;
    font-weight: 300; }
  .reveal .axis.italic.present .example {
    font-style: italic;
    font-weight: 300; }
  .reveal .axis.opsz .example {
    font-family: "Literata";
    font-weight: 600;
    font-variation-settings: 'opsz' 7; }
  .reveal .axis.opsz.present .example {
    font-family: "Literata";
    font-weight: 600;
    font-variation-settings: 'opsz' 72; }
  .reveal .axis .code {
    position: absolute;
    right: 3vw;
    top: 50vh;
    width: 47vw; }
    .reveal .axis .code code {
      font-size: 1.5vw; }
  .reveal .axis .sample {
    border-left: solid 1px black;
    position: absolute;
    right: 0;
    top: 15vh;
    width: 50vw;
    height: 75vh;
    padding: 0 3vw; }
    .reveal .axis .sample h1 {
      font-size: 3.75vw;
      font-variation-settings: 'opsz' 72; }
      .reveal .axis .sample h1 .label {
        font-variation-settings: 'opsz' 7;
        font-variant-caps: small-caps;
        font-size: 0.9em;
        font-weight: 825; }
    .reveal .axis .sample p,
    .reveal .axis .sample ul {
      font-size: 1.45vw;
      font-variation-settings: 'opsz' 7; }
  .reveal .axis .light-mode {
    font-family: "Roboto Extremo";
    font-variation-settings: "GRAD" 0;
    transition: background-color 0.2s ease-in; }
    @media (prefers-color-scheme: dark) {
      .reveal .axis .light-mode {
        background-color: #363636;
        color: #F0F1FB;
        font-variation-settings: "GRAD" -0.5; } }
  .reveal .axis.dark .light-mode {
    background-color: #363636;
    color: #F0F1FB;
    font-variation-settings: "GRAD" -0.5; }
  .reveal .interstitial .center-box {
    display: flex;
    justify-content: space-around;
    height: 100%;
    align-items: center; }
    .reveal .interstitial .center-box h2 {
      font-style: italic; }