mystyles.css

@import url('https://fonts.googleapis.com/css?family=Merriweather:400,400i,700,700i&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&subset=latin-ext');

html {
    font-size: 100%;
}

html,
body {
    margin: auto;
    background: #fff;
}

body {
    line-height: 1.555;
    text-align: justify;
    padding: 2em;
    font-size: 1.2rem;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-feature-settings: "liga" on;
}

#write {
    max-width: 960px;
    margin: 0 auto;
    margin-bottom: 2em;
    line-height: 1.53;
}

#write>h2:first-child,
#write>h3:first-child,
#write>h4:first-child,
#write>p:first-child {
    margin-top: 1.2em;
}


/*
============================================
                Typography
============================================
*/

body,
p {
    font-family: 'Montserrat', 'Merriweather', 'Open Sans', sans-serif !important;
    line-height: 1.58;
    letter-spacing: -0.003em;
    color: rgba(0, 0, 0, .8);
}

a,
a:link,
a:visited,
a:active {
    color: #0b2641;
    text-decoration: none;
    text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff;
    box-shadow: inset 0 -1px 0 0 #fff, inset 0 -2px 0 0 #404247;
}

a:hover {
    text-decoration: none;
}

h2,
h3,
h4,
h5,
h6 {
    font-family: 'Merriweather', 'Open Sans', sans-serif;
    font-weight: 700 !important;
    font-style: bold;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-align: left;
    background-color: #fff;
}

p {
    margin-bottom: 1.3em;
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    line-height: 20px;
    color: #404247;
    overflow: visible;
}



h1,
h2,
h3,
h4 {
    margin: 1.414em 0 0.5em;
    font-weight: inherit;
    line-height: 1.2;


}

h1 {
    margin-top: 0;
    font-size: 34px;
    line-height: 40px;
    color: #101010;
    margin-top: 21px;
    font-family: 'Merriweather', 'Open Sans', sans-serif;
    font-weight: 700 !important;
    font-style: bold;
    letter-spacing: -0.02em;
    text-align: center;
}

h1:first-child {
    margin-top: 80px;
}

h2 {
    font-size: 28px;
    line-height: 33px;
    color: #202123;
    border-bottom: 1px solid #eee;
}

h2:first-child {
    margin-top: 40px;
}

h3 {
    font-size: 20px;
    line-height: 25px;
    color: #202123;
	border-bottom: 1px solid #eee;
}

h4 {
    font-size: 16px;
    line-height: 21px;
    color: #000000;
    border-bottom: 1px solid #eee;
}

h5,
h6 {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 19px;
    color: #000000;
    font-weight: 400;
	background-color: #fff;
    border-bottom: 1px solid #eee;
}

small,
.font_small {
    font-size: 0.707em;
}

p,
.mathjax-block {
    margin-top: 0;
    -webkit-hypens: auto;
    -moz-hypens: auto;
    hyphens: auto;
}

ul {
    list-style: none;
    padding-left: 1.2em;
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
}

ul>li:before {
    font-size: 12px;
    padding-right: 15px;
    content: "•";
    position: absolute;
    display: inline-block;
    box-sizing: border-box;
    width: 58px;
    margin-left: -58px;
    text-align: right;
}

ol {
    padding-left: 1.2em;
}

blockquote {
    background-color: #eee;
    margin-left: 1em;
    padding-left: 1em;
    border-top: 2px solid #aaa;
    border-left: 2px solid #aaa;
    border-right: 2px solid #aaa;
    border-bottom: 2px solid #aaa;
    font-style: normal;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 400;
    font-style: normal;
    font-size: 21px;
}

blockquote p {
    font-style: normal;
    margin-bottom: 0;
}

code,
pre {
    font-family: 'Source Code Pro', "Consolas", "Menlo", "Monaco", monospace, serif;
    font-size: .9em;
    background: #DADADA;
}

pre.md-fences {
    margin-left: 1em;
    padding-left: 1em;
    border: 1px solid #ddd;
    padding-bottom: 8px;
    padding-top: 6px;
    margin-bottom: 1.5em;
}

a {
    color: #0b2641;
    font-family: 'Merriweather', 'Open Sans', sans-serif;
    text-decoration: none;
}

a img {
    border: none;
}

h1 a,
h1 a:hover {
    color: #333;
    text-decoration: none;
}

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

table {
    margin-bottom: 1.333333rem;
}

table th,
table td {
    padding: 8px;
    line-height: 1.333333rem;
    vertical-align: top;
    border-top: 1px solid #ddd;
    font-family: 'Source Code Pro', "Consolas", "Menlo", "Monaco", monospace, serif;
    font-size: .6em;
}

table th {
    font-weight: normal;
	background-color: #ddd;
}

table thead th {
    vertical-align: bottom;
}

table caption+thead tr:first-child th,
table caption+thead tr:first-child td,
table colgroup+thead tr:first-child th,
table colgroup+thead tr:first-child td,
table thead:first-child tr:first-child th,
table thead:first-child tr:first-child td {
    border-top: 0;
}

table tbody+tbody {
    border-top: 2px solid #ddd;
}

table th, table td {
  border: 1px solid #ccc;
  padding: 6px 13px;

}

table tr {
  border-top: 1px solid #ccc;
  background-color: #fff;
}

table tr:nth-child(2n) {
  background-color: #ddd;
}

.task-list {
    padding: 0;
}

.task-list-item {
    padding-left: 1.6rem;
}

.task-list-done {
    text-decoration: line-through;
}

/*.task-list-item input:before {
    font-family: 'Merriweather', 'Open Sans', sans-serif;
    content: '\221A';
    display: inline-block;
    width: 1.33333333rem;
    height: 1.8rem;
    vertical-align: middle;
    text-align: center;
    color: #B7B5B5;
    background-color: #fefefe;
}*/

.task-list-item input:checked:before,
.task-list-item input[checked]:before {
    color: inherit;
}

.md-tag {
    color: inherit;
    font: inherit;
}

#write pre.md-meta-block {
    min-height: 35px;
    padding: 0.5em 1em;
}

#write pre.md-meta-block {
    white-space: pre;
    background: #f8f8f8;
    border: 0px;
    color: #999;
    border-left: 1000px #f8f8f8 solid;
    margin-left: -1000px;
    border-right: 1000px #f8f8f8 solid;
    margin-right: -1000px;
    margin-bottom: 2em;
    margin-top: -1.3333333333333rem;
    padding-top: 26px;
    padding-bottom: 10px;
    line-height: 1.8em;
    font-size: 0.9em;
    font-size: 0.76em;
    padding-left: 0;
}

.md-img-error.md-image>.md-meta {
    vertical-align: bottom;
}

#write>h5.md-focus:before {
    top: 2px;
}

.md-toc {
    margin-top: 20px;
    background-color: #fff;
}

.md-toc-content {
    padding-bottom: 10px;
    background-color: #fff;
}

.outline-expander:before {
    color: inherit;
    font-size: 14px;
    top: auto;
    content: "\f0da";
    font-family: FontAwesome;
}

.outline-expander:hover:before,
.outline-item-open>.outline-item>.outline-expander:before {
    content: "\f0d7";
}


/*
============================================
            Code Block Style
============================================
*/

.cm-s-inner {
    background-color: #F5F5F5;
    color: RGB(77, 77, 76);
}

.cm-s-inner .CodeMirror-gutters {
    background: #E3E3E3;
    color: rgb(83, 127, 126);
    border: none;
}

.cm-s-inner .CodeMirror-guttermarker,
.cm-s-inner .CodeMirror-guttermarker-subtle,
.cm-s-inner .CodeMirror-linenumber {
    color: RGB(77, 77, 76);
}

.cm-s-inner .CodeMirror-cursor {
    border-left: 1px solid #f8f8f0;
}

.cm-s-inner div.CodeMirror-selected {
    background: RGBA(255, 255, 255, 0.15);
}

.cm-s-inner.CodeMirror-focused div.CodeMirror-selected {
    background: RGBA(255, 255, 255, 0.10);
}

.cm-s-inner .CodeMirror-line::selection,
.cm-s-inner .CodeMirror-line>span::selection,
.cm-s-inner .CodeMirror-line>span>span::selection {
    background: RGBA(255, 255, 255, 0.10);
}

.cm-s-inner .CodeMirror-line::-moz-selection,
.cm-s-inner .CodeMirror-line>span::-moz-selection,
.cm-s-inner .CodeMirror-line>span>span::-moz-selection {
    background: RGBA(255, 255, 255, 0.10);
}

.cm-s-inner .CodeMirror-activeline-background {
    background: RGBA(0, 0, 0, 0);
}

.cm-s-inner .cm-keyword {
    color: RGBA(147, 113, 185, 1.00);
}

.cm-s-inner .cm-operator {
    color: RGB(77, 77, 76, 1);
}

.cm-s-inner .cm-variable-2 {
    color: #3CA298;
}

.cm-s-inner .cm-variable-3 {
    color: #111316;
}

.cm-s-inner .cm-builtin {
    color: #38ADD7;
}

.cm-s-inner .cm-atom {
    color: #F77669;
}

.cm-s-inner .cm-number {
    color: #D84F42;
}

.cm-s-inner .cm-def {
    color: RGBA(77, 77, 76, 1);
}

.cm-s-inner .cm-string {
    color: #729036;
}

.cm-s-inner .cm-string-2 {
    color: #4FA9A1;
}

.cm-s-inner .cm-comment {
    color: #546E7A;
}

.cm-s-inner .cm-variable {
    color: #4D81D7;
}

.cm-s-inner .cm-tag {
    color: #80CBC4;
}

.cm-s-inner .cm-meta {
    color: #3DABA2;
}

.cm-s-inner .cm-attribute {
    color: #E0A331;
}

.cm-s-inner .cm-property {
    color: #43C0A3;
}

.cm-s-inner .cm-qualifier {
    color: #DECB6B;
}

.cm-s-inner .cm-variable-3 {
    color: #DECB6B;
}

.cm-s-inner .cm-tag {
    color: RGBA(236, 106, 125, 1.00);
}

.cm-s-inner .cm-error {
    color: RGBA(255, 255, 255, 1.0);
    background-color: #EC5F67;
}

.cm-s-inner .CodeMirror-matchingbracket {
    text-decoration: underline;
    color: white !important;
}


/**apply to code fences with plain text**/

.md-fences {
    background-color: #fff;
    color: RGBA(233, 237, 237, 1);
    border: none !important;
}

.md-fences .code-tooltip {
    background-color: #263238;
}




/**Now when exporting, a new page will be created before each h1 element, except the first one.**/
@media print {
  h1 {
    page-break-before: always;
  }
  h1:first-of-type {
    page-break-before: avoid;
  }
}

@media print {
  h2 {
    page-break-before: always;
  }
  h2:first-of-type {
    page-break-before: avoid;
  }
}

<style>.page-break { page-break-after: always; }</style>

/** override the default style for focused headings */
#write>h3.md-focus:before, #write>h4.md-focus:before, #write>h5.md-focus:before, #write>h6.md-focus:before, h3.md-focus:before, h4.md-focus:before, h5.md-focus:before, h6.md-focus:before {
    color: inherit;
    border: inherit;
    border-radius: inherit;
    position: inherit;
    left: initial;
    float: none;
    top: initial;
    font-size: inherit;
    padding-left: inherit;
    padding-right: inherit;
    vertical-align: inherit;
    font-weight: inherit;
    line-height: inherit;
}


.task-list-done {
    // styles for completed tasks
    text-decoration: line-through;
}
.task-list-not-done {
    // styles for incomplete tasks
}