#article{ h1, h2, h3, h4, h5, h6 { position: relative; font-weight: 600; outline: none; color: #12183A; cursor: pointer; } h1 { font-size: 32px; font-weight: 900; padding-bottom: 10px; border-bottom: 2px solid #e06c75; a:hover { border-bottom: 0; } } h2 { font-size: 25px; border-left: 3px solid #73b1e0; padding-left: 10px; } h1,h2{ line-height: 40px; margin: 20px 0 15px; } h3 { padding: 24px 0; font-size: 24px; } h4 { font-size: 19px; padding: 15px 0 10px; } h5 { font-size: 18px; padding: 15px 0 10px; } a { position: relative; color: #006aff; text-decoration: none; outline: 0; cursor: pointer; } hr{ margin: 24px 0 32px; height: 4px; border: none; background: #F1F5FB; } code { border-radius: 8px; li { list-style: none; } } img { width: 100%; cursor: pointer; margin: 8px 0 0; text-align: center; border-radius: 10px; outline: none; border: 0; } pre { font-size: .85em; line-height: 1.5em; display: flex; max-width: 1000px; position: relative; &:after { position: absolute; left: 20px; top: 30px; width: 12px; height: 12px; border-radius: 50%; background: #fc625d; -webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; content: ' '; } code { flex: 1; text-align: left; width: fit-content; padding: 40px 20px 20px 20px; margin: 20px 0; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; } } p{ display: block; margin: 4px 0 16px; line-height: 30px; text-align: justify; font-size: 18px; color: #12183A; box-sizing: border-box; } ol { padding: 10px 30px; li { margin-left: 15px; padding: 7px; } } ul { margin: 5px 0; li { list-style: none; margin: 10px 16px; line-height: 30px; &:before { content: "\2022"; color: #006aff; float: left; margin-right: 10px; line-height: 31px; font-size: 18px; font-weight: 500; } } } blockquote { background: #fafafa; border-left: 4px solid #e0e2e5; margin: 15px 0; padding: 2px; p{ margin: 4px 20px; font-weight: 400; color: #898FA0; font-size: 16px; } } p code,ul li code { font-size: 1em; margin: 0 4px; display: inline; padding: 6px 8px; font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; color: #58586C; background: #F1F5FB; border-radius: 3px; } p strong{ font-weight: bold; } table { width: 100%; border-collapse: collapse; border-spacing: 0; line-height: 1.2em; border-radius: 8px; box-shadow: 0 0 2px #d4d4d4; word-wrap: break-word; table-layout: fixed; margin: 20px 0 15px; border: 1px solid rgba(153,169,191,.1); overflow: hidden; td:hover, tr:hover { background: rgba(153,169,191,.1); cursor: pointer; } tr:first-child th:first-child { border-top-left-radius: 3px; } tr:first-child th:last-child { border-top-right-radius: 3px; } tr:last-child td:first-child { border-bottom-left-radius: 3px; } tr:last-child td:last-child { border-bottom-right-radius: 3px; } td{ border-bottom: 1px solid rgba(153,169,191,.1); border-right: 1px solid rgba(153,169,191,.1); } tr:first-child td{ border-top: 1px solid rgba(153,169,191,.1); } tr td:first-child{ border-left: 1px solid rgba(153,169,191,.1); } } thead { text-indent: 1em; tr { height: 3em; &:nth-child(odd) { background: hsla(0,0%,96.5%,.51); } } th { background: rgba(153,169,191,.1); font-weight: 400; font-size: 18px; text-align: left; color: #4c4948; } } tbody{ tr { line-height: 2.5em; } td{ color: #333; font-weight: 400; padding: 0 1em; text-align: left; } } }