@font-face {
	font-family: apple-2;
	src: url("https://docusky.org.tw/DocuSky/fonts/apple/apple-zh-2.eot"),
		 url("https://docusky.org.tw/DocuSky/fonts/apple/apple-zh-2.woff") format("woff"),
		 url("https://docusky.org.tw/DocuSky/fonts/apple/apple-zh-2.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: apple-3;
	src: url("https://docusky.org.tw/DocuSky/fonts/apple/apple-zh-3.eot"),
		 url("https://docusky.org.tw/DocuSky/fonts/apple/apple-zh-3.woff") format("woff"),
		 url("https://docusky.org.tw/DocuSky/fonts/apple/apple-zh-3.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

html {
	font-size: 16px;
}

body {
	font-family: apple-2!important;
	word-break: break-word;
	display: flex;
	height: 100vh;
}

.bold {
	font-family: apple-3;
}

i,
#search i:hover,
#explain i:hover {
	font-size: 1rem!important;
	text-indent: 0;
	cursor: default;
}

#explain i {
	display: inline-block;
}

i:hover {
	font-size: 1.25rem!important;
	cursor: pointer;
}

p {
	margin: 1rem;
	margin-top: 1rem!important;
	text-indent: 2rem;
}

h5, h6 {
	font-family: apple-3!important;
	text-indent: 1rem;
}

/* ----- HEADER ----- */

header {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	height: 3rem;
	display: flex;
	color: var(--color--white);
	background-color: var(--color--gray-darker);
	box-shadow: 0 0 8px var(--color--shadow);
	font-size: 1.5rem;
	text-align: center;
	z-index: 10;
	border-bottom: 1px solid var(--color--gray-light);
}

.header-title {
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header-btn {
	width: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header-btn:hover {
	color: var(--color--gray-darker);
	background-color: var(--color--white);
	cursor: pointer;
}

.header-btn:hover > .tooltip-box {
	display: block;
}

.tooltip-box {
	display: none;
	position: absolute;
	top: 2.625rem;
	width: max-content;
	height: max-content;
	background: var(--color--tooltip);
	border-radius: 0.25rem;
}

.tooltip-text {
	display: grid;
	margin: 0.375rem;
	font-size: 0.875rem;
	color: var(--color--white);
}

.arrow-t {
	position: absolute;
	top: -10px;
	left: 50%;
	width: 0px;
	height: 0px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent var(--color--tooltip) transparent;
	transform: translateX(-50%);
}

.lang-selector {
	position: absolute;
	top: 0;
	margin-top: 3rem;
	width: 6.25rem;
	padding: 0.25rem 0;
	display: flex;
	flex-direction: column;
	text-align: center;
	font-size: 0.875rem;
	background-color: var(--color--gray-darker);
	border: 1px solid var(--color--gray-light);
	border-top: 0;
	border-radius: 0.25rem;
	box-shadow: 0 0 8px var(--color--shadow);
}

.lang-selector.hide {
	display: none;
}

.lang-item {
	padding: 0.25rem 0;
	color: var(--color--white);
}

.lang-item:hover {
	background-color: var(--color--gray-dark);
}

/* ----- EXPLAIN ----- */

#explain .modal-body {
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-gap: 0.5rem;
}

.explain-dir {
	display: flex;
	flex-direction: column;
	border-radius: 0.375rem;
	box-shadow: 0 0 8px var(--color--shadow);
	overflow-y: scroll;
}

.explain-dir-item {
	padding: 0.5rem;
	border-bottom: 1px solid var(--color--gray-lighter);
}

.explain-dir-item:hover {
	background-color: var(--color--blue-lighter);
	cursor: pointer;
}

.explain-content {
	padding: 1rem;
	overflow-y: scroll;
}

.explain-section {
	display: flex;
	flex-direction: column;
	margin-bottom: 4rem;
}

.explain-section >:not(:first-child) {
	margin-top: 3rem;
}

.multi-col {
	display: grid;
	align-items: center;
}

.notice {
	margin: 1rem;
	padding: 1rem 1rem 1rem 40px;
	list-style-type: cambodian;
	background-color: var(--color--gray-lighter);
	border-radius: 5px;
}

.link {
	color: #007BFF;
}

.link:hover {
	color: #0056B3;
	text-decoration: underline;
	cursor: pointer;
}