body{margin:0}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#000}header{margin:0;height:56px;padding:0 16px 0 24px;background-color:#35495e;color:#fff}.content,.editor{max-height:calc(100vh - 56px)}.center{text-align:center}@supports (grid-area:auto){.site{grid-template-areas:"header" "content"}.content,.site{display:grid;grid-template-rows:auto auto;grid-template-columns:auto}.content{grid-template-areas:"editor" "gridcontainer"}.grid-container{grid-area:gridcontainer}.header{grid-area:header}.content{grid-area:content}.footer{grid-area:footer}@media screen and (min-width:768px){.site{display:grid;grid-template-rows:auto auto;grid-template-columns:auto;grid-template-areas:"header" "content"}.content{display:grid;grid-template-rows:auto;grid-template-columns:20rem auto;grid-template-areas:"editor gridcontainer"}}}.header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.header__a{color:#eee;text-decoration:none;display:block;position:relative;font-size:20px;line-height:1;letter-spacing:.02em;font-weight:400;box-sizing:border-box;padding-top:16px;padding-right:1rem;padding-left:1rem}.right{position:absolute;right:0}h1,h2{font-weight:400}ul{list-style-type:none;padding:0}li{display:inline-block;margin:0 10px}.editor{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.error{color:red}.css-output{white-space:pre-wrap;position:relative;height:40%;overflow-y:auto;border-top:1px solid #000}.inputs{height:60%;overflow-y:auto}.input{border-bottom:1px solid #000;padding:.5rem}.input:last-child{border-bottom:none}.input__button{display:block;padding:.5rem;margin-bottom:.5rem;border:0;border-radius:.2rem;box-shadow:0 .1rem .1rem 0 rgba(0,0,0,.5);color:#000;font-weight:700;cursor:pointer}.input__button--add{background-color:#90ee90;margin-top:.25rem}.input__button--remove{background-color:#f15a7e;display:inline;padding:.25rem}.input__input--size{width:3rem}.button--clipboard{position:absolute;right:.5rem;top:.5rem}.grid-container{position:relative;transition:min-width .1s ease-out,min-height .1s ease-out;padding:.5rem;height:calc(100vh - 56px);box-sizing:border-box}.grid-container .grid-area.placeholder{border:1px dashed #000;background:none;z-index:0;display:block;min-height:1rem;min-width:1rem;transition:none!important}.grid-area{z-index:1;box-sizing:border-box;position:relative}.grid-area.dragging,.grid-area.resizing{opacity:.7}.grid-area:not(.dragging):not(.resizing){transition:top .1s ease-out,left .1s ease-out,width .1s ease-out,height .1s ease-out}.grid-area .resize-handle{position:absolute;right:-5px;bottom:-5px;width:15px;height:15px;cursor:se-resize}.remove-button{position:absolute;right:0;top:0;width:15px;height:15px;font-weight:700;color:#f33;cursor:pointer}.input--rename{width:100%;min-width:5rem;box-sizing:border-box}.img--resize_handle{height:100%;width:100%;position:absolute;left:-5px;top:-5px}.about{height:calc(100vh - 56px);position:relative}.about-content{height:80%}.footer{margin:1rem 0;color:#333;font-size:90%;text-align:center}.footer a{color:#77c;text-decoration:none;transition:color .25s linear}.footer a:hover{color:#c9444d}.div--margintop{margin-top:1rem}.padded{padding:0 1rem}@supports (grid-area:auto){.about{display:grid;grid-template-columns:auto;grid-template-rows:auto 8rem;grid-row-gap:1rem;grid-template-areas:"aboutcontent" "footer"}.about-content{grid-area:aboutcontent}.footer{grid-area:footer}}