:root {
	--fonts: mononoki, ms pgothic, arial;
}

* {
	box-sizing: border-box;
}

html {
	scrollbar-color: #ca5e2c #f5f2ea;
}

body {
	font-size: 14px;
	font-family: var(--fonts);
	margin: 0;
	text-align: center;
	color: #ca5e2c;
	background-color: #fad97c;
	background-position: center;
}

::selection {
	background: #ca5e2c;
	color: white;
}

hr {
	border: none;
	border-bottom: 2px dashed #ca5e2c;
}

h1 {
	font-weight: normal;
	letter-spacing: 5px;
	font-size: 40px;
	line-height: 60px;
	font-family: bm-neko, var(--fonts);
}

li {
	text-align: left;
	margin-bottom: 10px;
}

code {
	font-family: mononoki, consolas;
	background: black;
	color: white;
	font-size: 14px;
	border: 1px solid #6a5c3e;
	border-radius: 10px;
	padding: 2px 5px;
}

a {
	font-family: var(--fonts);
	color: #634937;
	transition-duration: 0.5s;
}

mark {
	background: #d0ffd5;
}

a:hover {
	border-radius: 5px 5px 0 0;
	background: #fcd7c7;
}

h1,
footer {
	margin: 1%;
}

main {
	margin: auto;
	max-width: 900px;
	padding: 10px;
	overflow: auto;
	border-radius: 20px;
}

main,
footer {
	word-spacing: 9px;
	line-height: 20px;
}

footer p {
	background: #fad97c;
	margin: 1px;
}

.outlink::after {
	content: "↗";
	padding-left: 2px;
	vertical-align: text-bottom;
}

#s-m-t-tooltip {
	background: brown;
	color: white;
	text-align: center;
	z-index: 9999;
	margin: 30px 15px 7px 12px;
	padding: 5px;
	font-size: 18px;
	font-family: gaegu-l;
	max-width: 300px;
	border-radius: 20px;
}