@import url(https://fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic);@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i");@font-face{font-family:"cubanoregular";src:url("../fonts/cubano-regular-webfont.woff2") format("woff2"),url("../fonts/cubano-regular-webfont.woff") format("woff");font-weight:normal;font-style:normal}.highlight .hll{background-color:#ffc}.highlight{background:#f8f8f8}.highlight .c{color:#408080;font-style:italic}.highlight .err{border:1px solid red}.highlight .k{color:#008000;font-weight:bold}.highlight .o{color:#666}.highlight .ch{color:#408080;font-style:italic}.highlight .cm{color:#408080;font-style:italic}.highlight .cp{color:#BC7A00}.highlight .cpf{color:#408080;font-style:italic}.highlight .c1{color:#408080;font-style:italic}.highlight .cs{color:#408080;font-style:italic}.highlight .gd{color:#A00000}.highlight .ge{font-style:italic}.highlight .gr{color:red}.highlight .gh{color:#000080;font-weight:bold}.highlight .gi{color:#00A000}.highlight .go{color:#888}.highlight .gp{color:#000080;font-weight:bold}.highlight .gs{font-weight:bold}.highlight .gu{color:#800080;font-weight:bold}.highlight .gt{color:#04d}.highlight .kc{color:#008000;font-weight:bold}.highlight .kd{color:#008000;font-weight:bold}.highlight .kn{color:#008000;font-weight:bold}.highlight .kp{color:green}.highlight .kr{color:#008000;font-weight:bold}.highlight .kt{color:#B00040}.highlight .m{color:#666}.highlight .s{color:#BA2121}.highlight .na{color:#7D9029}.highlight .nb{color:green}.highlight .nc{color:#0000FF;font-weight:bold}.highlight .no{color:#800}.highlight .nd{color:#a2f}.highlight .ni{color:#999999;font-weight:bold}.highlight .ne{color:#D2413A;font-weight:bold}.highlight .nf{color:blue}.highlight .nl{color:#A0A000}.highlight .nn{color:#0000FF;font-weight:bold}.highlight .nt{color:#008000;font-weight:bold}.highlight .nv{color:#19177C}.highlight .ow{color:#AA22FF;font-weight:bold}.highlight .w{color:#bbb}.highlight .mb{color:#666}.highlight .mf{color:#666}.highlight .mh{color:#666}.highlight .mi{color:#666}.highlight .mo{color:#666}.highlight .sa{color:#BA2121}.highlight .sb{color:#BA2121}.highlight .sc{color:#BA2121}.highlight .dl{color:#BA2121}.highlight .sd{color:#BA2121;font-style:italic}.highlight .s2{color:#BA2121}.highlight .se{color:#BB6622;font-weight:bold}.highlight .sh{color:#BA2121}.highlight .si{color:#BB6688;font-weight:bold}.highlight .sx{color:green}.highlight .sr{color:#b68}.highlight .s1{color:#BA2121}.highlight .ss{color:#19177C}.highlight .bp{color:green}.highlight .fm{color:blue}.highlight .vc{color:#19177C}.highlight .vg{color:#19177C}.highlight .vi{color:#19177C}.highlight .vm{color:#19177C}.highlight .il{color:#666}*{box-sizing:border-box}html,body{margin:0;padding:0}:root{font-size:10px}@media (max-width: 1200px){:root{font-size:9px}}@media (max-width: 1024px){:root{font-size:8px}}@media (max-width: 920px){:root{font-size:9px}}@media (max-width: 700px){:root{font-size:8px}}@media (max-width: 620px){:root{font-size:10px}}.wrapper,nav .links{max-width:115rem;margin:0 auto;padding:0 2rem}.sr-only{position:absolute;height:1px;width:1px;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px);-webkit-clip-path:polygon(0px 0px, 0px 0px, 0px 0px);overflow:hidden !important}html,body{font-family:"Open Sans",sans-serif;letter-spacing:.02em;line-height:1.4;color:#222;font-size:1.6rem}h1,h2,h3,h4,h5,h6,button,.cta-button,.landing-page .welcome-message .learn-to-code .ctas a,.landing-page .featured-videos .more-videos,.video .player-and-topics .player .player-controls a,.video .links-and-books .player .player-controls a,.hero-item a,.video-card .buttons a,.video-list a.watch-all-button{font-family:"cubanoregular";letter-spacing:.4px;font-weight:normal}h1{font-size:6rem}h2{font-size:3rem;padding-top:1em;text-align:center}h3{font-size:2.5rem}.subtitle{text-align:center;margin:-1.25em 0em 2em;font-family:"cubanoregular";letter-spacing:.4px;font-size:1.8rem}highlight{color:#1E7EA4;font-weight:bold}button,.cta-button,.landing-page .welcome-message .learn-to-code .ctas a,.landing-page .featured-videos .more-videos,.video .player-and-topics .player .player-controls a,.video .links-and-books .player .player-controls a,.hero-item a,.video-card .buttons a,.video-list a.watch-all-button{display:inline-block;border-radius:5px;background:#FFF;padding:20px;border:none;text-decoration:none;vertical-align:middle;text-align:center;box-shadow:0px 6px 0px 0px rgba(0,0,0,0.06);transition:all 150ms cubic-bezier(.4, 0, .2, 1);transform:scale(1)}button:hover,button:focus,.cta-button:hover,.landing-page .welcome-message .learn-to-code .ctas a:hover,.landing-page .featured-videos .more-videos:hover,.video .player-and-topics .player .player-controls a:hover,.video .links-and-books .player .player-controls a:hover,.hero-item a:hover,.video-card .buttons a:hover,.video-list a.watch-all-button:hover,.cta-button:focus,.landing-page .welcome-message .learn-to-code .ctas a:focus,.landing-page .featured-videos .more-videos:focus,.video .player-and-topics .player .player-controls a:focus,.video .links-and-books .player .player-controls a:focus,.hero-item a:focus,.video-card .buttons a:focus,.video-list a.watch-all-button:focus{box-shadow:0px 0px 0px 0px rgba(0,0,0,0.06);transform:scale(.98)}a{color:#222;transition:color 200ms cubic-bezier(.4, 0, .2, 1);text-decoration:underline}a:hover,a:focus{color:#2F7F47}#menu-button{display:none;box-shadow:none;justify-content:space-around;align-items:center;flex-direction:column;font-size:35px;padding:.4em .35em;border-radius:0px 5px 5px 0px;background:#1E7EA4;width:7rem;height:6rem;position:fixed;left:0;top:20px;z-index:10000}@media (max-width: 700px){#menu-button{display:flex;cursor:pointer}}#menu-button span{width:36px;height:.15em;display:inline-block;background:#FFF;border-radius:.075em;transition:all 375ms cubic-bezier(.4, 0, .2, 1)}#menu-button:hover,#menu-button:focus{transform:none;box-shadow:none}nav{position:fixed;top:0;width:100%;z-index:9000;width:100%;height:5rem;font-size:16px;background:rgba(9,20,154,0.55);transition-delay:.3s;transition-property:width;transition-timing-function:ease}@media (max-width: 700px){nav{padding-top:2rem;width:auto;height:auto;overflow:hidden}}nav:hover{background:rgba(9,20,154,0.74)}@media (max-width: 700px){nav{width:0%;height:100%;top:10rem;position:fixed;background:none}nav:hover{background:none}}nav button{font-size:16px;background:transparent;box-shadow:none;color:#FFF;vertical-align:none;cursor:pointer}nav button *{pointer-events:none}nav button span{border:1px solid transparent;padding:0 2px}nav button:hover{text-shadow:0px 0px 5px #BBB;transform:scale(1)}nav button:focus{outline:none;text-shadow:0px 0px 5px #BBB;transform:scale(1)}nav button:focus span{border:1px solid #FFF;border-radius:2px}@media (max-width: 700px){nav button{background:#1E7EA4;border:2px solid #1E7EA4;padding:.7em 1em}nav button:focus{border-color:#00008b}nav button:focus span{border-color:transparent}}nav .links{list-style-type:none;height:100%;display:flex;justify-content:center;align-items:center}@media (max-width: 700px){nav .links{flex-direction:column;align-items:flex-start;height:auto;padding-left:2rem}}@media (max-width: 700px){nav .links button{margin:.5em 0}}nav .links a{display:block;list-style-type:none;margin:0em 1em;padding:0 2px;color:#FFF;border:1px solid transparent;border-radius:2px;font-family:"cubanoregular";letter-spacing:.4px;text-decoration:none}nav .links a:hover{text-shadow:0px 0px 5px #BBB}nav .links a:focus{outline:none;border-color:#FFF;text-shadow:0px 0px 5px #BBB}@media (max-width: 700px){nav .links a{visibility:hidden;margin:.5em 0;text-shadow:none;background:#1E7EA4;border:2px solid #1E7EA4;padding:.7em 1em;border-radius:5px;opacity:0;transform:translateX(-3rem)}nav .links a:focus{border-color:#00008b}nav .links a:nth-child(7){transition-property:all;transition-duration:150ms;transition-delay:0ms;transition-timing-function:cubic-bezier(.4, 0, .2, 1)}nav .links a:nth-child(6){transition-property:all;transition-duration:150ms;transition-delay:75ms;transition-timing-function:cubic-bezier(.4, 0, .2, 1)}nav .links a:nth-child(5){transition-property:all;transition-duration:150ms;transition-delay:150ms;transition-timing-function:cubic-bezier(.4, 0, .2, 1)}nav .links a:nth-child(4){transition-property:all;transition-duration:150ms;transition-delay:225ms;transition-timing-function:cubic-bezier(.4, 0, .2, 1)}nav .links a:nth-child(3){transition-property:all;transition-duration:150ms;transition-delay:300ms;transition-timing-function:cubic-bezier(.4, 0, .2, 1)}nav .links a:nth-child(2){transition-property:all;transition-duration:150ms;transition-delay:375ms;transition-timing-function:cubic-bezier(.4, 0, .2, 1)}nav .links a:nth-child(1){transition-property:all;transition-duration:150ms;transition-delay:450ms;transition-timing-function:cubic-bezier(.4, 0, .2, 1)}}.submenu{visibility:hidden;position:fixed;top:5rem;height:auto;width:auto;background:#9659A7;border-bottom-left-radius:5px;border-bottom-right-radius:5px;box-shadow:0px 6px 0px 0px rgba(0,0,0,0.06)}@media (max-width: 700px){.submenu{position:inherit;background:none;box-shadow:none;height:0;overflow:hidden}}.submenu .links{flex-direction:column;align-items:flex-start;padding:.5em 0}@media (max-width: 700px){.submenu .links{margin:0;margin-left:1em;padding:0em 0}.submenu .links:focus{border-color:#00008b}}.submenu .links li{margin:.5em 0}@media (max-width: 700px){.submenu .links li a{margin:0;background:#9659A7;border:2px solid #9659A7}.submenu .links li a:focus{border-color:#00008b}}.submenu.active{visibility:visible}@media (max-width: 700px){.submenu.active{height:auto;overflow:auto}}.mobilenav-backdrop{transition:filter 375ms cubic-bezier(.4, 0, .2, 1)}@media (max-width: 700px){#menu-button ~ .mobilenav-backdrop.active{filter:blur(10px);pointer-events:none}}#menu-button ~ .mobilenav-toggle.active span:nth-child(2){transform:translateX(20%)}#menu-button ~ .navigation.active{width:100%}@media (max-width: 700px){#menu-button ~ .navigation.active{padding-top:10rem;padding-bottom:1em;background:rgba(255,255,255,0.5);overflow:auto;top:0;left:0;right:0}}@media (max-width: 700px){#menu-button ~ .navigation.active .links li a{visibility:visible;opacity:1;transform:translateX(0rem)}}#menu-button ~ .navigation.active .links li:nth-child(1) a{transition-delay:0ms}#menu-button ~ .navigation.active .links li:nth-child(2) a{transition-delay:75ms}#menu-button ~ .navigation.active .links li:nth-child(3) a{transition-delay:150ms}#menu-button ~ .navigation.active .links li:nth-child(4) a{transition-delay:225ms}#menu-button ~ .navigation.active .links li:nth-child(5) a{transition-delay:300ms}#menu-button ~ .navigation.active .links li:nth-child(6) a{transition-delay:375ms}#menu-button ~ .navigation.active .links li:nth-child(7) a{transition-delay:450ms}header{margin-bottom:5rem}header .header-image{height:30rem;background-image:url(../images/header.jpg);background-position:top center;background-size:cover;background-repeat:no-repeat}@media (max-width: 700px){header .header-image{background-image:url(../images/header-mobile.jpg);background-position:center;height:10rem;display:flex;align-items:center}}footer{margin-top:50px}footer .links{display:flex}@media (max-width: 620px){footer .links{flex-wrap:wrap}}footer .links a{padding:40px;flex-basis:100%;text-align:center;font-family:"cubanoregular";letter-spacing:.4px;text-decoration:none;color:#FFF;margin:0}footer .links a span{display:inline-block;font-size:18px;transition:all 150ms cubic-bezier(.4, 0, .2, 1);transform:scale(1)}footer .links a:hover span,footer .links a:focus span{transform:scale(1.2)}footer .links a.nature-of-code{background:#E51310}footer .links a.learning-processing{background:#F1C500;color:#222}footer .links a.shiffman-net{background:#1E7EA4}.landing-page{padding-bottom:5rem}.landing-page .welcome-message,.landing-page .support{display:flex;justify-content:space-around}@media (max-width: 620px){.landing-page .welcome-message,.landing-page .support{flex-wrap:wrap}}.landing-page .welcome-message{align-items:center}.landing-page .welcome-message .learn-to-code{width:40%}@media (max-width: 620px){.landing-page .welcome-message .learn-to-code{width:100%;text-align:center}}.landing-page .welcome-message .learn-to-code h1{color:#2f2f2f;margin:0}@media (max-width: 920px){.landing-page .welcome-message .learn-to-code h1{margin-bottom:.5em}}@media (max-width: 620px){.landing-page .welcome-message .learn-to-code h1{font-size:4rem}}.landing-page .welcome-message .learn-to-code p{margin:1em 0em;font-size:1.1em}.landing-page .welcome-message .learn-to-code .ctas{margin-top:2em}@media (max-width: 920px){.landing-page .welcome-message .learn-to-code .ctas{text-align:center}}@media (max-width: 550px){.landing-page .welcome-message .learn-to-code .ctas{display:inline-block}}.landing-page .welcome-message .learn-to-code .ctas a{color:#FFF;margin-right:1em;margin-bottom:1em}@media (max-width: 920px){.landing-page .welcome-message .learn-to-code .ctas a{width:80%;max-width:35rem;margin:.5em}}@media (max-width: 550px){.landing-page .welcome-message .learn-to-code .ctas a{width:100%;margin:.5em 0}}.landing-page .featured-videos{text-align:center}@media (max-width: 920px) and (min-width: 620px){.landing-page .featured-videos .video-list .videos li:nth-child(2){display:none}}.landing-page .featured-videos .more-videos{background:#2F7F47;color:#FFF}.landing-page h2{margin-top:8rem;text-align:center}.landing-page .learn-to-code a.youtube{background:#E51310 !important}.landing-page .learn-to-code a.patreon,.landing-page div.patreon a{background:#2F7F47 !important}.landing-page .learn-to-code a.discord{background:#1E7EA4 !important}.landing-page .merch-store a{background:#D53072}.landing-page .amazon-store a{background:#BF5708}.faq h2{text-align:left}.faq h3{font-family:"Open Sans",sans-serif;font-size:2rem;font-weight:bold;margin-top:4.5rem}.series-index .description,.series-index .description-excerpt{text-align:center}.series-index .description{border:1px solid #a2a2a2;border-left:none;border-right:none;margin-bottom:5rem}.series-index .series{margin-top:10rem}.series-index .series h3{text-align:center}.series-index .series .subtitle{font-size:1.6rem}.video h3{font-size:2rem}.video .player-and-topics,.video .links-and-books{display:flex;flex-wrap:wrap;justify-content:space-between}@media (max-width: 920px){.video .player-and-topics,.video .links-and-books{flex-direction:column}}.video .player-and-topics>div,.video .links-and-books>div{flex-basis:calc(50% - 2em);margin:2em 0}@media (max-width: 920px){.video .player-and-topics>div,.video .links-and-books>div{flex-basis:auto;margin:1em 0;width:100%}}.video .player-and-topics .player,.video .links-and-books .player{text-align:center}.video .player-and-topics .player .video-player,.video .links-and-books .player .video-player{width:55rem;height:30.9375rem}@media (max-width: 620px){.video .player-and-topics .player .video-player,.video .links-and-books .player .video-player{width:100%;height:calc(100vw * 9 / 16 - 2rem)}}.video .player-and-topics .player .player-controls,.video .links-and-books .player .player-controls{display:flex;width:55rem;margin:1em auto}@media (max-width: 620px){.video .player-and-topics .player .player-controls,.video .links-and-books .player .player-controls{width:100%}}.video .player-and-topics .player .player-controls a,.video .links-and-books .player .player-controls a{background:#9659A7;color:#FFF}.video .player-and-topics .player .player-controls a.watch-all-videos,.video .links-and-books .player .player-controls a.watch-all-videos{flex-grow:2;margin:auto .5em}.video .player-and-topics .player .player-controls a.disabled,.video .links-and-books .player .player-controls a.disabled{background:#b68bc2;cursor:not-allowed;pointer-events:none}.video .player-and-topics .topics h3,.video .links-and-books .topics h3{margin-top:2em}.video .player-and-topics .topics ul,.video .links-and-books .topics ul{padding-left:1.5em}.video .code-actions .p5js{background:#A42963 !important}.video .code-actions .Processing{background:#1E7EA4 !important}.video .code-actions .Nodejs{background:#2F7F47 !important}.video .code-actions .Javascript{background:#9659A7 !important}.video .code-actions .variation-button{display:flex;justify-content:space-between;align-items:center;background:#9659A7;position:relative;padding:15px 20px;margin:2.5%;width:95%;border-radius:5px;box-shadow:0px 6px 0px 0px rgba(0,0,0,0.06);font-family:"cubanoregular"}@media (max-width: 620px){.video .code-actions .variation-button{display:grid;padding-top:25px}}.video .code-actions .variation-button img{max-height:1.5em}.video .code-actions .variation-button .title{display:inline;color:#FFF}.video .code-actions .variation-button ul{list-style-type:none;display:inline;margin:0;padding:0}.video .code-actions .variation-button ul li{display:inline}@media (max-width: 620px){.video .code-actions .variation-button ul li{display:block;margin:25px 0px}}.video .code-actions .variation-button ul li a{text-decoration:none;background:rgba(0,0,0,0.15);padding:10px;margin:0;border-radius:5px;color:#fff}.video .code-actions .variation-button ul li a:hover{margin:2px;padding:8px}.video .player-and-topics{align-items:center}.video .remake{text-align:center;font-size:1.5rem;font-weight:bold;background:#F1C500;padding:20px;box-shadow:0px 6px 0px 0px rgba(0,0,0,0.06);border-radius:5px}.guide h2,.guide h3,.guide h4,.guide h5,.guide h6{text-align:left}.guide div.highlight,.guide code{padding:.5rem 2rem;border-radius:5px;letter-spacing:0}.guide code{background:#f8f8f8;padding:.5rem}.guide div.highlight{box-shadow:0 0 2px 0 rgba(34,34,34,0.15);line-height:unset}.guide blockquote{border-left:.5rem solid #1E7EA4;margin-left:0;padding-left:2.5rem;padding-top:.5rem;padding-bottom:.5rem}.guide img{width:100%;max-width:50rem}.guide table{border-spacing:0}.guide table th{border-bottom:1px solid #7b7b7b}.guide table th,.guide table td{border-left:1px solid #7b7b7b;padding:.5rem 2rem}.guide table th:first-child,.guide table td:first-child{border-left:none}.back-to-top-button{background:#1E7EA4;z-index:99;position:fixed;bottom:-50px;right:5px;padding:20px 5px 10px 5px;border-radius:5px;box-shadow:0 0 1px 0 rgba(0,0,0,0.6);cursor:pointer;transition:all ease-in-out .5s}.back-to-top-button>span{background:#eee;width:30px;height:7px;border-radius:5px;margin-bottom:10px;position:relative}.back-to-top-button>span:nth-child(1){transform:rotate(-45deg);float:left;left:7px}.back-to-top-button>span:nth-child(2){transform:rotate(45deg);float:right;right:7px}.back-to-top-button.active{bottom:5px}.back-to-top-button:hover,.back-to-top-button:focus{outline:#1f1f1f auto 1px}.hero-item{width:35rem;padding:1rem;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center}.hero-item>*{margin:2rem}.hero-item .hero-image{width:20rem;height:20rem;overflow:hidden}.hero-item .hero-image>*{width:100%}.hero-item .hero-text>span{display:block;margin:1rem}.hero-item .hero-text .hero-title{font-weight:bold;font-size:1.1em}.hero-item a{color:#FFF;background:#9659A7;width:80%}.link-list a.video-control-link{color:#1E7EA4;text-decoration:none;transition:color 200ms cubic-bezier(.4, 0, .2, 1)}.link-list a.video-control-link:hover{color:#4ab4de}.link-list ul{list-style:none;padding:0em 0em 0em 1.5em}.link-list ul li{margin:.3em 0}.link-list ul li:before{display:inline-block;content:"▸";margin-left:-1em;margin-right:.5em}.video-card{width:35rem;box-shadow:0 10px 20px #eee,0 6px 6px #d5d5d5;padding-bottom:1em;border-radius:5px;overflow:hidden;margin:3rem 0rem;display:flex;flex-direction:column;justify-content:space-between;transition:all 250ms}@media (hover: hover){.video-card:hover{transform:translateY(-5px)}}.video-card>a{text-decoration:none;color:#222}.video-card .video-header .thumb-container{width:100%;height:auto;position:relative}.video-card .video-header .thumb-container .video-badge{position:absolute;right:0;bottom:0;background:#2F7F47;color:#FFF;font-family:"cubanoregular";letter-spacing:.4px;font-size:2rem;padding:.5em .5em .5em .6em;border-radius:5px 0em 0em}.video-card .video-header .video-thumbnail{width:35rem;height:19.6875rem;background-size:cover;background-position:center}.video-card .video-header h3{font-size:2rem;padding:1.25em .5em .4em 1em;margin:0;text-align:left}.video-card .video-header .video-date{color:#626262;font-size:1.5rem;padding:0em 1.25em}.video-card .video-description{padding:0 1.25em 1.5em 1.25em;flex:1}.video-card .video-description ul{padding-left:1.5em}.video-card .buttons{display:flex;justify-content:space-between;padding:0em 2rem 1rem}@media (max-width: 550px){.video-card .buttons{flex-wrap:wrap}}.video-card .buttons a{font-size:1.5rem;background:#9659A7;color:#FFF;flex-grow:2;margin-left:.25em;margin-right:.25em;padding:15px}@media (max-width: 550px){.video-card .buttons a{margin:0}}.video-card .buttons a:first-child{margin-left:0}.video-card .buttons a:last-child{margin-right:0}@media (max-width: 550px){.video-card .buttons a{flex-basis:100%;margin-top:.5em}}.video-list{text-align:center}.video-list .videos{text-align:left;display:flex;flex-wrap:wrap;justify-content:space-around;margin:0;padding:0}.video-list .videos li{list-style-type:none;display:flex}.video-list .videos li .video-card{margin-top:2rem;margin-bottom:3rem}.video-list a.watch-all-button{color:#FFF;background:#2F7F47;margin:2rem auto 0}