/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */
/* What follows is the result of much research on cross-browser styling. Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, Kroc Camen, and the H5BP dev community and team. */
/* ========================================================================== Base styles: opinionated defaults ========================================================================== */
html { color: #222; font-size: 1em; line-height: 1.4; }

/* Remove text-shadow in selection highlight: https://twitter.com/miketaylr/status/12228805301 These selection rule sets have to be separate. Customize the background color to match your design. */
::-moz-selection { background: #b3d4fc; text-shadow: none; }

::selection { background: #b3d4fc; text-shadow: none; }

/* A better looking default horizontal rule */
hr { display: block; height: 1px; border: 0; border-top: 1.5px solid #ccc; margin: 1em 0; padding: 0; }

/* Remove the gap between audio, canvas, iframes, images, videos and the bottom of their containers: https://github.com/h5bp/html5-boilerplate/issues/440 */
audio, canvas, iframe, img, svg, video { vertical-align: middle; }

/* Remove default fieldset styles. */
fieldset { border: 0; margin: 0; padding: 0; }

/* Allow only vertical resizing of textareas. */
textarea { resize: vertical; }

/* ========================================================================== Browser Upgrade Prompt ========================================================================== */
.browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

/* ========================================================================== Author's custom styles ========================================================================== */
:root { color-scheme: light dark; --text-color: #000; --black: #000; --footer: #fbf9f9; --white: white; --background: white; --gray: #4c4c4c; --semi-white: #eee; --blue: #1277EB; --font-sans: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: 'SFMono-Light', 'SF Mono', 'Ubuntu Mono', Consolas, 'DejaVu Sans Mono', Menlo, monospace; }

@media (prefers-color-scheme: dark) { :root { --text-color: #fff; --black: #fff; --footer: #000; --white: #000; --background: #1e1e1e; --gray: #dbdbdb; --semi-white: #333; } header.landing .logo { background: url("../img/logo-white.svg") !important; background-size: contain !important; background-repeat: no-repeat !important; } }

@media (prefers-color-scheme: dark) and (max-width: 960px) { article .text { background: rgba(0, 0, 0, 0.7) !important; } }

body { font-family: var(--font-sans); font-style: normal; font-weight: normal; font-size: 12px; line-height: 14px; color: var(--text-color); background: var(--background); }

html { overflow-x: hidden; }

.langs { position: absolute; top: 5px; width: 100vw; display: flex; justify-content: center; align-items: center; }

.langs a { margin: 5px; }

header.landing { margin: 0; height: 100vh; display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; }

header.landing .text { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: start; }

header.landing .text .logo { background: url("../img/logo.svg"); background-size: contain; background-repeat: no-repeat; width: 960px; height: 125px; }

header.landing .text h1 { font-family: var(--font-sans); font-style: normal; font-weight: bold; font-size: 64px; line-height: 76px; max-width: 900px; }

header.landing .text .description { max-width: 900px; font-family: var(--font-sans); font-style: normal; font-weight: 600; font-size: 24px; line-height: 29px; text-align: justify; }

header.landing .text .links { margin-top: 15px; display: flex; flex-direction: row; justify-content: space-around; align-items: center; }

header.landing .text .links a { padding-right: 15px; font-family: var(--font-sans); font-style: normal; font-weight: 600; font-size: 18px; line-height: 24px; color: var(--blue); text-decoration: none; }

header.landing .illustration { width: 500px; height: 500px; background: url("../img/hero.svg"); background-size: contain; background-repeat: no-repeat; }

article { height: auto; }

article .figure { position: relative; display: flex; flex-direction: column; }

article .figure .step { width: 57vw; height: 100vh; }

article .figure #step-1 { background-image: url("../img/step1.svg"); background-size: contain; background-repeat: no-repeat; }

article .figure #step-2 { background-image: url("../img/step2.svg"); background-size: contain; background-repeat: no-repeat; }

article .figure #step-2-5 { background-image: url("../img/step2-5.svg"); background-size: contain; background-repeat: no-repeat; }

article .figure #step-3 { background-image: url("../img/step3.svg"); background-size: contain; background-repeat: no-repeat; }

article .figure #step-4 { background-image: url("../img/step4.svg"); background-size: contain; background-repeat: no-repeat; }

.text-container { height: calc(5*100vh); position: absolute; top: 100vh; left: 60vw; z-index: auto; }

.text-container .text { position: -webkit-sticky; position: sticky; top: 100px; width: 450px; max-width: calc(40vw - 20px); text-align: justify; }

.text-container .text h1 { font-family: var(--font-sans); font-style: normal; font-weight: bold; font-size: 64px; line-height: 76px; }

.text-container .text .bold { font-family: var(--font-sans); font-style: normal; font-weight: 600; font-size: 24px; line-height: 29px; }

.text-container .text p { font-family: var(--font-sans); font-style: normal; font-weight: 500; font-size: 18px; line-height: 21px; }

.text-container .text p code { font-family: var(--font-mono); }

.animation { margin: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }

.animation h1 { font-family: var(--font-sans); font-style: normal; font-weight: bold; font-size: 64px; line-height: 76px; text-align: center; }

.animation .bold { max-width: 460px; font-family: var(--font-sans); font-style: normal; font-weight: 600; font-size: 24px; line-height: 29px; text-align: center; }

.animation .walkthrough { background: var(--blue); color: white; font-weight: 600; font-size: 24px; line-height: 29px; padding: .5rem 1.5rem; border: 0; border-radius: 3px; margin: 10px; cursor: pointer; }

.animation .app { margin-top: 10px; }

.animation .app canvas { width: 400px; height: 400px; }

.animation .app .selector { margin-top: 10px; display: flex; flex-direction: row; justify-content: space-around; align-items: center; width: 396px; padding: 0 2px; height: 32px; background: #c4c4c4; border-radius: 5px; color: black; }

.animation .app .selector div { width: 120px; height: 28px; text-align: center; line-height: 28px; transition: 100ms ease-in-out; }

.animation .app .selector .active { background: #ffffff; border-radius: 5px; }

.animation .app .panel { height: 400px; }

.animation .app .panel .selector { margin-top: 0px; }

.animation .app .panel .row { width: 396px; padding: 0 2px; display: flex; flex-direction: row; justify-content: space-between; margin-top: 13px; }

.animation .app .panel .row .value { text-align: right; color: var(--gray); }

.animation .app .panel .row .value.show { color: #007aff; cursor: pointer; }

.animation .app .control { height: 400px; }

.animation .app .control .row { width: 396px; padding: 0 2px; display: flex; flex-direction: row; justify-content: space-between; padding-top: 13px; }

.animation .app .control .row .value { text-align: right; color: var(--gray); }

.animation .app .control .row .value.show { color: #007aff; cursor: pointer; }

.animation footer { height: 300px; text-align: center; font-family: var(--font-sans); font-style: normal; font-size: 24px; line-height: 29px; text-align: center; }

.animation footer a { color: inherit; }

.animation footer small { opacity: .4; }

.animation footer small.legal { opacity: 1; font-size: 12px; line-height: 16px; color: var(--blue); }

.animation footer small.legal a { margin: 5px; }

.animation .scientist { position: absolute; bottom: calc(-6*100vh); left: 0; background: url("../img/scientist.svg"); background-size: contain; background-position: bottom left; background-repeat: no-repeat; height: 75vh; width: 50vw; z-index: -10; }

.animation .sitting { position: absolute; bottom: calc(-6*100vh); right: 0; background: url("../img/sitting.svg"); background-size: contain; background-position: bottom right; background-repeat: no-repeat; height: 60vh; width: 50vw; z-index: -10; }

@media (max-width: 1460px) { article { margin-top: 500px; } .text-container { top: calc(100vh + 500px); } .animation .scientist, .animation .sitting { bottom: calc(-6*100vh - 500px); } }

@media (max-width: 960px) { header.landing .text .logo { max-width: 500px !important; width: 90vw; height: 75px; } header.landing .text h1 { font-size: 33px !important; line-height: 36px !important; margin: 0 !important; margin-bottom: 10px !important; max-width: 500px !important; width: 90vw; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } header.landing .text .description { font-size: 12px !important; line-height: 16px !important; max-width: 500px !important; width: 90vw; text-align: justify !important; } header.landing .text .links { max-width: 500px !important; width: 90vw; } header.landing .text .links a { font-size: 11px !important; line-height: 13px !important; } article { padding-bottom: 50vh; } article .figure .step { width: 90vw; } article .text-container { position: absolute; top: calc(100vh + 500px); left: 0; height: calc(5*100vh + 50vh); } article .text-container .text { position: -webkit-sticky; position: sticky; top: 40vh; margin-left: 15px; width: calc(100vw - 60px); height: calc(60vh - 40px); max-width: 100vw; background: rgba(232, 232, 232, 0.7); -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px); border-radius: 25px; padding: 15px; } article .text-container .text h1 { line-height: unset; font-size: 36px; } article .text-container .text .bold { font-size: 18px; line-height: 21px; } article .text-container .text p { font-size: 14px; line-height: 17px; } .animation { justify-content: start !important; } .animation h1 { font-size: 44px; line-height: 56px; } .animation .scientist, .animation .sitting { bottom: calc(-6*100vh - 500px - 50vh - 500px); } .animation .bold { width: 100vw !important; max-width: 350px !important; font-size: 16px !important; line-height: 21px !important; } .animation .app canvas { width: 300px; height: 300px; } .animation .app .selector { width: 296px; } .animation .app .panel { height: 300px; } .animation .app .panel .row { width: 296px; } .animation .app .control { height: 300px; } .animation .app .control .row { width: 296px; } }

.popup { position: fixed; top: 0; width: 100vw; height: 100vh; display: none; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px); color: black; }

.popup .infobox { width: 100vw; height: 100vh; max-width: 450px; max-height: 600px; background: white; border-radius: 15px; }

.popup .infobox .cross { background: url("../img/cross.svg"); background-size: cover; position: relative; top: 22px; left: 15px; width: 25px; height: 25px; z-index: 10; cursor: pointer; }

.popup .infobox .title { font-family: var(--font-sans); font-style: normal; font-weight: bold; font-size: 24px; line-height: 44px; text-align: center; position: relative; top: -15px; }

.popup .infobox .container { overflow-y: scroll; margin-left: 10px; width: calc(100vw - 20px); max-width: calc(450px - 20px); height: calc(100vh - 69px); max-height: calc(600px - 69px); }

.popup .infobox .container .center { font-family: var(--font-sans); font-style: normal; font-weight: bold; font-size: 24px; line-height: 36px; color: var(--gray); text-align: center; }

.popup .infobox .container .row { padding: 0 2px; display: flex; flex-direction: row; justify-content: space-between; padding-top: 13px; }

.popup .infobox .container .row .value { margin-left: 20px; text-align: right; color: #4c4c4c; }

/* ========================================================================== Helper classes ========================================================================== */
/* Hide visually and from screen readers */
.hidden { display: none !important; }

/* Hide only visually, but have it available for screen readers: https://snook.ca/archives/html_and_css/hiding-content-for-accessibility 1. For long content, line feeds are not interpreted as spaces and small width causes content to wrap 1 word per line: https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; /* 1 */ }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: https://www.drupal.org/node/897638 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; white-space: inherit; }

/* Hide visually and from screen readers, but maintain layout */
.invisible { visibility: hidden; }

/* Clearfix: contain floats For modern browsers 1. The space content is one way to avoid an Opera bug when the `contenteditable` attribute is included anywhere else in the document. Otherwise it causes space to appear at the top and bottom of elements that receive the `clearfix` class. 2. The use of `table` rather than `block` is only necessary if using `:before` to contain the top-margins of child elements. */
.clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ }

.clearfix:after { clear: both; }

/* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */
@media only screen and (min-width: 35em) { /* Style adjustments for viewports that meet the condition */ }

@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ }

/* ========================================================================== Print styles. Inlined to avoid the additional HTTP request: http://www.phpied.com/delay-loading-your-print-css/ ========================================================================== */
@media print { *, *:before, *:after, p:first-letter, div:first-letter, blockquote:first-letter, li:first-letter, p:first-line, div:first-line, blockquote:first-line, li:first-line { background: transparent !important; color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* Don't show links that are fragment identifiers, or use the `javascript:` pseudo protocol */ a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; } pre { white-space: pre-wrap !important; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } /* Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables */ thead { display: table-header-group; } tr, img { page-break-inside: avoid; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }

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