*{margin:0;padding:0}body{font-family:"Source Han Sans","San Francisco","PingFang SC","Hiragino Sans GB","Droid Sans Fallback","Microsoft YaHei",sans-serif;transition:background-color .2s;background:#272822}button{padding:0;outline:0;border:none}a{text-decoration:none}a:link{text-decoration:none}a:visited{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none}#header{position:fixed;top:0;left:0;height:50px;right:0;background-color:#008b8b;color:#fff;font-size:20px;line-height:50px;display:inline-block;vertical-align:middle;padding-left:15px;width:100%;overflow:hidden;z-index:0}#header a{color:#fff}div#root{width:60%}.container{margin-top:50px;height:calc(100vh - 50px);display:block;transition:.2s;overflow:hidden;z-index:0}.language,.theme{margin-left:5px}#show-position{float:right;margin-right:50px}span.label{font-size:15px;margin-left:20px}.breakpoints{background:red;background:radial-gradient(circle at 3px 3px,#fff,red);width:10px!important;height:10px!important;left:10px!important;top:3px;border-radius:5px}.breakpoints-fake{background:rgba(255,0,0,.2);width:10px!important;height:10px!important;left:10px!important;top:3px;border-radius:5px}#root{float:left}#right-col{float:right;height:100vh;width:40%;background:#272822;color:#fff;white-space:pre-line;overflow-y:auto}#right-col::-webkit-scrollbar{width:10px;height:5px}#right-col::-webkit-scrollbar-thumb{border-radius:5px;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,.2);background:#424242}#right-col::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,.2);border-radius:0;background:rgba(0,0,0,.1)}#right-col div{padding-top:55px;padding-left:5px;padding-right:5px}button#show-content{position:relative;top:-7px;height:28px;width:100px;margin-left:50px;font-size:18px;color:#fff;text-align:center;background-color:#4caf50;border:none;border-radius:15px;box-shadow:0 8px #999;cursor:pointer;outline:0}button#show-content:hover{background-color:#3e8e41}button#show-content:active{background-color:#3e8e41;box-shadow:0 5px #666;transform:translateY(4px)}#vim-btn{display:inline-block;margin-left:20px}.switch{position:relative;display:inline-block;width:60px;height:28px;margin:0 auto;vertical-align:middle}.switch input{display:none}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:"";height:22px;width:22px;left:4px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#00ced1}input:focus+.slider{box-shadow:0 0 1px #00ced1}input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}#vim-status{position:fixed;bottom:0;left:0;color:#fff;background-color:#272822;opacity:.5;padding:5px}.copy_btn{background:#16a085;color:#fff;opacity:.7;height:28px;width:100px;border-radius:15px;float:right;margin-top:11px;margin-right:10px;font-size:18px}.copy_btn:hover{background:#1abc9c}.input-fill{width:100%;margin:0;font-size:16px;line-height:1;outline:0;padding:8px 16px 6px;border:1px solid transparent;background:#f5f5fa;border-radius:10px;transition:border-color .25s}.input-fill:placeholder-shown::placeholder{color:transparent}.input-fill-box{display:none;position:relative;width:80px;height:28px;margin-left:10px}.input-label{position:absolute;left:14px;top:2px;pointer-events:none;color:#bec1d9;padding:0 2px;transform-origin:0 0;pointer-events:none;transition:all .25s}.input-fill:focus~.input-label,.input-fill:not(:placeholder-shown)~.input-label{transform:scale(.75) translate(0,-5px)}.input-fill:focus{border:2px solid #1d31aa}.clear{position:absolute;top:10px;right:-20px;display:none;transition:all .25s}.input-fill::-ms-clear{display:none}.input-fill:not(:placeholder-shown)+.clear{display:inline}