body {line-height: 1.8; font-family: 'ZCOOL QingKe HuangYou', cursive; display: flex; flex-direction: row;}
#navbar {position: fixed !important; top: 50px; left: 25px; z-index: 1; overflow: auto;}
#main-doc {text-align: justify; margin: 42px 100px 5px 260px; border-left: 10px solid black; padding-left: 10px; color: #666633}
header {font-size: 25px; font-weight: bolder; color: #cc3300}
a {text-decoration: none; cursor: pointer; color: #cc3300}
.code {display:block; text-align: left; white-space: pre; word-break: normal; word-wrap: normal; line-height: 2; background-color:#f7f7f7; color: #ff0000; padding:15px; margin:10px; border-radius:5px;}
.min-code {background-color:#f7f7f7; color: #ff0000;}
li {list-style: none;}
hr {background: #ff0000;}
.nav-link {border-bottom: 1px solid black; padding-bottom: 10px; border-bottom-width:3px;}
.social {font-size: 40px}
@media (max-width: 1000px) {
body {display: grid; grid-row: auto;}
.code {margin-left:; max-width: 100%; font-size: 12px;}
#navbar {position: absolute; top: 0; padding:0; margin: 0; max-width:100%; border:none; z-index:1; font-size: 0px;}
#main-head{font-size: 0px}
#main-doc {margin: 0 0 0 0; border-left: none; display: flex; flex-direction: column;}
.social {font-size: 0px}
}
@media (max-width: 800px) {.code {display:block; text-align: left; white-space: normal; word-break: normal; word-wrap: break-word;}  }