.logo{fill:#08ffbd}nav{font-size:40px;font-weight:700;margin-bottom:40px;text-shadow:0px 2px 5px #000;text-align:center}svg{vertical-align:middle;margin-top:-3px}.caveat{font-family:Caveat,cursive;font-size:25px;margin-top:-10px;padding-left:22px;color:#ffd908;opacity:.9;font-weight:400}a,a:visited,a:active{color:#ffd908;text-decoration:none}.github-corner:hover .octo-arm{animation:octocat-wave .56s ease-in-out}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width: 500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave .56s ease-in-out}}header{display:flex;align-items:center;justify-content:space-between}.language-switcher{margin-right:20px}.language-switcher select{background:transparent;color:#08ffbd;padding:4px 30px 5px;border-radius:1000px;border:1px solid #08ffbd;font-size:16px;cursor:pointer;transition:.35s all;appearance:none;-webkit-appearance:none;-moz-appearance:none;text-align:center;text-align-last:center}.language-switcher select:hover{background:#08ffbd;color:#000}.language-switcher select option{color:#000;background:#fff}.main{width:calc(70vw - 50px);height:calc(70vh - 50px);margin:15px 0 0 75px}.gridchild{counter-reset:step}.gridchild div{counter-increment:step;position:relative}.gridchild div:before{position:absolute;content:".div" counter(step);display:block;padding:0 5px;text-align:center;color:#fff}.gridchild div button{position:absolute;right:0;padding:0 5px;margin:0;color:#fff;background-color:transparent;border:none;z-index:99999}#gridcontainer{border:1px solid #08ffbd;width:100%;height:100%;z-index:0;position:relative;background:#131321;background:-moz-linear-gradient(top,#131321 0%,#1f1c2c 100%);background:-webkit-linear-gradient(top,#131321 0%,#1f1c2c 100%);background:linear-gradient(to bottom,#131321,#1f1c2c);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#131321",endColorstr="#1f1c2c",GradientType=0);box-shadow:0 2px 20px #000}.grid{width:100%;height:100%;position:absolute;display:grid;grid-auto-flow:row dense}.grid div[class*=child]:nth-child(1){background:#8a6b0fb3;border:1px solid #ddd}.grid div[class*=child]:nth-child(2){background:#7a8a0fb3;border:1px solid #ddd}.grid div[class*=child]:nth-child(3){background:#4d8a0fb3;border:1px solid #ddd}.grid div[class*=child]:nth-child(4){background:#1f8a0fb3;border:1px solid #ddd}.grid div[class*=child]:nth-child(5){background:#0f8a2eb3;border:1px solid #ddd}.grid div[class*=child]:nth-child(6){background:#0f8a5cb3;border:1px solid #ddd}.grid div[class*=child]:nth-child(7){background:#0f8a8ab3;border:1px solid #ddd}.grid div[class*=child]:nth-child(8){background:#0f5c8ab3;border:1px solid #ddd}.grid div[class*=child]:nth-child(9){background:#0f2e8ab3;border:1px solid #ddd}.grid div[class*=child]:nth-child(10){background:#1f0f8ab3;border:1px solid #ddd}.grid div[class*=child]:nth-child(11){background:#4c0f8ab3;border:1px solid #ddd}.grid div[class*=child]:nth-child(12){background:#7a0f8ab3;border:1px solid #ddd}.grid div[class*=child]:nth-child(13){background:#8a0f6bb3;border:1px solid #ddd}.grid div[class*=child]:nth-child(14){background:#8a0f3db3;border:1px solid #ddd}.grid div[class*=child]:nth-child(15){background:#8a0f0fb3;border:1px solid #ddd}.grid div[class*=child]:nth-child(16){background:#8a3d0fb3;border:1px solid #ddd}.grid div[class*=child]:nth-child(17){background:#8a6b0fb3;border:1px solid #ddd}.grid div[class*=child]:nth-child(18){background:#7a8a0fb3;border:1px solid #ddd}.grid div[class*=child]:nth-child(19){background:#4d8a0fb3;border:1px solid #ddd}.grid div[class*=child]:nth-child(20){background:#1f8a0fb3;border:1px solid #ddd}.grid p{padding:0 10px}.grid div[class*=box]{background-image:url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");border:1px dotted white;transition:.2s all ease;cursor:move;position:relative;z-index:1000;opacity:.5}.rowunits,.colunits{display:grid}.rowunits div,.colunits div{text-align:center;position:relative}.rowunits{margin-left:-70px;float:left;height:100%}.rowunits div{align-self:center}.widthfull{width:100%}@media screen and (max-width: 700px){main{width:calc(80vw - 50px);height:calc(40vh - 50px)}}.errors{position:absolute;bottom:-5px;border-radius:4px;padding:8px 12px;z-index:1;font-weight:700;width:150px;min-height:50px;background:#6d1a39}.unitHint{font-size:16px;margin-top:-10px;padding-left:22px;color:#08ffbd;opacity:.9;font-weight:400}aside{margin:60px;font-size:17px;width:300px}.wat{font-family:Caveat,cursive;font-size:22px;margin-top:18px;color:#a8c9cc;opacity:.9;font-weight:400;cursor:pointer}@media screen and (max-width: 700px){aside{width:80vw;margin:100px 50px}button[type=reset]{margin-left:20px}}.modal-mask{position:fixed;z-index:100;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:grid;grid-template:1fr auto 1fr/1fr auto 1fr;overflow:auto;transition:opacity .25s ease}.modal-wrapper{grid-area:2/2/2/2}.modal-container{position:relative;width:80vw;max-width:700px;padding:0 50px 60px;background-color:#192d38;border-radius:5px;box-shadow:0 2px 20px #000c;transition:all .3s ease;border:1px solid black}@media screen and (max-width: 700px){.modal-container{padding:0 20px 20px;width:calc(100% - 40px)}}.modal-header{font-size:1.5em;text-align:center}.modal-body{margin:20px 0}.modal-button{margin:40px auto;display:table}@media screen and (max-width: 700px){.modal-button{margin:20px auto 0}}.modal-enter,.modal-leave-active{opacity:0}.modal-enter .modal-container,.modal-leave-active .modal-container{transform:scale(.9)}.gridcode{position:relative;background:#131321;background:-moz-linear-gradient(top,#131321 0%,#1f1c2c 100%);background:-webkit-linear-gradient(top,#131321 0%,#1f1c2c 100%);background:linear-gradient(to bottom,#131321,#1f1c2c);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#131321",endColorstr="#1f1c2c",GradientType=0);box-shadow:0 2px 20px #000;padding:15px;border-radius:4px;border:1px solid #08ffbd;font-size:15px;font-family:Roboto Mono,Courier,monospace;max-height:50vh;overflow-y:scroll}.gridcode p{margin:5px}.copycode{position:absolute;right:0;top:0;margin:0;background:#0f8a8ab3;padding:8px 12px;border-radius:0 4px;font-family:Mukta Mahee,Helvetica,Arial,sans-serif;cursor:pointer}.togglehtml{position:absolute;right:5px;bottom:5px;font-family:Mukta Mahee,Helvetica,Arial,sans-serif;cursor:pointer}.child{padding-left:40px}.codegroup{margin-top:30px}.sp{padding-left:20px}.ckey{color:#6af2d7}.cprop{color:#f8a384}.cname{color:#ffea18}.cursive{font-family:Caveat,cursive;font-size:25px;color:#ffd908;font-weight:400}.cursive a,.cursive a:visited,.cursive a:active{color:#fb7826;text-decoration:underline}strong{color:#ffd908}a,a:visited,a:active{color:#08ffbd;text-decoration:none}#app{margin:5vmin 5vmin 0}.container{display:flex}@media screen and (max-width: 700px){.container{flex-direction:column}}*{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{width:100%;height:90vh;padding:0;margin:0;background:#192d38;background:-moz-radial-gradient(center,ellipse cover,#192d38 0%,#211f2f 100%);background:-webkit-radial-gradient(center,ellipse cover,#192d38 0%,#211f2f 100%);background:radial-gradient(ellipse at center,#192d38,#211f2f);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#192d38",endColorstr="#211f2f",GradientType=1);font-family:Mukta Mahee,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#fff;font-weight:300}input,label,button{font-family:Mukta Mahee,Helvetica,Arial,sans-serif}label{padding-right:18px;display:inline-block;width:150px}label .label-extra-info{opacity:.7}input{font-size:17px;background:#211f2f;color:#fff;width:50px;padding:.3ch 5px;max-height:40px;border:1px solid #666}fieldset{border:none;margin:0;padding:5px 0}button{background:transparent;color:#08ffbd;padding:4px 30px 5px;border-radius:1000px;border:1px solid #08ffbd;font-size:16px;margin:20px 0 0;cursor:pointer;transition:.35s all}button:hover{background:#08ffbd;color:#000}[type=reset]{color:#aaa;border:1px solid #aaaaaa}[type=reset]:hover{background:#aaa;color:#000}