.App{min-height:100vh;display:flex;flex-direction:column}.App>header{background:#111;display:flex;flex-direction:row;height:40px;padding:0 .8em;overflow:hidden}.App>header .logo{margin-right:.8em}.App .logo{align-self:center;font-weight:700;padding:0 .2em;font-size:1.6em}.App .logo span:first-child{color:#fff}.App .logo span:last-child{color:#fc6}.App>header>nav{display:flex;flex-direction:row}.App>header>nav>a{padding:.6em;color:#ccc}.App>header>nav>a:hover{color:#fff}.App>header>nav>a.active{background:#444;color:#fff}.App>header>.external{display:flex;flex-direction:row;align-items:center}.App>header>.external>a{padding:.8em;color:#ccc;display:inline-flex;flex-direction:row;align-items:center}@media screen and (max-width:540px){.App>header>.external>a>span{display:none}}@media screen and (max-width:360px){.App>header .logo .full{display:none}}.App>main{background:#333;flex:1 1;display:flex;flex-direction:column}.vignette{position:relative}.vignette .failing{position:absolute;width:100%;height:100%;top:0;left:0;display:flex;text-align:center;flex-direction:column;align-items:center;justify-content:center;padding:10px;background-color:rgba(255,0,0,.5);border:1px solid red;color:#fff}.vignette .failing i{font-size:48px}.vignette .failing p{margin:1em 0 0;font-size:.8em;max-height:70%;overflow:hidden}.vignette canvas{outline:1px solid #000}.vignette.hover canvas{outline-color:#fc6}.vignette .cursor{display:none;position:absolute;top:0;height:100%;width:1px;background:#fc6;pointer-events:none}.vignette.hover .cursor{display:block}.vignette footer{position:absolute;bottom:0;width:100%;left:0;padding:2px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;display:flex;flex-direction:row}.vignette footer .TransitionAuthorAndName{flex:1 1}.TransitionAuthorAndName{display:inline-block;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 .4em}.TransitionAuthorAndName em{font-style:italic;font-weight:lighter;font-size:.8em}.TransitionAuthorAndName em:before{content:"by ";opacity:.6}.gallery .transitions{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;padding:10px 0;margin:0 auto;max-width:1280px}.gallery .transitions>*{margin:10px}.gallery .transitions .vignette footer .dateago{position:absolute;right:4px;bottom:0;font-size:1em;font-style:italic;color:#000}.gallery .vignette .expand{position:absolute;top:0;right:0;padding:4px}.gallery .pager{display:flex;flex-direction:row;align-items:center;justify-content:center}.gallery .pager a{color:#999;font-size:2em;padding:.2em .6em}.gallery .pager a:hover:not(.active){color:#bbb}.gallery .pager a.active{color:#fff;font-weight:700}.glsl-documentation{margin-top:20px}.glsl-documentation p{margin:2px 0}.glsl-documentation .glsl-token-type-name{margin-bottom:2px;overflow:auto}.glsl-documentation .glsl-token-type-name .glsl-token-type{float:right;margin-right:.5em}.glsl-documentation .glsl-token-type-name .glsl-token-name{float:left}.glsl-documentation .glsl-token-type{font-weight:700;text-transform:uppercase;font-size:.5em;background:#000;padding:1px 3px;border-radius:2px}.glsl-documentation .glsl-token-usage{width:100%;box-sizing:border-box;font-size:.8em}.glsl-documentation .glsl-token-description{font-weight:300;font-style:italic;padding:.6em;font-size:.8em;opacity:.7;background:#222}.glsl-editor{width:100%;height:100%;flex:1 1}.glsl-editor .ace_step.error{background:rgba(255,0,0,.3)!important}.glsl-editor .ace_step.warn{background:rgba(255,100,0,.3)!important}.editor-status-bar{width:100%;height:30px;line-height:30px;padding:0 5px;font-size:10px;box-sizing:border-box;overflow:hidden;white-space:nowrap}.editor-status-bar.error{background-color:#c33;color:#fff}.editor-status-bar.warn{background-color:#d73;color:#fff}.editor-status-bar.success{background-color:#3c6;color:#fff}.editor-status-bar.info{background-color:#666;color:#fff}.editor-status-bar.error,.editor-status-bar.info,.editor-status-bar.success,.editor-status-bar.warn{transition:none}.editor-status-bar{background-color:#666;color:#999;transition:.5s}.compilation-stats{display:flex;flex-direction:column;text-align:right;width:100px}.compilation-stats-time{padding:10px 5px}.compilation-stats-time .label{font-size:.8em}.compilation-stats-time .value{font-size:1.4em}.compilation-stats-time .unit{font-size:.6em;vertical-align:baseline}.compilation-stats-time .color-green{color:#6f6}.compilation-stats-time .color-yellow{color:#fe3}.compilation-stats-time .color-red{color:#f55}.texture-picker{vertical-align:middle;position:relative;display:flex;flex-direction:row}.texture-picker .bg-overlay{background-color:rgba(0,0,0,.5);position:fixed;top:0;left:0;width:100%;height:100%;z-index:900}.texture-picker .picker:not(.visible){display:none}.texture-picker .picker:before{content:" ";position:absolute;top:67px;left:-32px;border:16px solid transparent;border-right-color:#fff}.texture-picker .picker{z-index:901;position:absolute;left:calc(100% + 20px);top:-72px;width:200px;height:150px;color:#222;background:#fff;border-radius:4px;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap}.texture-picker .picker .texture{width:44px;height:44px;float:left;border:4px solid transparent;cursor:pointer}.texture-picker .picker .texture.current{border-color:#fc6}.texture-picker .picker .texture:not(.current):hover{border-color:#fec}.texture-picker .picker-input{flex:1 1}.texture-picker .overview{width:20%;margin-left:8px;width:24px;height:24px}.Editor{flex:1 1;flex-direction:column}.Editor,.Editor-body{display:flex;position:relative}.Editor-body{flex-direction:row;flex:1 1;overflow:auto}.Editor .leftpanel{position:relative;z-index:100;width:376px;margin:0 auto;padding-left:10px;padding-right:10px;display:flex;flex-direction:column;align-items:flex-end}.Editor-body .leftpanel .stats{position:absolute;left:4px}.Editor .leftpanel .section{flex:1 1}.Editor .main{flex:1 1;display:flex;flex-direction:column;position:relative;min-width:0}.Editor .editor-action{position:absolute;top:15px;right:8px;z-index:10}.Editor .no-uniforms{margin:0 0 0 100px;text-align:center}.Editor .links{position:absolute;bottom:0;left:0;padding:10px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-around}.Editor .links a{margin:2px 0;display:inline-block;font-size:12px}.Editor .links a i{margin-right:4px}.Editor .tname{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;min-width:256px;margin:.5em 0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.Editor .tname .license{margin-right:20px;opacity:.5;font-weight:lighter;letter-spacing:.1em}.Editor .transition-name{width:230px;height:28px;padding:0 .4em;font-size:inherit;text-align:right;background:transparent;color:#fff;border:1px solid #fff}.Editor .transition-name:focus{outline:none;color:#0f0;border-color:#0f0}.Editor .transition-name.error,.Editor .transition-name.error:focus{color:red;border-color:red}.Editor .transition-name-extension{width:26px;display:inline-block;text-align:right}@media screen and (max-width:540px){.Editor .main .glsl-editor{width:100vw}}a.primary-btn{background:#3c6;color:#000;padding:.5em 1em;border-radius:.4em;white-space:nowrap}a.primary-btn:hover{background:#3e8;color:#000}a.primary-btn.disabled,a.primary-btn.disabled:hover{pointer-events:none;background:transparent;color:#000;opacity:.3;display:none}.Preview{flex:1 1;display:flex;flex-direction:column;align-items:center;justify-content:center}.Preview header{justify-content:space-between}.Preview footer,.Preview header{display:flex;flex-direction:row;width:512px}.Preview footer{padding:1em 0;justify-content:center}.SuggestTransform{z-index:1000;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center}.SuggestTransform header{text-align:center;font-size:1.2em;padding:2em 4em}.SuggestTransform .container{background-color:#333;width:90%;height:80%;margin:auto;display:flex;flex-direction:column}.SuggestTransform .body{flex:1 1;display:flex;flex-direction:row}.SuggestTransform .body>*{flex:1 1;display:flex;flex-direction:column;align-items:center;width:50%;padding:10px}.SuggestTransform .body .GlslCode{flex:1 1;width:100%}.SuggestTransform .button{font-size:1.2em;margin:.6em;padding:.2em 1em;border:none;color:#000;background:#fff}.filename-error{color:red}.Intro{color:#aaa;font-size:1.4em;padding:10vw 0 40vh}.Intro section{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;margin-bottom:80px}.Intro footer,.Intro header{text-align:center}.Intro>header{padding:1em 0}.Intro section:not(.full-width)>*{max-width:512px;box-sizing:content-box;padding:20px 40px}.Intro strong{color:#fff}.Intro .btn{align-self:center;background:#fc6;color:#000;padding:.3em 1em;margin:1em 0;border-radius:.1em}.Intro .btn:hover{background:#fdf6e3;color:#000}.Intro code{background:#222;padding:.2em .4em;white-space:nowrap}.Intro img.full{border:1px solid #000;width:100%}.Intro .vignette footer{pointer-events:all;bottom:-30px;text-align:center;font-size:12px;justify-content:center}.Intro .vignette .TransitionAuthorAndName{max-width:100%}.Intro section.full-width .vignette footer{font-size:20px;bottom:-40px}.Intro a.small{font-size:.6em}.Intro a{color:#ccc}.Intro a:hover{color:#fff}@media screen and (max-width:540px){.Intro{font-size:1em}.Intro header{font-size:1.4em}.Intro section>*{padding:20px 0}.Intro section p{padding:0 20px}}body{margin:0;padding:0;font-family:Catamaran,sans-serif;background:#333;color:#eee;font-size:14px}*{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1{font-size:1.6em}h2,h3,h4,h5,h6{font-size:1.2em}.compilation-stats-time .unit,.compilation-stats-time .value,.editor-status-bar,.glsl-documentation .glsl-token-name,.glsl-editor.ace_editor,.hljs,code{font-family:Monoid,"Monaco","Menlo","Ubuntu Mono","Consolas","source-code-pro",monospace}a{text-decoration:none}a,a:active,a:hover{color:inherit}blockquote{border-left:2px solid #fc6;background:#222;color:#fff;padding:10px}
/*# sourceMappingURL=main.2f3eea9a.chunk.css.map */