/* thank you! http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

/* remember to highlight inserts somehow! */
ins { text-decoration: none; }

del { text-decoration: line-through; }

table { border-collapse: collapse; border-spacing: 0; }

[role="button"], input[type="submit"], input[type="reset"], input[type="button"], button { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }

/* Reset `button` and button-style `input` default styles */
input[type="submit"], input[type="reset"], input[type="button"], button { background: none; border: 0; color: inherit; /* cursor: default; */ font: inherit; line-height: normal; overflow: visible; padding: 0; margin: 0; -webkit-appearance: button; /* for input */ -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; }

input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; }

/*# sourceMappingURL=reset.css.map */
@font-face { font-family: 'plotturaoutbook'; src: url("../fonts/plotturaout-book-webfont.woff2") format("woff2"), url("../fonts/plotturaout-book-webfont.woff") format("woff"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'plotturaoutbook_oblique'; src: url("../fonts/plotturaout-bookoblique-webfont.woff2") format("woff2"), url("../fonts/plotturaout-bookoblique-webfont.woff") format("woff"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'pitch_sans'; src: url("../fonts/pitch-sans-medium.woff2") format("woff2"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'pitch_sans'; src: url("../fonts/pitch-sans-medium-italic.woff2") format("woff2"); font-weight: normal; font-style: italic; }
@font-face { font-family: 'pitch_sans'; src: url("../fonts/pitch-sans-bold.woff2") format("woff2"); font-weight: bold; font-style: normal; }
@font-face { font-family: 'pitch_sans'; src: url("../fonts/pitch-sans-bold-italic.woff2") format("woff2"); font-weight: bold; font-style: italic; }
/** Syntax highlighting styles */
.highlight { background: #fff; /* Comment */ /* Error */ /* Keyword */ /* Literal */ /* Name */ /* Operator */ /* Punctuation */ /* Comment.Multiline */ /* Comment.Preproc */ /* Comment.Single */ /* Comment.Special */ /* Generic.Deleted */ /* Generic.Emph */ /* Generic.Heading */ /* Generic.Inserted */ /* Generic.Prompt */ /* Generic.Strong */ /* Generic.Subheading */ /* Keyword.Constant */ /* Keyword.Declaration */ /* Keyword.Namespace */ /* Keyword.Pseudo */ /* Keyword.Reserved */ /* Keyword.Type */ /* Literal.Date */ /* Literal.Number */ /* Literal.String */ /* Name.Attribute */ /* Name.Builtin */ /* Name.Class */ /* Name.Constant */ /* Name.Decorator */ /* Name.Entity */ /* Name.Exception */ /* Name.Function */ /* Name.Label */ /* Name.Namespace */ /* Name.Other */ /* Name.Property */ /* Name.Tag */ /* Name.Variable */ /* Operator.Word */ /* Text.Whitespace */ /* Literal.Number.Float */ /* Literal.Number.Hex */ /* Literal.Number.Integer */ /* Literal.Number.Oct */ /* Literal.String.Backtick */ /* Literal.String.Char */ /* Literal.String.Doc */ /* Literal.String.Double */ /* Literal.String.Escape */ /* Literal.String.Heredoc */ /* Literal.String.Interpol */ /* Literal.String.Other */ /* Literal.String.Regex */ /* Literal.String.Single */ /* Literal.String.Symbol */ /* Name.Builtin.Pseudo */ /* Name.Variable.Class */ /* Name.Variable.Global */ /* Name.Variable.Instance */ /* Literal.Number.Integer.Long */ }
.highlighter-rouge .highlight { background: #fff; }
.highlight .hll { background-color: #e8e6df; }
.highlight .c { color: #a09f93; }
.highlight .err { color: #f2777a; }
.highlight .k { color: #cc99cc; }
.highlight .l { color: #f99157; }
.highlight .n { color: #2d2d2d; }
.highlight .o { color: #66cccc; }
.highlight .p { color: #2d2d2d; }
.highlight .cm { color: #a09f93; }
.highlight .cp { color: #a09f93; }
.highlight .c1 { color: #a09f93; }
.highlight .cs { color: #a09f93; }
.highlight .gd { color: #f2777a; }
.highlight .ge { font-style: italic; }
.highlight .gh { color: #2d2d2d; font-weight: bold; }
.highlight .gi { color: #99cc99; }
.highlight .gp { color: #a09f93; font-weight: bold; }
.highlight .gs { font-weight: bold; }
.highlight .gu { color: #66cccc; font-weight: bold; }
.highlight .kc { color: #cc99cc; }
.highlight .kd { color: #cc99cc; }
.highlight .kn { color: #66cccc; }
.highlight .kp { color: #cc99cc; }
.highlight .kr { color: #cc99cc; }
.highlight .kt { color: #ffcc66; }
.highlight .ld { color: #99cc99; }
.highlight .m { color: #f99157; }
.highlight .s { color: #99cc99; }
.highlight .na { color: #6699cc; }
.highlight .nb { color: #2d2d2d; }
.highlight .nc { color: #ffcc66; }
.highlight .no { color: #f2777a; }
.highlight .nd { color: #66cccc; }
.highlight .ni { color: #2d2d2d; }
.highlight .ne { color: #f2777a; }
.highlight .nf { color: #6699cc; }
.highlight .nl { color: #2d2d2d; }
.highlight .nn { color: #ffcc66; }
.highlight .nx { color: #6699cc; }
.highlight .py { color: #2d2d2d; }
.highlight .nt { color: #66cccc; }
.highlight .nv { color: #f2777a; }
.highlight .ow { color: #66cccc; }
.highlight .w { color: #2d2d2d; }
.highlight .mf { color: #f99157; }
.highlight .mh { color: #f99157; }
.highlight .mi { color: #f99157; }
.highlight .mo { color: #f99157; }
.highlight .sb { color: #99cc99; }
.highlight .sc { color: #2d2d2d; }
.highlight .sd { color: #a09f93; }
.highlight .s2 { color: #99cc99; }
.highlight .se { color: #f99157; }
.highlight .sh { color: #99cc99; }
.highlight .si { color: #f99157; }
.highlight .sx { color: #99cc99; }
.highlight .sr { color: #99cc99; }
.highlight .s1 { color: #99cc99; }
.highlight .ss { color: #99cc99; }
.highlight .bp { color: #2d2d2d; }
.highlight .vc { color: #f2777a; }
.highlight .vg { color: #f2777a; }
.highlight .vi { color: #f2777a; }
.highlight .il { color: #f99157; }

body, html { height: 95%; min-height: 95%; }

/* Blink Ani */
@keyframes blink { 0% { color: #222; background-color: #222; }
  80% { color: #222; background-color: #222; }
  100% { color: #ff4500; background-color: #ff4500; } }
/* MAIN Typography and spacing */
body { position: relative; width: 87%; max-width: 1850px; height: auto; margin: 0 auto; padding-top: 4em; background-color: #fdfdfb; color: #222; font-family: "pitch_sans", "Courier New", Courier, monospace; letter-spacing: -0.05em; font-size: 18px; line-height: 1.5em; font-weight: normal; }

span.blinker { animation-name: blink; position: relative; top: -0.1em; display: inline-block; width: 0.3em; height: 0.3em; overflow: hidden; text-indent: -999em; margin-left: 0.3em; animation-iteration-count: infinite; animation-direction: alternate; animation-delay: 0.5s; border-radius: 50%; }
span.blinker.b1 { animation-duration: 0.48s; }
span.blinker.b2 { animation-duration: 0.7s; }
span.blinker.b3 { animation-duration: 0.6s; }

em { font-style: italic; }

a { color: #222; text-decoration: underline; text-decoration-color: #222; }
a:hover { text-decoration-color: #ff4500; }

h1 a, h2 a { color: #222; text-decoration: none; text-shadow: 1px 1px 0 #fdfdfb, -1px 1px 0 #fdfdfb, 3px 0 0 #fdfdfb, -3px 0 0 #fdfdfb; box-shadow: inset 0 -2px 0 0 #fdfdfb, inset 0 -5px 0 0 #222; }
h1 a:hover, h2 a:hover { box-shadow: inset 0 -2px 0 0 #fdfdfb, inset 0 -5px 0 0 #ff4500; }

nav li { margin-right: 1.2em; }
nav li.active a { color: #ff4500; text-decoration-color: #ff4500; }

p, pre, table, figure { margin-bottom: 1.5em; }

h1, h2, h3, h4, h5, h6, span.logo { font-size: 1.8em; font-family: "plotturaoutbook", sans-serif; margin-bottom: 0.75em; line-height: 1.5em; }

h2 { padding-top: 6em; }

h3, span.logo { font-size: 1.2em; padding-top: 1.5em; }

span.logo a { text-decoration: none; }

blockquote cite { margin-top: 3em; }

.bad { color: #ff4500; }

pre, code { font-family: monospace; outline: 1px solid #222; }

code { margin-right: 0.25em; margin-left: 0.25em; padding-right: 0.25em; padding-left: 0.25em; }

pre { overflow-x: auto; padding: 10px; }
pre > code { outline: 0; }

table td { padding-right: 2em; }

img, video { margin-bottom: 3em; border-radius: 0.25em; }
img.tight, video.tight { margin-bottom: 0; }

figure { margin-bottom: 4.5em; }
figure img, figure video { width: 100%; height: auto; margin-bottom: 0; }
figure figcaption { margin-top: 1.125em; }
figure figcaption p { margin-bottom: 0; }

body > header { z-index: 21; position: relative; width: 100%; height: 10em; margin-bottom: -10em; background-color: #fdfdfb; }
body > header h1 { position: relative; }
body > header nav { margin-bottom: 6em; }

#sticker { z-index: 20; position: -webkit-sticky; position: sticky; top: 0; display: block; width: 100%; height: 2em; margin-bottom: 8em; box-shadow: 0px -25px 8px 33px #fdfdfb; background-color: #fdfdfb; }
#sticker span.logo { margin-right: 1.5em; }
#sticker nav { display: inline; }
#sticker nav ul { display: inline; }
#sticker nav ul li { display: inline; }

body > footer { clear: both; padding-top: 7.5em; }
body > footer p.copyright { display: inline; }
body > footer nav { margin-left: 2em; display: inline; }
body > footer nav ul { display: inline; }
body > footer nav ul li { display: inline; }

div.grid, body > article.single { width: 100%; position: relative; clear: both; display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 10%; }

article.single, article.teach { margin-top: 4.5em; }
article.single h1, article.teach h1 { margin-top: 1.5em; margin-bottom: 0.75em; }
article.single header, article.teach header { border-top: 3px solid #222; margin-bottom: 9em; grid-column: 1 / span 4; width: 45%; }
article.single header nav, article.teach header nav { margin-bottom: 6em; }
article.single header nav ul, article.teach header nav ul { display: block; width: 10%; max-width: 10%; display: inline; list-style-type: none; }
article.single header nav ul li, article.teach header nav ul li { white-space: nowrap; display: inline; margin-right: 1em; }
article.single div.content, article.teach div.content { grid-column: 1 / span 4; width: 45%; }
article.single div.content.full, article.teach div.content.full { width: 100%; }
article.single div.content.side, article.teach div.content.side { grid-column: span 2; width: 100%; }
article.single h2, article.single h3, article.teach h2, article.teach h3 { width: 100%; }
article.single ul, article.single ol, article.teach ul, article.teach ol { margin-bottom: 1.5em; }
article.single ul, article.teach ul { list-style-position: outside; list-style-type: disc; margin-left: 2.5%; }
article.single ol, article.teach ol { list-style-position: inside; list-style-type: decimal; }
article.single figure, article.teach figure { display: block; grid-column: span 2; }
article.single figure img, article.teach figure img { width: 100%; }
article.single figure figcaption, article.teach figure figcaption { width: 92.5%; margin-left: 7.5%; }
article.single figure.full, article.teach figure.full { width: 77.5%; grid-column: 1 / span 4; }
article.single figure.full figcaption, article.teach figure.full figcaption { width: 96.25%; margin-left: 3.75%; }

div.video, div.www { clear: both; width: 100%; position: relative; aspect-ratio: 16 / 9; }
div.video.portrait, div.www.portrait { aspect-ratio: 9 / 16; }
div.video video, div.video iframe, div.www video, div.www iframe { border-radius: 0.25em; }
div.video iframe, div.www iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

article.overview { margin-top: 4.5em; grid-column: span 2; }
article.overview header { border: none; width: 100%; margin-bottom: 0; }
article.overview figure { margin-bottom: 1.5em; }
article.overview div.content { grid-column: span 2; width: 100%; }

/* FLUID Stay flexible */
@media (max-width: 2000px) { body { width: 95%; } }
/* FLUID Small */
@media (max-width: 700px) { body { width: 92%; font-size: 15.75px; }
  article.single header { grid-column: span 4; width: 100%; }
  article.single div.content { width: 100%; }
  article.single div.content.full { width: 100%; }
  article.single div.content.side { grid-column: span 4; }
  article.single figure { grid-column: span 4; }
  article.single figure.full { width: 100%; grid-column: span 4; }
  article.single div.video { width: 100%; padding-bottom: 56.25%; /* 16:9 */ }
  article.overview { grid-column: span 4; }
  article.overview header { width: 100%; }
  article.overview div.content { grid-column: span 4; width: 100%; }
  body > footer p.copyright { display: block; }
  body > footer nav { margin-left: 0; }
  #sticker { box-shadow: 0px -26px 5px 31px #fdfdfb; }
  span.logo a { display: none; } }
/* FLUID Tiny */
@media (max-width: 380px) { body { font-size: 18px; } }
body.presentation { background-color: #fdfdfb; color: #0001ff; }
@keyframes rainbow { 100% { background-position: 0 30em; } }
body.presentation .rainbow { background: linear-gradient(#fd004c 16.7%, #fe9000 16.7%, #fe9000 33.4%, #fff020 33.4%, #fff020 50.1%, #3edf4b 50.1%, #3edf4b 66.8%, #3363ff 66.8%, #3363ff 83.5%, #b102b7 83.5%); animation: rainbow 50s linear infinite; background-clip: text; color: transparent; }
body.presentation .rainbow.big { font-size: 2em; line-height: 1.5em; }
body.presentation #lektor-edit-link { display: none; }
body.presentation a:hover { color: #0001ff; text-decoration-color: #0001ff; }
body.presentation header { background-color: #fdfdfb; }
body.presentation > footer { display: none; }
body.presentation #sticker { display: none; }
body.presentation > header { scroll-snap-align: start; }
body.presentation > header nav { display: none; }

html { scroll-snap-type: y mandatory; }

article.presentation { font-size: 1.65em; line-height: 1.5em; }
article.presentation > header { scroll-snap-align: start; }
article.presentation li { margin-bottom: 1em; }
article.presentation p { margin-bottom: 1em; }
article.presentation #toctarget { display: block; position: fixed; top: 0; right: 0; overflow: hidden; width: 1em; height: 1em; cursor: pointer; z-index: 501; background-color: #fdfdfb; text-indent: -999em; }
article.presentation div.toc { font-size: 0.4em; position: fixed; line-height: 1.25em; right: 0; top: 0; width: 15vw; height: 100vh; z-index: 500; padding: 1em; padding-top: 1em; background-color: #fdfdfb; overflow-y: scroll; border-left: 2px solid #0001ff; display: none; }
article.presentation div.toc.active { display: block; }
article.presentation div.toc > ul li { margin-bottom: 0; }
article.presentation div.toc > ul > li { margin-bottom: 1em; }
article.presentation div.toc > ul > li > a { text-decoration: none; }
article.presentation div.toc > ul > li a.active { color: #0001ff; }
article.presentation div.toc > ul > li ul { margin-left: 2em; }
article.presentation div.toc > ul > li ul li ul { display: none; }
article.presentation h1, article.presentation h2, article.presentation h3 { line-height: 2em; font-size: 1em; padding-top: 0; }
article.presentation h3 { width: 100%; display: block; }
article.presentation section.section2 > p, article.presentation section.section2 > section.section3, article.presentation section.section2 > ul, article.presentation section.section2 > div.p { position: relative; margin: 0; padding: 0; grid-column: span 2; }
article.presentation section.section2 > p, article.presentation section.section2 > div.p { display: flex; flex-wrap: wrap; height: 100%; max-height: calc(100vh - 4em); }
article.presentation section.section2 > p img, article.presentation section.section2 > p video, article.presentation section.section2 > p div.video, article.presentation section.section2 > p div.www, article.presentation section.section2 > div.p img, article.presentation section.section2 > div.p video, article.presentation section.section2 > div.p div.video, article.presentation section.section2 > div.p div.www { max-width: 100%; max-height: 100%; width: auto; height: auto; display: inline-block; margin: auto; /* x,y center if inside a grid or flex box */ }
article.presentation section.section2 > p div.video, article.presentation section.section2 > p div.www, article.presentation section.section2 > div.p div.video, article.presentation section.section2 > div.p div.www { width: 100%; }
article.presentation section.section2 > p div.www, article.presentation section.section2 > div.p div.www { border: 1em solid #0001ff; border-radius: 50px; box-sizing: border-box; }
article.presentation section.section2.full { position: relative; }
article.presentation section.section2.full > p, article.presentation section.section2.full > section.section3, article.presentation section.section2.full > ul, article.presentation section.section2.full > div.p { grid-column: span 4; }
article.presentation section.section1 { display: block; margin-top: 100vh; position: relative; }
article.presentation section.section1 > h1 { top: 0; left: 0; position: sticky; display: block; }
article.presentation hr { display: none; }
article.presentation section.section2 { display: grid; padding-top: 3em; grid-template-columns: repeat(4, 1fr); grid-column-gap: 2em; grid-row-gap: 2em; scroll-snap-align: start; position: relative; min-height: calc(100vh - 4em); max-height: calc(100vh - 4em); box-sizing: content-box; margin-bottom: 10vh; overflow: hidden; }
article.presentation section.section2 h2 { display: block; position: absolute; top: 0em; left: calc(2em * 0.5 + 50%); margin-top: 0; padding-top: 0; }

div.rot666:hover { animation: 15s cubic-bezier(1, 0, 1, 0) 5s forwards rot666; }

@keyframes rot666 { 0% { transform: rotate(0deg); opacity: 1.0; }
  100% { transform: rotate(36000deg); opacity: 0.0; } }
@keyframes rainbow { 100% { background-position: 0 30em; } }
body.teach .rainbow { background: linear-gradient(#fd004c 16.7%, #fe9000 16.7%, #fe9000 33.4%, #fff020 33.4%, #fff020 50.1%, #3edf4b 50.1%, #3edf4b 66.8%, #3363ff 66.8%, #3363ff 83.5%, #b102b7 83.5%); animation: rainbow 50s linear infinite; background-clip: text; color: transparent; }
body.teach .rainbow.big { font-size: 2em; line-height: 1.5em; }
body.teach img { border-radius: 0.25em; max-width: 100%; }
body.teach h2 a::before { content: '> '; }
body.teach .quarter { width: 25%; }
body.teach .half { width: 50%; }
body.teach > header { display: none; }
body.teach #sticker { display: none; }
body.teach > header { scroll-snap-align: start; }
body.teach > header nav { display: none; }
body.teach article.teach div.toc > ul ul { display: none; }
body.teach article.teach p { width: 50%; }
body.teach article.teach blockquote { font-style: italic; margin-left: 3em; }
body.teach article.teach section.section3 { margin-bottom: 12em; }
body.teach article.teach.categories section.section2, body.teach section.section2.categories { width: 100%; max-width: 100%; min-height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 2.5%; grid-auto-rows: auto; margin-bottom: 50vh; word-wrap: break-word; }
body.teach article.teach.categories section.section2 > p, body.teach section.section2.categories > p { width: 100%; grid-column: span 4; }
body.teach article.teach.categories section.section2 h2, body.teach section.section2.categories h2 { width: 100%; margin-top: 3em; margin-bottom: 2em; grid-column: span 4; }
body.teach article.teach.categories section.section2 section.section3, body.teach article.teach.categories section.section2 > p, body.teach section.section2.categories section.section3, body.teach section.section2.categories > p { width: 100%; display: block; grid-column: span 1; }
body.teach article.teach.categories section.section2 section.section3 > img:hover, body.teach article.teach.categories section.section2 section.section3 > video:hover, body.teach article.teach.categories section.section2 > p > img:hover, body.teach article.teach.categories section.section2 > p > video:hover, body.teach section.section2.categories section.section3 > img:hover, body.teach section.section2.categories section.section3 > video:hover, body.teach section.section2.categories > p > img:hover, body.teach section.section2.categories > p > video:hover { transform: scale(1.75); box-shadow: 0px 0px 105px 45px rgba(255, 255, 255, 0.9); background-color: transparent; transition: all 0.1s ease-in-out 0.0s; }
body.teach article.teach.categories section.section2 section.section3 p, body.teach article.teach.categories section.section2 > p p, body.teach section.section2.categories section.section3 p, body.teach section.section2.categories > p p { width: 100%; }
body.teach article.teach.categories section.section2 section.section3 img, body.teach article.teach.categories section.section2 section.section3 video, body.teach article.teach.categories section.section2 > p img, body.teach article.teach.categories section.section2 > p video, body.teach section.section2.categories section.section3 img, body.teach section.section2.categories section.section3 video, body.teach section.section2.categories > p img, body.teach section.section2.categories > p video { width: 100%; margin-bottom: 0; box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0); }
body.teach article.collection { display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 2.5%; }
body.teach article.collection p { width: 100%; }
body.teach article.collection h1 { grid-column: span 4; margin-top: 3em; margin-bottom: 2em; }
body.teach article.collection h2 { margin-top: 0; padding-top: 0; margin-bottom: 0; font-size: 1em; }
body.teach article.collection section.section2 { display: block; grid-column: span 1; overflow: hidden; }
body.teach article.collection section.section2 img { width: 100%; margin-bottom: 0; }
body.teach article.collection section.section2.section3 { display: block; width: 100%; }

@media (max-width: 700px) { body.teach article.teach p { width: 100%; }
  body.teach article.teach.categories section.section2, body.teach section.section2.categories { grid-template-columns: repeat(2, 1fr); grid-column-gap: 2.5%; }
  body.teach article.teach.categories section.section2 > p, body.teach section.section2.categories > p { grid-column: span 2; }
  body.teach article.teach.categories section.section2 h2, body.teach section.section2.categories h2 { grid-column: span 2; } }

/*# sourceMappingURL=main.css.map */