---
description: Use `{%hackmd @Bulupulu/Earth %}` syntax to include this theme.
---

<!--
<span class='title'>h1h1h1h1h1h1h1</span>

[TOC]

---

# h1h1h1h1h1h1

# h1
aaaaaa aaaa aaaaa
## h2h2h2h2h2h2
**bbbbbbbbbbb**

### h3h3h3h3h3h3
*cccccccc* ccccccccc
>asdvf
#### h4h4h4h4h4h4
==dddddd== dddddddd
##### h5h5h5h5h5h5

 void main() {
    // eeeeeee
    // ee
    printf();
 }

| Column 1 | Column 2 | Column 3 |
| -------- | -------- | -------- |
| Text | Text | Text |
| s | s | s |
| s | s | s |

###### h6h6h6h6h6h6h6h6
fffff fffffff fffffff
[NYCU Portal](https://portal.nycu.edu.tw/#/)

-->

<style>
/* Variables */
:root {
/* earth official spec colors */
--earth-background: #ffffff;
/* --earth-background: #dad7cd; */
--earth-current-line: #faedcd;
--earth-foreground: #eddcd2;
--earth-comment: #c4c3d0;
--earth-cyan: #9cafb7;
--earth-green: #9b9b7a;
--earth-orange: #e8ac65;
--earth-pink: #d9ae94;
--earth-purple: #d8b2d1;
--earth-red: #c17c74;
--earth-yellow: #ffcb69;

--earth-background-light: #fff6cc;
--earth-background-dark: #7a6c5d;

/* text */
--text-normal: #422c22;
--text-title: var(--earth-background-dark);
--text-title-h1: var(--earth-background-dark);
--text-title-h2: var(--earth-background-dark);
--text-title-h3: var(--earth-background-dark);
--text-title-h4: var(--earth-background-dark);
--text-title-h5: var(--earth-background-dark);
--text-title-h6: var(--earth-background-dark);
--text-title-bg-light: #cfcfdf;
--text-link: var(--earth-background-dark);
--markup-code: #a3b18a;
--text-mark: #ffe169;
/* other */
--blockquote-border: var(--earth-cyan);

/* table color */
--table-outer-border-color: var(--earth-cyan);
--table-inner-border-color: var(--earth-background-light);
--table-thead-color: var(--earth-background);
--table-thead-bg-color: var(--earth-cyan);
--table-bg-color: var(--earth-background);
--table-bg-darker-color: var(--earth-background);
}

/* Navigation */
.navbar {
background: var(--earth-background);
}

.navbar-default {
box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%);
border-color: var(--earth-background);
}

.navbar-default .navbar-brand {
color: var(--earth-background-dark);
}

.navbar-default .navbar-brand:hover {
color: var(--earth-green);
}

.navbar-default .navbar-nav > li > a {
color: var(--earth-green);
}

.navbar-default .navbar-nav > li > a:hover {
color: var(--earth-background-dark);
transition: color 0.4s ease;
}

.ui-toc-dropdown .nav > li > a {
color: var(--earth-background-dark);
}

.ui-toc-dropdown .nav > li > a:hover {
color: var(--earth-background-light);
transition: color 0.4s ease;
}

.ui-toc-dropdown .nav > .active:focus > a,
.ui-toc-dropdown .nav > .active:hover > a,
.ui-toc-dropdown .nav > .active > a {
color: var(--earth-background-dark);
}

.ui-infobar,
.community-button {
color: var(--earth-background-dark);
}

.community-button:hover {
background: var(--earth-green);
color: var(--earth-background);
}

.ui-comment-app .open-comments {
background: var(--earth-background);
}

.dropdown-menu {
background: var(--earth-background);
}

.ui-notification .notification-menu-item:hover {
background: var(--earth-background);
}

/* Body */
html,
body,
.ui-content {
font-family: 'Open Sans', 'Clear Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 15px;
color: var(--text-normal);
background: var(--earth-background);
line-height: 1.6;
}

/* Buttons */
.btn-default {
border-radius: 10px;
border-color: var(--earth-background-dark);
background: var(--earth-background);
color: var(--earth-background-dark);
}

.btn-default:focus,
.btn-default:hover {
border-color: var(--earth-background-dark);
background: var(--earth-green);
color: var(--earth-background-dark);
transition: background 0.4s ease;
}

.btn-default.active {
border-color: var(--earth-background-dark);
background: var(--earth-green);
color: var(--earth-background-dark);
}

.btn-default.active:focus,
.btn-default.active:hover {
border-color: var(--earth-background-dark);
background: var(--earth-cyan);
transition: background 0.4s ease;
}

.btn-primary {
border-radius: 10px;
border-color: var(--earth-background-dark);
background: var(--earth-cyan);
color: var(--earth-green);
}

.btn-primary:focus,
.btn-primary:hover {
background: var(--earth-cyan);
color: var(--earth-background-light);
transition: color 0.4s ease;

}

/* Title */
.title {
font-size: 30px;
font-weight: bold;
background: linear-gradient(180deg, var(--earth-background) 0%, var(--text-title-bg-light) 160%);
color: var(--text-title);
display: inline-block;
padding: 3px 10px;
border-radius: 15px;
/* -webkit-text-stroke: 1.2px #6f4e37; */
font-weight: bold;
}

/* Headings */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
text-align: left;
padding-bottom: 0em 0em;
border-bottom: none;
}

.markdown-body h1 span,
.markdown-body h2 span,
.markdown-body h3 span,
.markdown-body h4 span,
.markdown-body h5 span,
.markdown-body h6 span{
text-align: left;
padding: 0px 10px;
font-weight: bold;
display: inline-block;
border-radius: 15px;
}

.markdown-body h1 span{
/* background: linear-gradient(180deg, #a7d3a6 0%, #1a4301 100%); */
background: linear-gradient(180deg, var(--earth-background) 0%, var(--text-title-bg-light) 160%);
font-size: 34px;
color: var(--text-title-h1);
/* -webkit-text-stroke: 1.2px #6f4e37; */
}

.markdown-body h2 span{
/* background: linear-gradient(180deg, #a7d3a6 0%, #34623f 100%); */
background: linear-gradient(180deg, var(--earth-background) 0%, var(--text-title-bg-light) 160%);
font-size: 29px;
color: var(--text-title-h2);
/* -webkit-text-stroke: 1.1px #6f4e37; */
}

.markdown-body h3 span{
/* background: linear-gradient(180deg, #a7d3a6 0%, #6c584c 100%); */
background: linear-gradient(180deg, var(--earth-background) 0%, var(--text-title-bg-light) 160%);
font-size: 25px;
color: var(--text-title-h3);
/* -webkit-text-stroke: 1.0px #6f4e37; */
}
.markdown-body h4 span{
/* background: linear-gradient(180deg, #a7d3a6 0%, #6c584c 100%); */
background: linear-gradient(180deg, var(--earth-background) 0%, var(--text-title-bg-light) 160%);
font-size: 21px;
color: var(--text-title-h4);
/* -webkit-text-stroke: 0.8px #6f4e37; */
}
.markdown-body h5 span{
/* background: linear-gradient(180deg, #a7d3a6 0%, #6c584c 100%); */
background: linear-gradient(180deg, var(--earth-background) 0%, var(--text-title-bg-light) 160%);
font-size: 19px;
color: var(--text-title-h5);
/* -webkit-text-stroke: 0.7px #6f4e37; */
}

.markdown-body h6 span{
/* background: linear-gradient(180deg, #a7d3a6 0%, #6c584c 100%); */
background: linear-gradient(180deg, var(--earth-background) 0%, var(--text-title-bg-light) 160%);
font-size: 17px;
color: var(--text-title-h6);
/* -webkit-text-stroke: 0.6px #6f4e37; */
}

.markdown-body h1 .octicon-link,
.markdown-body h2 .octicon-link,
.markdown-body h3 .octicon-link,
.markdown-body h4 .octicon-link,
.markdown-body h5 .octicon-link,
.markdown-body h6 .octicon-link {
display: none;
}

/* List */
.markdown-body ul,
.markdown-body ol {
padding-left: 30px;
}

/* Hyperlinks */
a,
.markdown-body a,
.open-files-container li.selected a {
color: var(--text-link);
text-decoration: none;
}

a:hover,
.open-files-container li.selected a:hover {
text-decoration: underline;
color: var(--earth-cyan);
transition: color 0.4s ease;
}

/* Blockquote Area */
.markdown-body blockquote {
color: var(--text-normal) !important;
font-style: italic;
border-color: var(--blockquote-border) !important;
border-left: 5px solid #6c584c;
}

.markdown-body blockquote p {
display: inline;
}

/* Tables */
.markdown-body table {
display: table;
text-align: left;
border-collapse: collapse;
margin: 0;
padding: 6px 13px;
}

.markdown-body table thead tr {
background-color: var(--table-thead-bg-color);
border-top: 3px dashed var(--table-outer-border-color);
color: var(--table-thead-color);
}

.markdown-bodytable tr th {
font-weight: bold;
border-left: 0.1em solid var(--table-inner-border-color);
border-right: 0.1em solid var(--table-inner-border-color);
text-align: left;
margin: 0;
padding: 6px 13px;
}

.markdown-body table tbody tr {
border-top: 0.1em solid var(--table-inner-border-color);
margin: 0;
padding: 0;
}

.markdown-body table tbody tr:nth-child(2n) {
background-color: var(--table-bg-darker-color);
}

.markdown-body table tbody tr:nth-child(2n + 1) {
background-color: var(--table-bg-color);
}

.markdown-body table tr td {
border-left: 0.1em solid var(--table-inner-border-color);
border-right: 0.1em solid var(--table-inner-border-color);
text-align: left;
margin: 0;
padding: 6px 13px;
}

.markdown-body table tr th:first-child,
.markdown-body table tr td:first-child {
/* border-left-width: 0px; */
border-left: 3px dashed var(--table-outer-border-color);
}

.markdown-body table tr th:last-child,
.markdown-body table tr td:last-child {
/* border-right-width: 0px; */
border-right: 3px dashed var(--table-outer-border-color);
}

.markdown-body table tr:last-child {
border-bottom: 3px dashed var(--table-outer-border-color);
}

/* Image */
.markdown-body img {
background-color: transparent;
}

.ui-toc-dropdown .nav>.active:focus>a, .ui-toc-dropdown .nav>.active:hover>a, .ui-toc-dropdown .nav>.active>a {
color: #6c584c;
border-left: 2px solid #6c584c;
}

/* Codeblock */
.markdown-body code {
/* border: 1px solid #525660; */
border-radius: 8px;
color: var(--markup-code) !important;
background-color: #495057;
bottom: -0.1px;
}
span.token.operator {
/* border: 1px solid #525660; */
border-radius: 8px;
/* color: red !important; */
/* color: var(--markup-code) !important; */
background-color: #343a40;
bottom: -0.1px;
}
#doc > pre{
/* border: 1px solid #525660; */
border-radius: 8px;
color: var(--markup-code) !important;
background-color: #343a40;
/* background-color: var(--earth-background-dark); */
bottom: -0.1px;
}

/* horizontal divider */
.markdown-body hr {
height: 1px;
background-color: var(--text-normal);
border: 0px;
}

/* Details */
.markdown-body details {
padding: 5px 10px;
border: 3px dashed var(--earth-cyan);
border-radius: 1px;

/* background-color: var(--earth-background-light); */
}

.markdown-body summary {
color: var(--text-normal);
font-weight: bold;
cursor: pointer;
padding: 4px;
}

/* TOC */
.expand-toggle:hover,
.expand-toggle:focus,
.back-to-top:hover,
.back-to-top:focus,
.go-to-bottom:hover,
.go-to-bottom:focus {
color: var(--text-normal);
}

.ui-toc-dropdown {
background-color: var(--earth-background);
}

.ui-toc-label.btn {
background-color: var(--text-normal);
color: var(--earth-background);
}

.ui-toc-dropdown .nav>li>a:focus,
.ui-toc-dropdown .nav>li>a:hover {
color: var(--text-normal);
border-left: 4px solid var(--text-normal);
}

/* Mark */
.markdown-body mark {
background: linear-gradient(180deg, var(--earth-background) 0%, var(--text-mark) 100%);
border-radius: 9px;
/* margin: 5px; */
}

.markdown-body strong {
/* background: linear-gradient(180deg, var(--earth-background) 0%, var(--earth-background-light) 100%); */
border-radius: 9px;
/* margin: 2px; */
font-weight: bold;
color: #023e8a;
/* padding: 0.0em 0.4em */
}

.markdown-body em {
/* background: linear-gradient(180deg, var(--earth-background) 0%, var(--earth-background-light) 100%); */
border-radius: 9px;
/* margin: 2px; */
font-style: italic;
/* color: var(--earth-cyan); */
color: #023e8a;
/* padding: 0.0em 0.4em */
}
</style>