@media (prefers-color-scheme: dark) {
	body {
		color: #aaaaaa;
		background-color: #000000;
	}
	main {
		font-weight: 300;
	}
	div.header {
		background-color: #00aaaa;
	}
	a {
		color: #ffff55;
	}
	a:visited {
		color: #55ffff;
	}
	#my-svg .node rect, #my-svg .node circle, #my-svg .node ellipse, #my-svg .node polygon, #my-svg .node path {
		fill: #555555 !important;
		stroke: #aaaaaa !important;
	}
	#my-svg .label text, #my-svg span {
		fill: #ffffff !important;
		color: #ffffff !important;
	}
	.header > div > #search  form > input,
	.header > div > #search  form > button {
		color: #ffffff;
		background-color: #005555;
	}
}

@media screen {
	main {
		font-size: 16pt;
	}
	header, main, .header > div {
		width: 100vw;
		max-width: 1200px;
		display: block;
		margin: auto;
		box-sizing: border-box;
	}
}

@media print {
	main {
		font-size: 11pt;
	}
	.header {
		display: none;
	}
}

@media screen and (max-width: 768px) {
	main {
		font-size: 14pt;
		padding-left: 10px;
		padding-right: 10px;
	}
	body {
		max-width: 100vw;
		box-sizing: border-box;
	}
	header, main, .header > div {
		padding-left: 10px;
		padding-right: 10px;
	}
	body main svg {
		max-width: 100% !important;
	}
}

body {
	font-family: 'Noto Sans KR';
	font-size: 1rem;
	padding: 0;
	margin: 0;
}

.header {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	background-color: #aaaaaa;
	color: #000000;
}

.header > div {
	display: flex;
}

.header > div > a {
	flex-grow: 1;
}

.header > div > #search {
	position: relative;
	flex-basis: 200px;
}

.header > div > #search form {
	position: absolute;
	right:10px;
}

.header > div > #search  form:before {
	top: 5px;
	background-color: #aaaaaa;
}

.header > div > #search  form > input {
	height: auto;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-right: 33px;
	outline: none;
	border: none;
}

.header > div > #search  form > button {
	padding: 0;
	height: auto;
}

.header > div > #search  form > div {
	background-color: #aaaaaa;
	padding: 10px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.header a {
	text-decoration: none;
	color: inherit;
}

header:not(:empty) {
	border-bottom: 1px solid;
	display: flex;
	align-items: end;
	padding-bottom: 0.2rem;
	padding-top: 0.5rem;
}

header .title  {
	font-size: 1.5rem;
	flex-grow: 1;
}

main {
	font-family: 'Noto Serif KR';
}

main svg {
	display: block;
	margin: auto;
	max-width: 50% !important;
	max-height: 50% !important;
	background-color: transparent !important;
}
main svg .edgePaths *, main svg marker path {
	stroke: currentColor !important;
	fill: currentColor !important;
}

main > p {
	text-indent: 0.5rem;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Noto Sans KR';
}