/*
fonts initalization
*/
@import url(https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@500&display=swap);
@font-face {
	font-family: "Source Code Pro Regular";
	src: url(./rainbow/SourceCodePro-Regular.ttf);
}
@font-face {
	font-family: "Noto Sans SC Medium";
	src: url(./rainbow/NotoSansSC-Medium.otf);
}

@page {
	size: A4;
	margin: 8mm 0mm;
}

/*
root variables including colors, font-familys and a shadow style
*/
:root {
	--h-border-color: rgb(255, 191, 191);
	--h-bg-color: rgb(255, 232, 232);
	--table-border-color: rgb(255, 235, 211);
	--th-bg-color: rgb(255, 243, 228);
	--tr-bg-color: rgb(255, 249, 242);
	--tr-hover-bg-color: rgb(254, 255, 230);
	--code-bg-color: rgb(247, 247, 247);
	--del-color: rgb(151, 151, 151);
	--selection-bg-color: rgb(235, 227, 255);
	--block-shadow: 0.15rem 0.15rem 0.5rem rgb(150, 150, 150);
	--sans-serif-font: "Noto Sans SC Medium", "Noto Sans SC", sans-serif;
	--monospace-font: "Source Code Pro Regular", "Source Code Pro", monospace;
}

html {
	font-size: 16px;
}


#write {
	font-family: var(--sans-serif-font);
	max-width: 60rem;
	padding-left: 2rem;
	padding-right: 2rem;
}

/*
yaml header settings
*/
#write pre.md-meta-block {
	font-family: var(--monospace-font);
	font-size: 1rem;
	text-align: left;
	padding: 0.6rem;
	color: rgb(134, 134, 134);
	background-color: var(--code-bg-color);
	border-radius: 0.4rem;
}

/*
headers settings
*/
#write h1 {
	font-size: 2.2rem;
	text-align: center;
	text-shadow: 0.15rem 0.15rem 0.3rem rgb(187, 187, 187);
}
#write h2 {
	font-size: 1.8rem;
	margin-top: 1.8rem;
	margin-left: -1.5rem;
	margin-right: -1.5rem;
	background-color: var(--h-bg-color);
	padding-left: 1rem;
	padding-right: 1rem;
	border-left: 0.5rem solid var(--h-border-color);
	border-radius: 0.4rem;
}
#write h3 {
	font-size: 1.6rem;
	text-decoration: underline double var(--h-border-color) 0.15rem;
}
#write h4 {
	text-decoration: underline dotted var(--h-border-color) 0.2rem;
}

/*
tables settings
*/
#write table {
	border-collapse: collapse;
	border: 0.25rem solid var(--table-border-color);
}
#write table th {
	background-color: var(--th-bg-color);
}
#write table th, td {
	text-align: center;
	border: 0.13rem dashed var(--table-border-color);
	padding: 0.5rem;
}
#write table tr:nth-child(even) {
	background-color: var(--tr-bg-color);
}
#write table tr:hover {
	background-color: var(--tr-hover-bg-color);
}

/*
checkboxes settings
*/
#write .task-list-item input[type = "checkbox"] {
	width: 0;
	height: 0;
}
#write .task-list-item input[type = "checkbox"]::before, #write input[type = "checkbox"]:checked::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	position: relative;
	left: -0.15rem;
	top: -0.41rem;
	width: 0.8rem;
	height: 0.8rem;
	border: 0.08rem solid var(--del-color);
	border-radius: 50%;
	transition: all 0.2s;
}
#write .task-list-item input[type = "checkbox"]:checked::before {
	padding: 0.12rem;
	background-clip: content-box;
	background-color: black;
}
#write .task-list-item input[type = "checkbox"]:checked + p {
	text-decoration: line-through;
	color: var(--del-color);
}
#write input[type='checkbox']:hover::before {
	transition: all 0.2s;
	background-color: rgb(228, 228, 228);
}

/*
blockquotes settings
*/
#write blockquote {
	color:rgb(102, 102, 102);
	border-left: 0.25rem solid rgb(169, 202, 255);
	padding: 0.5rem 1rem 0.6rem 1rem;
}
#write blockquote::before {
	display: block;
	height: 2rem;
	width: 1.5rem;
	content: "🌈";
	font-size: 1.2rem;
}

/*
horizontal rules settings
*/
#write hr {
	margin-top: 2rem;
	margin-bottom: 2rem;
	background-color: rgb(226, 226, 226);
	height: 0.13rem;
	border: 0;
}

#write p {
	font-size: 1rem;
	line-height: 1.6rem;
}

/*
code blocks settings
*/
#write .md-fences {
	font-family: var(--monospace-font);
	font-size: 1rem;
	padding: 0.6rem;
	background-color: var(--code-bg-color);
	border-radius: 0.4rem;
	box-shadow: var(--block-shadow);
}
#write .cm-s-inner .CodeMirror-gutters {
	border: none;
}
#write .cm-s-inner .CodeMirror-linenumber {
	color: rgb(212, 212, 212);
}
#write .cm-s-inner .cm-keyword {
	color: rgb(204, 35, 35);
}
#write .cm-s-inner .cm-number {
	color: rgb(27, 57, 226);
}
#write .cm-s-inner .cm-def {
	color: rgb(146, 50, 255);
}
#write .cm-s-inner .cm-operator {
	color: rgb(204, 35, 35);
}
#write .cm-s-inner .cm-variable2 {
	color: rgb(38, 129, 219);
}
#write .cm-s-inner .cm-variable3 {
	color: rgb(204, 35, 35);
}
#write .cm-s-inner .cm-comment {
	color: rgb(18, 129, 18);
}
#write .cm-s-inner .cm-string {
	color: rgb(18, 129, 18);
}
#write .cm-s-inner .cm-builtin {
	color: rgb(218, 135, 12);
}
#write .cm-tag {
	color: rgb(139, 10, 10);
}

/*
formulas settings
*/
#write mjx-container {
	font-size: 1.1rem;
}

/*
tooltips settings
*/
#write .code-tooltip {
	box-shadow: 0.1rem 0.1rem 0.2rem rgb(150, 150, 150);
	border-radius: 0.2rem;
	margin-top: 0.3rem;
}

/*
selected texts in code blocks settings
*/
#write .CodeMirror-selected, #write .CodeMirror-selectedtext, #write .in-text-selection {
	background-color: var(--selection-bg-color) !important;
}

/*
diagrams settings
*/
#write pre[lang=’sequence’], #write pre[lang=’flow’], #write pre[lang=’mermaid’] {
	background-color: var(--code-bg-color);
	border-radius: 0.4rem;
	box-shadow: var(--block-shadow);
}

/*
inline codes settings
*/
#write code {
	font-family: var(--monospace-font);
	margin-left: 0.25rem;
	margin-right: 0.25rem;
	padding: 0.05rem 0.3rem;
	background-color: var(--code-bg-color);
	border-radius: 0.4rem;
	box-shadow: 0.13rem 0.13rem 0.26rem rgb(197, 197, 197);
}

/*
urls settings
*/
#write a {
	color: rgb(31, 117, 255);
}
#write a:hover {
	color: rgb(108, 164, 255);
}

/*
images settings
*/
#write img {
	display: block;
	margin: 0 auto;
	border: 0;
	border-radius: 5px;
	box-shadow: var(--block-shadow);
}

/*
highlights settings
*/
#write mark {
	background-color: rgb(252, 255, 200);
}

/*
deletes settings
*/
#write del {
	color: var(--del-color);
}

/*
selected texts settings
*/
#write ::selection {
	background-color: var(--selection-bg-color);
}