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;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.color-wh{color:#fff}.color-cy{color:#61dafb}.color-gr{color:green}.color-ye{color:#ff0}.color-dg{color:#797979}.color-lg{color:#dcdcdc}.color-or{color:orange}.color-re{color:red}body,html{background:linear-gradient(to top left,#041117,#0a242d,#3e546f);color:#fff;font-family:Consolas,monospace;font-size:2em;height:100%;margin:0}.App{align-items:center;box-sizing:border-box;display:flex;flex-direction:column;height:100vh;justify-content:flex-start;padding:0 4vh;position:relative;text-align:center}.App-header{padding-bottom:2vh;padding-top:2vh;width:100%}.logo{margin-bottom:20px;width:250px}.App-header .logo{margin-bottom:0;margin-top:3vh;width:250px}.App-header h3{color:#364558;font-family:Roboto,sans-serif;font-size:1.7vw;font-size:clamp(1.7vw,1.7vw,1.7vw);font-weight:400;margin:0 auto 40px;max-width:85%;overflow:hidden;padding-top:5vh;text-overflow:ellipsis;white-space:nowrap}.code-container{align-items:center;background-color:#000;display:flex;height:10vh;justify-content:center;line-height:.65;margin:10px auto;max-width:1200px;padding:20px;position:relative;transition:all .7s ease-in-out;width:97%}.code-container.demo-active{align-items:flex-start;flex-direction:column;height:40vh;justify-content:flex-start}pre{padding-left:2vh;text-align:center;transition:font-size .5s ease,width .5s ease,text-align .5s ease;white-space:pre-wrap;width:95%}pre.demo-active{margin-top:10px;text-align:left;width:85%}.oneliner{font-family:Consolas,monospace;font-size:1.6vw;font-weight:100;transition:font-size .5s ease,transform .5s ease,text-align .5s ease}.oneliner.demo-active{font-size:clamp(.15em,.9vw,1em);line-height:.6;text-align:left;transform:translateX(-50%);width:90%}.copy-btn{background-color:initial;border:none;color:#61dafb;cursor:pointer;font-size:clamp(2vw,1.8vw,1.8vw);position:absolute;right:50px;top:20px;transition:opacity .5s ease,transform .1s ease,color .1s ease}.copy-btn.copied{animation:copy-animation .6s ease}.copy-btn.fade-out{animation:fade-out .5s forwards}.copy-btn.hidden{display:none}@keyframes copy-animation{0%,to{transform:scale(1)}50%{transform:scale(1.5)}}.copy-btn:hover{color:#b6ecfb}.App-footer{background:#0000;bottom:4vh;box-sizing:border-box;padding:10px 0;position:fixed;text-align:center;width:100%}.demo-btn,.demo-step-btn{background-color:initial;border:none;color:#364558;cursor:pointer;font-size:.65em;font-weight:lighter;transition:transform .3s ease,color .3s ease}.demo-step-btn{color:#0000}.demo-btn.active,.demo-step-btn.active{color:#364558}.demo-btn:hover,.demo-step-btn:hover{color:#61dafb}@media (hover:hover) and (pointer:fine){.demo-btn:hover{color:#b6ecfb}}@media (max-width:768px){.App-header h3{font-size:4vw}.copy-btn{font-size:.3em;padding:0;right:8px}.App-header .logo{width:180px}.oneliner{font-size:clamp(2vw,3vw,3vw)}.code-container{height:8vh;line-height:.5;margin-top:5px;padding:5px}}@media (max-width:480px){.App{padding:2vh}.App-header h3{font-size:5.5vw;max-width:97%}.copy-btn{font-size:.25em}pre{padding-left:.5vh}.oneliner{font-size:3.6vw}.code-container{line-height:.1vh;margin-top:5px;padding:5px}.code-container.demo-active{height:35vh}}
/*# sourceMappingURL=main.3d703b92.css.map*/