@import url(https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i&display=swap);
.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
/* desert scheme ported from vim to google prettify */
pre.prettyprint { display: block; background-color: #333 }
pre .nocode { background-color: none; color: #000 }
pre .str { color: #ffa0a0 } /* string  - pink */
pre .kwd { color: #f0e68c; font-weight: bold }
pre .com { color: #87ceeb } /* comment - skyblue */
pre .typ { color: #98fb98 } /* type    - lightgreen */
pre .lit { color: #cd5c5c } /* literal - darkred */
pre .pun { color: #fff }    /* punctuation */
pre .pln { color: #fff }    /* plaintext */
pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag    - lightyellow */
pre .atn { color: #bdb76b; font-weight: bold } /* attribute name  - khaki */
pre .atv { color: #ffa0a0 } /* attribute value - pink */
pre .dec { color: #98fb98 } /* decimal         - lightgreen */

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }

@media print {
  pre.prettyprint { background-color: none }
  pre .str, code .str { color: #060 }
  pre .kwd, code .kwd { color: #006; font-weight: bold }
  pre .com, code .com { color: #600; font-style: italic }
  pre .typ, code .typ { color: #404; font-weight: bold }
  pre .lit, code .lit { color: #044 }
  pre .pun, code .pun { color: #440 }
  pre .pln, code .pln { color: #000 }
  pre .tag, code .tag { color: #006; font-weight: bold }
  pre .atn, code .atn { color: #404 }
  pre .atv, code .atv { color: #060 }
}

body,html{font-family:Roboto;height:100%}body{background-color:#333;margin:0;padding:0}header{padding:2em}header .logo{display:block;margin:0 auto;max-width:100%;width:500px}.separator{border-bottom:5px solid rgba(255,255,255,0.1)}h1,h2,h3,h4,h5{color:#fff;font-family:Roboto;font-weight:300;margin:2em 2em 1.5em;text-align:center}.demo{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;padding:1.5em 2em 3em}.demo article{font-size:13px;overflow-x:auto;width:50%;padding:2em}@media screen and (max-width: 768px){.demo article{font-size:11px;width:100%}}.demo .prettyprint{border:none;margin:0;padding:0}.demo.demo-square .demo-wrapper{padding-top:100%}.demo.demo-square-half .demo-wrapper{padding-top:50%}.demo:last-of-type{border-bottom:none}.demo-container{max-width:500px;position:relative;width:100%}.demo-wrapper{width:100%}.demo-wrapper>div{bottom:0;left:0;position:absolute;right:0;top:0}.github-buttons{display:flex;justify-content:center;padding:1em}.github-buttons span{padding:0 0.5em}

#demo1 .demo-wrapper>div{display:flex;flex-shrink:0;flex-wrap:wrap}#demo1 .box{align-items:center;display:flex;box-sizing:border-box;flex-grow:0;flex-shrink:0;font-family:Arial;font-size:10px;justify-content:center;text-align:center;height:10%;width:10%}@media screen and (max-width: 768px){#demo1 .box{font-size:6px}}

#demo2 .demo-wrapper>div{flex-shrink:0}#demo2 .rainbow{align-items:center;border-left:15px solid transparent;border-top:15px solid transparent;border-right:15px solid transparent;border-radius:500px 500px 0 0;box-sizing:border-box;display:flex;height:100%;width:100%}

#demo3 .demo-wrapper>div{display:flex;flex-shrink:0;flex-wrap:wrap}#demo3 .flag{box-sizing:border-box;flex-grow:0;flex-shrink:0;font-size:10px;height:14.2857%;width:14.2857%}

#demo4 .demo-wrapper>div{display:flex;flex-shrink:0;flex-wrap:wrap;margin:0 auto}#demo4 .box{align-items:center;box-sizing:border-box;display:flex;flex-grow:0;flex-shrink:0;font-size:10px;height:16.666666%;justify-content:center;text-align:center;width:16.666666%}@media screen and (max-width: 768px){#demo4 .box{font-size:7px}}

#demo5 .demo-wrapper>div{display:flex;font-size:18px;flex-shrink:0;flex-wrap:wrap;margin:0 auto}#demo5 .box{align-items:center;box-sizing:border-box;color:#333;display:flex;flex-grow:0;flex-shrink:0;justify-content:center;outline:1px solid #333;text-align:center}#demo5 .box.file0{font-size:1em;height:33.33333%;width:33.33333%}#demo5 .box.file1{font-size:.90909em;height:16.66667%;width:16.66667%}#demo5 .box.file2{font-size:.81818em;height:11.11111%;width:11.11111%}#demo5 .box.file3{font-size:.72727em;height:8.33333%;width:8.33333%}#demo5 .box.file4{font-size:.63636em;height:6.66667%;width:6.66667%}#demo5 .box.file5{font-size:.54545em;height:5.55556%;width:5.55556%}#demo5 .box.file6{font-size:.45455em;height:4.7619%;width:4.7619%}#demo5 .box.file7{font-size:.36364em;height:4.16667%;width:4.16667%}#demo5 .box.file8{font-size:.27273em;height:3.7037%;width:3.7037%}#demo5 .box.file9{font-size:.18182em;height:3.33333%;width:3.33333%}#demo5 .box.file10{font-size:.09091em;height:3.0303%;width:3.0303%}#demo5 .box.file11{font-size:0em;height:2.77778%;width:2.77778%}

#demo6 .demo-wrapper>div{align-items:start;display:flex;font-size:18px;flex-shrink:0;flex-wrap:wrap;margin:0 auto}#demo6 .box{height:auto;outline:1px solid #333;position:relative;width:14.2857%}#demo6 .box::after{content:"";display:block;padding-top:100%;width:100%}#demo6 .box::before{content:attr(data-type);display:block;font-size:10px;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%)}#demo6 .box[data-type="shade"]::before{color:white}#demo6 .box[data-type="tint"]::before{color:black}

#demo7 .demo-wrapper>div{display:flex;flex-shrink:0;flex-wrap:wrap}

#demo8 .demo-wrapper>div{display:flex;flex-shrink:0;flex-wrap:wrap}

#demo9 .demo-wrapper>div{display:flex;flex-wrap:wrap}#demo9 .wrapper{width:33.33%}#demo9 .harmony{display:flex;height:25px;justify-content:center}@media screen and (max-width: 768px){#demo9 .harmony{height:15px}}#demo9 .label{color:#FFF;font-size:12px;padding-top:10px;text-align:center}#demo9 .box{height:25px;outline:2px solid #000;width:25px}@media screen and (max-width: 768px){#demo9 .box{height:15px;outline-width:1px;width:15px}}

#demo10 .demo-wrapper>div{display:flex;flex-wrap:wrap}#demo10 .wrapper{width:33.33%}#demo10 .harmony{display:flex;height:25px;justify-content:center}@media screen and (max-width: 768px){#demo10 .harmony{height:15px}}#demo10 .label{color:#FFF;font-size:12px;padding-top:10px;text-align:center}#demo10 .box{height:25px;outline:2px solid #000;width:25px}@media screen and (max-width: 768px){#demo10 .box{height:15px;outline-width:1px;width:15px}}

