* { margin: 0; padding: 0; box-sizing: border-box; } 

a { color: inherit; text-decoration: none; } 

body { background: #4a4a4a; color: #fff; font-family: "Lato", sans-serif; display: flex; height: 100vh; } 
body section { padding-top: 40px; padding-bottom: 40px; max-width: 75vw; border-bottom: 1px solid #666; } 

body section + section { } 

aside { width: 320px; padding: 30px 0; border-right: 1px solid #666; overflow: auto; } 
aside::-webkit-scrollbar { display: none; } 

code { background: #333; padding: 3px; margin: 3px; border-radius: 2px; font-size: 12px; } 

aside h2 { height: 40px; padding: 0 30px; margin-bottom: 10px; } 
aside ul { list-style: none; } 
aside ul + ul { margin-top: 40px; } 
aside ul li:hover { color: #baffd1; } 
aside ul li a { display: flex; cursor: pointer; height: 32px; align-items: center; padding: 0 30px; font-size: 14px; } 
aside ul li.list_title a { color: #baffd1; padding-left: 20px; font-size: 16px; } 

.inner { width: 100%; margin: 0 auto; display: flex; flex-direction: column; padding: 0 30px 60px; overflow: auto; } 
.editor { display: flex; width: 100%; max-width: 75vw; min-height: 360px; border-radius: 10px; overflow: hidden; } 
.editor + .editor { margin-top: 24px; } 
.editor pre { flex: 1 0 0; margin: 0; padding: 0; } 
.editor pre + pre { background: #333; } 
.editor .preview { flex: 1 0 0; background: #fff; padding: 20px; color: #000; position: relative;} 

h1.doc_title { font-size: 32px; padding-top: 60px;} 
h2.doc_title { font-size: 24px; margin-bottom: 20px; font-weight: 500; } 

p.doc_desc { font-size: 16px; font-weight: 400; color: #ddd; margin-bottom: 24px; } 

p.doc_desc span { display: block; margin: 10px 0; } 

@media screen and (max-width: 1280px) { aside { display: none; } 
 body section { max-width: 100%; } 
 .editor { flex-direction: column; max-width: 100%; max-height: 100% !important;} 
 code[class*="language-"], pre[class*="language-"] { font-size: 0.75em; } 
 .editor pre { flex: 1 0 auto; } 
 .editor .preview { flex: 1 0 240px; } 
 }