:root {
	--font-size: 1.4rem;
}

/* phone */
body {
	font-size: var(--font-size);
	line-height: 2.6rem;
	margin: 1rem 2rem;
	font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans', Helvetica, Arial,
		sans-serif, 'Apple Color Emoji';
}

/* ipad/desktop */
@media (min-width: 900px) {
	body {
		line-height: 2.6rem;
		margin: 2rem 4rem;
	}
	.indent_1 {
		padding-left: calc(var(--font-size) * 0);
	}

	.indent_2 {
		padding-left: calc(var(--font-size) * 0);
	}

	.indent_3 {
		padding-left: calc(var(--font-size) * 0);
	}
}

/* 先一律讓圖片別放太大，有顯示就好 */
img {
  max-width: 200px;
  max-height: auto;
  width: auto;
  height: auto;
}

a {
  text-decoration: none;
  color: gray;
}

.link {
  color: #205c96;
}


/*.show {
	display: block !important;
}*/

.container {
	border: 1px dashed gray;
	margin: 1rem 0;
}

.switcher {
	cursor: pointer;
	font-weight: 500;
}

.hide {
	display: none;
}

.offset {
	margin-left: 1rem;
}

.small {
	font-size: 1.2rem;
}

/* 極淺灰模擬文字隱藏狀態但開發時又能看到 */
.src_lang,
p.indent_2.src_lang,
.group .src_lang,
.hide2 {
	color: #00000080;
	margin-top: -1em;
/*	display: none;*/
}

.bold {
	font-weight: 800;
}

.snap {
	margin-top: -1.8rem;
	/*	color: dimgray;*/
}

.dim {
	color: dimgray;
}

/*.indent_2.snap {
	margin-top: -0.5rem;
}*/

.btn {
	margin: 0 0.3rem;
	min-width: 30px;
	height: 30px;
}

.nested {
	padding-left: calc(var(--font-size) * 1);
}

.indent_0 {
	/*	padding-left: 0em;*/
}

.indent_1 {
	padding-left: calc(var(--font-size) * 1);
}

.indent_2 {
	padding-left: calc(var(--font-size) * 1.8);
}

.indent_3 {
	padding-left: calc(var(--font-size) * 2.7);
}

.top-buttons {
	position: fixed;
	top: 0;
	right: 9rem;
}

/* temp */

/* Initial highlight state */
.highlight {
  animation: highlightAnimation 3s ease-in-out;
}

/* Keyframe animation to fade the highlight */
@keyframes highlightAnimation {
  0% { background-color: greenyellow; }
  100% { background-color: transparent; }
}

:root {
	--font-size: 1.4rem;
}

/* phone */
body {
	font-size: var(--font-size);
	line-height: 2.6rem;
	margin: 1rem 2rem;
	font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans', Helvetica, Arial,
		sans-serif, 'Apple Color Emoji';
}

/* ipad/desktop */
@media (min-width: 900px) {
	body {
		line-height: 2.6rem;
		margin: 2rem 4rem;
	}
	.indent_1 {
		padding-left: calc(var(--font-size) * 0);
	}

	.indent_2 {
		padding-left: calc(var(--font-size) * 0);
	}

	.indent_3 {
		padding-left: calc(var(--font-size) * 0);
	}
}

/* 先一律讓圖片別放太大，有顯示就好 */
img {
  max-width: 200px;
  max-height: auto;
  width: auto;
  height: auto;
}

/*.show {
	display: block !important;
}*/

.container {
	border: 1px dashed gray;
	margin: 1rem 0;
}

.switcher {
	cursor: pointer;
}

.hide {
	display: none;
}

/* 極淺灰模擬文字隱藏狀態但開發時又能看到 */
.src_lang,
p.indent_2.src_lang,
.group .src_lang,
.hide2 {
	color: #00000080;
	margin-top: -1em;
/*	display: none;*/
}

.bold {
	font-weight: 800;
}

.snap {
	margin-top: -1.8rem;
	/*	color: dimgray;*/
}

.dim {
	color: dimgray;
}

/*.indent_2.snap {
	margin-top: -0.5rem;
}*/

.btn {
	margin: 0 0.3rem;
	min-width: 30px;
	height: 30px;
}

.nested {
	padding-left: calc(var(--font-size) * 1);
}

.indent_0 {
	/*	padding-left: 0em;*/
}

.indent_1 {
	padding-left: calc(var(--font-size) * 1);
}

.indent_2 {
	padding-left: calc(var(--font-size) * 1.8);
}

.indent_3 {
	padding-left: calc(var(--font-size) * 2.7);
}

.top-buttons {
	position: fixed;
	top: 0;
	right: 9rem;
}

/* temp */

/* Initial highlight state */
.highlight {
  animation: highlightAnimation 3s ease-in-out;
}

/* Keyframe animation to fade the highlight */
@keyframes highlightAnimation {
  0% { background-color: greenyellow; }
  100% { background-color: transparent; }
}