<!-- Importable CRYMACHINA Theme Theme -->

<!----------------------------------------------------------

This is an CSS theme made by me, Sia, a big fan
of HackMD. Feel free to import this Note by adding an above
line of code into your Note. Of course, without asking!
Just be aware you'll have to follow Creative Commons BY-SA.

By the way, thanks for @hackmd who made a very good guidance
that taught me how to import a Note from another Note.
[HackMD's Guide](https://hackmd.io/s/how-to-embed-note-tw).

---------------------------------------------------------->

<style>
/* fonts only for editor, just for myself. */
.CodeMirror>*{
font-size: 18px !important;
font-family: 'Cascadia Code', monospace !important;
font-weight: 300;
}

/* Universal Setup */
[data-inline-comment-id=user-selection-highlight]{
background: unset !important;
}
[data-inline-comment-id=user-selection-highlight].highlighted{
border: unset !important;
}
*::selection{
background: rgba(88, 237, 217, 0.3) !important;
}
/* Left Panel for Book Mode */
body div.summary{
background: #333 !important;
background-color: #333 !important;
}

/* nav article title */
body div#meta-title-tags{
display: none !important;
}

/* .ui-view-area only work in edit mode. */
:root, html, body, .ui-view-area{
background: #333;
color: #EBD4C4;
}

/* hide the top nav that shows title */
#meta-title-tags{
display: none !important;
}
/* hide Edit button and whole Comment system. */
.ui-edit.btn,
.ui-comment-app{
display: none !important;
}
/* remove right-above button's background. */
.community-button:hover,
.community-button:focus{ background: unset !important; }

/* Link */
a:any-link{ color: #93DFDA; text-decoration: none; }
a:hover{ color: #E6D769; text-decoration: underline hotpink solid 1px; }

/* Header */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6{ border: unset !important; }

.markdown-body h1{ font-size: 36px; color: #209fd3 !important; letter-spacing: 3px; }
.markdown-body h2{ font-size: 30px; color: #38b0e1 !important; letter-spacing: 2px; }
.markdown-body h3{ font-size: 25px; color: #59bde6 !important; letter-spacing: 1px; }
.markdown-body h4{ font-size: 21px; color: #7bcaeb !important; }
.markdown-body h5{ font-size: 18px; color: #9cd7f0 !important; }
.markdown-body h6{ font-size: 16px; color: #bde5f5 !important; }

/* Anchor. octicon-link */
.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{ border: unset !important; }

/* <img>'s background */
.markdown-body img{ background: transparent; }

/* left-side nav */
.ui-toc.dropup{
display: none !important;
}
.ui-toc-dropdown{
overflow-y: overlay !important;
}
.ui-toc-dropdown .nav>li>a:focus,
.ui-toc-dropdown .nav>li>a:hover{ border: unset !important; color: #D79AFC; }

.ui-toc-dropdown .nav>.active>a,
.ui-toc-dropdown .nav>.active:focus>a,
.ui-toc-dropdown .nav>.active:hover>a{ border-left: white solid 2px !important; color: #D79AFC; }

.back-to-top:hover,
.back-to-top:focus,
.go-to-bottom:hover,
.go-to-bottom:focus,
.expand-toggle:hover,
.expand-toggle:focus{ color: #D79AFC; }

/* Alert Section */
.alert-success{ color: #ddd !important; background: rgba(170, 230, 143, 0.4) !important; border: unset !important;}
.alert-info{ color: #ddd !important; background: rgba(103, 183, 223, 0.4) !important; border: unset !important;}
.alert-warning{ color: #ddd !important; background: rgba(227, 212, 141, 0.4) !important; border: unset !important;}
.alert-danger{ color: #ddd !important; background: rgba(248, 173, 173, 0.4) !important; border: unset !important;}

/* Quoted Message Block */
.markdown-body blockquote{
color: #70ACD5 !important;
}
blockquote .small,
blockquote .small::before,
blockquote .small::after,
blockquote footer,
blockquote footer::before,
blockquote .small::after,
blockquote small,
blockquote small::before,
blockquote small::after{
color: #5CA1CC !important;
margin: 6px auto 3px auto !important;
}

/* Code Block */
@supports selector(:has(*)){
pre:has(>code){
color: #ccc !important;
background: #20232f !important;
}
code{
line-height: 1.4 !important;
}

.hljs span[class~="comment"]{ color: #6d7a72 !important; }
.hljs span[class~="constant"]{ color: #eba4ac !important; }
.hljs span[class~="function"]{ color: #ffc85b !important; }
.hljs span[class~="keyword"]{ color: #dcbff2 !important; }
.hljs span[class~="number"]{ color: #ff38a2 !important; }
.hljs span[class~="parameter"]{ color: #9cd162 !important; }
.hljs span[class~="punctuation"]{ color: #d971d3 !important; }
.hljs span[class~="string"]{ color: #fae8b6 !important; }
.hljs span[class~="string-property"]{ color: #fae8b6 !important; }
.hljs span[class~="property"]{ color: unset !important; }
.hljs span[class~="literal-property"]{ color: #ccc !important; }
.hljs span[class~="operator"]{ color: #ccc !important; background: unset !important; }
}

/* Table */
.markdown-body table tr,
.markdown-body table th,
.markdown-body table td{
border: solid 1px #aaa;
background: unset !important; }

/* Promotions in the bottom. #notes-recommendations */
/* Hide those weird bottom-border */
.border-b{ border: unset !important; }
/* Unsetting illegible font color. */
.text-gray-850{ color: unset !important; }

/* left-nav font */
div.summary #summary .nav>li>a{ color: #E0C791 !important; }
div.summary #summary .nav>li>a:hover{ color: #E0B191 !important; }
div.summary #summary .nav>li>a:visited{ color: #91AAE0 !important; }

/* left-nav toolbar */
div.summary{
min-width: 300px !important;
max-width: 30% !important;
/* width: fit-content !important; */
}

div.summary .toolbar{
background: #333 !important;
}
div.summary .toolbar input{
background: #aaa !important;
color: #fff !important;
}

.summary #summary .nav li a{
overflow: unset !important;
word-break: break-word !important;
}
</style>

<style>

table.credit{
margin-bottom: 15px !important;
max-width: fit-content !important;
}
table.credit thead,
table.credit tbody,
table.credit tr,
table.credit th,
table.credit td{
background: unset !important;
border-color: unset !important;
border-style: none !important;
padding: 0.5em;
}

table.credit td:nth-child(1){ text-align: right; }
table.credit td:nth-child(2){ text-align: left; }

</style>