@import url(https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap);@import url(https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-family:kyri_kapsregular,sans-serif;margin:0}@font-face{font-family:kyri_kapsregular;font-style:normal;font-weight:400;src:url(/static/media/kyri_kaps-webfont.725bceb0ea486735e470.woff2) format("woff2"),url(/static/media/kyri_kaps-webfont.9fd94df75f8fe78aacd9.woff) format("woff")}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.canvas-area{position:-webkit-sticky;position:sticky;top:120px}.canvas-area .panel{background-color:var(--light);padding:0;position:relative}.exported-image{border:1px solid #000;width:100%}#exportContainer{box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);position:relative}#exportContainer:before{background-color:#fff;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.react-sketch-canvas{background:none;left:0;position:absolute;top:0}.bg-tag .wpb{display:block}.wpb{bottom:10px;display:none;left:10px;max-width:200px;position:absolute;width:50%;z-index:400}.sketchingTime{font-size:3rem;font-weight:200}.main-header{align-items:center;height:180px;justify-content:space-around;margin-bottom:40px;padding:0 0 0 30px}.title-col{flex-direction:column}.wpb-game{margin:0 auto 10px;position:relative;width:210px}h1{color:#313639;font-family:kyri_kapsregular,sans-serif;font-size:48px;font-style:normal;font-weight:900;letter-spacing:-4px;letter-spacing:2.25px;line-height:1em;margin:0 0 .5rem;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.5)}h1.book{font-size:32px}h3{font-family:kyri_kapsregular,sans-serif;text-align:center}.swatch{border:2px solid #fff;border-radius:8px;box-shadow:0 0 0 1px rgba(0,0,0,.1),inset 0 0 0 1px rgba(0,0,0,.1);cursor:pointer;height:40px;margin:4px 0;overflow:hidden;position:relative;width:40px}.swatch .use-rainbow__swatches{display:flex;flex-direction:column;height:100%;outline:1px solid hsla(0,0%,100%,.741);position:absolute;right:0;top:0;width:4px}.swatch .use-rainbow__swatches div{height:5px;width:100%}.popover{border-radius:9px;box-shadow:0 6px 12px rgba(0,0,0,.15);left:calc(100% - 210px);position:absolute;top:10px;z-index:99999}.stroke-value{background-color:#fff;border:1px solid #fff;border-radius:6px;color:#010101;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:12px;font-weight:700;margin:4px 0;padding:10px;text-align:center}.draw-section{margin:0 auto;max-width:850px;width:75%}.guide-row{flex-direction:row;height:100px;justify-content:center;margin:0 auto 30px;padding:0;width:75%}.guide-row>div{height:100%;max-width:180px;opacity:0;transition:opacity .7s ease-out;width:100%}.guide-row>div h3{font-size:18px;margin:0;text-align:center;text-decoration:underline}.guide-row>div img{height:100%;width:100%}.guide-row>div:nth-of-type(0){transition-delay:.3s}.guide-row>div:first-of-type{transition-delay:.6s}.guide-row>div:nth-of-type(2){transition-delay:.9s}.guide-row>div:nth-of-type(3){transition-delay:1.2s}.guide-row>div:nth-of-type(4){transition-delay:1.5s}.guide-row>div:nth-of-type(5){transition-delay:1.8s}.spacer{display:none}.logoBox{cursor:pointer;left:10px;position:fixed;top:10px;z-index:999}.logoHolder{align-items:center;display:flex;flex-direction:row;flex-wrap:overflow-wrap;height:80px;justify-content:center;position:relative;width:80px}.logoCircle{background:purple;border-radius:50%;box-shadow:0 10px 10px -5px rgba(0,0,0,.05);cursor:pointer;height:80%;margin-left:-4px;position:absolute;width:80%;will-change:width,height}.letter{background:#fff;background-size:contain;border-radius:100px;height:60px;width:60px;will-change:transform,opacity}.bg{height:100%;left:0;opacity:1;position:absolute;top:0;width:100%}.bg,.bg2{background-position:50%;background-size:cover;will-change:opacity}.arrow-btn{background-color:#4295cf;background-position:65% 50%;background-repeat:no-repeat;background-size:40px;border:none;border-radius:35px;cursor:pointer;height:70px;margin:10px;-webkit-transform:scale(1);transform:scale(1);transition:all .3s ease-out;width:70px}.arrow-btn:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.mode-intro .react-sketch-canvas{pointer-events:none}.hide-intro .intro-text{opacity:0}.click-start{-webkit-animation:fadeIn 1s ease 2.5s 1 normal forwards;animation:fadeIn 1s ease 2.5s 1 normal forwards;background-color:#fff;border:1px solid #1e90ff;border-radius:8px;color:#1e90ff;cursor:pointer;margin-top:20px;opacity:0;padding:10px;text-decoration:none}.click-start:hover{color:red}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.sound-button{background-color:hsla(0,0%,100%,.51);border-color:#fff;border-radius:6px;border-width:0;cursor:pointer;height:40px;margin:4px auto;position:absolute;right:10px;top:10px;-webkit-transform:translateY(0);transform:translateY(0);transition:-webkit-transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out,-webkit-transform .2s ease-out;width:40px;z-index:99999}.sound-button svg{height:20px;margin:0 auto;-webkit-transform:translateX(-1px);transform:translateX(-1px);width:20px}.sound-button:hover{background-color:#f0ffcb;-webkit-transform:translateY(1px);transform:translateY(1px)}.mode-background .react-sketch-canvas{pointer-events:none}.mode-background .MenuBar button:first-of-type{background-color:#84ffaa}.mode-background .MenuBar button:first-of-type svg{fill:#31b293}.mode-background .ControlBar{-webkit-transform:translateX(-100px);transform:translateX(-100px)}.mode-background .ControlBar .bkgdBar{-webkit-transform:translateX(90px);transform:translateX(90px)}.mode-background .ControlBar .slider-col{-webkit-transform:translateX(-70px);transform:translateX(-70px)}.mode-drawing .intro-text{display:none;opacity:0}.mode-drawing .react-sketch-canvas{pointer-events:all}.mode-drawing .MenuBar button:nth-of-type(2){background-color:#84ffaa}.mode-drawing .MenuBar button:nth-of-type(2) svg path{stroke:#31b293}.mode-drawing .ControlBar{-webkit-transform:translateX(0);transform:translateX(0)}.mode-drawing .ControlBar .bkgdBar{-webkit-transform:translateX(-10px);transform:translateX(-10px)}.mode-drawing .ControlBar .slider-col{-webkit-transform:translateX(-6px);transform:translateX(-6px)}.reveal-steps .guide-row>div{opacity:1}.mode-snapshot .intro-text{display:none;opacity:0}.mode-snapshot .react-sketch-canvas{pointer-events:all}.mode-snapshot .MenuBar button:nth-of-type(3){background-color:#84ffaa}.mode-snapshot .MenuBar button:nth-of-type(3) svg{fill:#31b293}.mode-snapshot .ControlBar .bkgdBar{-webkit-transform:translateX(-10px);transform:translateX(-10px)}.mode-snapshot .ControlBar .slider-col{-webkit-transform:translateX(-70px);transform:translateX(-70px)}.mode-snapshot .guide-row>div{opacity:1}#popover-over{left:300px;position:absolute;top:50px;z-index:999999}.intro-text{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;left:0;opacity:1;padding:30px;pointer-events:none;position:absolute;top:0;transition:opacity .3s ease-out;width:100%}.intro-text h2{text-align:center}.trails-main div:last-of-type{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}.trails-main div{display:inline-block;font-size:calc(1.325rem + .9vw);margin:0 2px;text-shadow:2px 1px 1px #fff}.MenuBar{align-items:center;border-bottom-right-radius:8px 8px;border-top-right-radius:8px 8px;bottom:-60px;justify-content:center;left:0;padding:10px;pointer-events:none;position:absolute;width:100%;z-index:9999}.MenuBar,.MenuBar .button-row{display:flex;flex-direction:row}.MenuBar button{background-color:#fff;border:2px solid #6adbc0;border-radius:6px;cursor:pointer;height:80px;margin:8px;pointer-events:all;-webkit-transform:translateY(0);transform:translateY(0);transition:background .3s ease-out,-webkit-transform .2s ease-out;transition:background .3s ease-out,transform .2s ease-out;transition:background .3s ease-out,transform .2s ease-out,-webkit-transform .2s ease-out;width:80px}.MenuBar button:hover{background-color:#f0ffcb;-webkit-transform:translateY(2px);transform:translateY(2px)}.MenuBar button svg{height:40px;margin:0 auto;width:40px}.ControlBar{display:flex;flex-direction:row;position:absolute;right:-80px;top:0;-webkit-transform:translateX(-100px);transform:translateX(-100px);transition:all .35s cubic-bezier(.47,1.64,.41,.8);width:80px;z-index:-1}.ControlBar .bkgdBar{left:0;padding:10px 10px 10px 20px;position:absolute;top:0;-webkit-transform:translateX(-10px);transform:translateX(-10px);transition:all .3s cubic-bezier(.47,1.64,.41,.8)}.ControlBar .bkgdBar,.ControlBar .drawBar{background-color:#ffe484;border-bottom-right-radius:8px 8px;border-top-right-radius:8px 8px}.ControlBar .drawBar{padding:10px;-webkit-transform:translateX(0);transform:translateX(0)}.ControlBar .button-col{display:flex;flex-direction:column}.ControlBar .color-holder,.ControlBar .picker{position:relative}.ControlBar .size{color:#fff;left:50%;padding-right:2px;pointer-events:none;position:absolute;text-shadow:1px 1px 1px rgba(0,0,0,.369);top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:20}.ControlBar .slider-col{align-items:center;background-color:#ffc821;border-bottom-right-radius:8px 8px;border-top-right-radius:8px 8px;display:flex;flex-direction:column;padding:10px 8px 10px 14px;-webkit-transform:translateX(-6px);transform:translateX(-6px);transition:all .4s cubic-bezier(.47,1.64,.41,.8);z-index:-1}.ControlBar .slider-col button{border-radius:20px;margin:10px}.ControlBar .slider-col.hide-slider{-webkit-transform:translateX(-100px);transform:translateX(-100px)}.ControlBar button{background-color:#fff;border-color:#fff;border-radius:6px;border-width:0;cursor:pointer;height:40px;margin:4px auto;-webkit-transform:translateY(0);transform:translateY(0);transition:-webkit-transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out,-webkit-transform .2s ease-out;width:40px}.ControlBar button:hover{background-color:#f0ffcb;-webkit-transform:translateY(1px);transform:translateY(1px)}.ControlBar button svg{height:20px;margin:0 auto;width:20px}.book-feature{background-color:#6adcc0;border-radius:6px;margin-top:100px;padding:40px}.book-feature .col-9{align-items:center;display:flex}.book-feature img{margin-top:-80px;width:240px}.book-feature ul{padding:0}.book-feature ul li{list-style-type:none}.book-feature ul li span{margin-right:10px}.book-feature ul li:last-of-type{margin-top:20px}.book-feature ul li:last-of-type a{border-bottom:3px solid #95ffa6;color:#fff;font-weight:700;letter-spacing:.5px;text-decoration:none}.book-feature ul li:last-of-type a:hover{border-bottom:3px solid #fff}@media(max-width:820px){.main-header{flex-direction:column;height:auto;padding:0;width:100%}.star{position:absolute;right:10%;top:220px;z-index:-1}.main-content{flex-direction:column}.guide-row{flex-direction:row;justify-content:center;margin:0 0 30px;padding:0;width:100%}.guide-row .spacer{display:none}.guide-row>div h3{font-size:14px}.draw-section{margin:0 auto;width:75%}.logo{display:none}.guide-row>div{opacity:1}.book-feature{margin-top:100px}.book-feature ul{margin-left:40px}.book-feature img{margin-top:-80px;max-width:240px;-webkit-transform:translateX(-20px);transform:translateX(-20px);width:160%}}@media(max-width:580px){.wpb{width:70%}.p-5{padding:2rem!important}.main-header{flex-direction:column;height:auto;padding:0;width:100%}.star{position:absolute;right:10px;top:220px;z-index:-1}.main-content{flex-direction:column}.guide-row{flex-direction:row;justify-content:center;margin:0 0 40px;padding:0;width:100%}.guide-row .spacer{display:none}.guide-row>div h3{font-size:14px}.draw-section{height:auto;margin-bottom:120px;max-height:400px;padding:0;width:100%}.mode-background .ControlBar{-webkit-transform:translate(0);transform:translate(0)}.mode-background .ControlBar .bkgdBar{-webkit-transform:translate(-50%,10px);transform:translate(-50%,10px)}.mode-background .ControlBar .drawBar{-webkit-transform:translateY(-60px);transform:translateY(-60px)}.mode-background .ControlBar .slider-col{-webkit-transform:translateY(-240px);transform:translateY(-240px)}.mode-drawing .ControlBar{-webkit-transform:translate(0);transform:translate(0)}.mode-drawing .ControlBar .bkgdBar{-webkit-transform:translate(-50%,-60px);transform:translate(-50%,-60px)}.mode-drawing .ControlBar .drawBar{-webkit-transform:translateY(20px);transform:translateY(20px)}.mode-drawing .ControlBar .slider-col{-webkit-transform:translateY(10px);transform:translateY(10px)}.mode-snapshot .ControlBar{-webkit-transform:translate(0);transform:translate(0)}.mode-snapshot .ControlBar .bkgdBar{-webkit-transform:translate(-50%,-60px);transform:translate(-50%,-60px)}.mode-snapshot .ControlBar .drawBar{-webkit-transform:translateY(-60px);transform:translateY(-60px)}.mode-snapshot .ControlBar .slider-col{-webkit-transform:translateY(-240px);transform:translateY(-240px)}.MenuBar{bottom:unset;top:-60px;-webkit-transform:scale(.7);transform:scale(.7)}.ControlBar{border-radius:0;bottom:-125px;flex-direction:column;height:auto;left:0;padding:2px 6px;right:auto;top:auto;-webkit-transform:translateX(0);transform:translateX(0);width:100%}.ControlBar,.ControlBar .bkgdBar{border-bottom-left-radius:8px 8px;border-bottom-right-radius:8px 8px}.ControlBar .bkgdBar{border-top-right-radius:0;left:50%;padding:20px 10px 10px;-webkit-transform:translate(-50%,-60px);transform:translate(-50%,-60px);width:120px}.ControlBar .bkgdBar .button-col{flex-direction:row-reverse}.ControlBar .drawBar{-webkit-transform:translateY(-60px);transform:translateY(-60px);transition:all .3s cubic-bezier(.47,1.64,.41,.8)}.ControlBar .drawBar,.ControlBar .slider-col{border-bottom-left-radius:8px 8px;border-bottom-right-radius:8px 8px;border-top-right-radius:0}.ControlBar .slider-col{flex-direction:row;padding:20px 10px 10px}.ControlBar .slider-col.hide-slider{-webkit-transform:translateY(-140px);transform:translateY(-140px)}.ControlBar .slider-col .color-holder{margin-right:10px}.ControlBar .button-col{flex-direction:row;justify-content:space-evenly;margin:0;padding:0;width:100%}.ControlBar button svg{fill:#000;margin-left:-6px;margin-top:-2px}.book-feature{flex-direction:column;margin-top:180px}.book-feature .col-3,.book-feature .col-9{width:100%}.book-feature .col-3 ul,.book-feature .col-9 ul{margin:0;padding:0;text-align:center}.book-feature img{margin:-80px auto 20px;-webkit-transform:translateX(0);transform:translateX(0)}.book-feature ul{margin:0;padding:0;text-align:center}}
/*# sourceMappingURL=main.89221cdd.css.map*/