@font-face {
	font-family: Gentium;
	src: url(../fonts/Gentium-Regular-Py.woff2);
	font-display: swap;
}

@font-face {
	font-family: Gentium;
	font-style: italic;
	src: url(../fonts/Gentium-Italic-Py.woff2);
	font-display: swap;
}

@font-face {
	font-family: Gentium;
	font-weight: bold;
	src: url(../fonts/Gentium-Bold-Py.woff2);
	font-display: swap;
}

@font-face {
	font-family: Gentium;
	font-style: italic;
	font-weight: bold;
	src: url(../fonts/Gentium-BoldItalic-Py.woff2);
	font-display: swap;
}

:root[data-applied-mode="lightMode"] {
	color-scheme: light;
	--text-colour: #444;
	--bg-colour: hsl(48, 77%, 95%);
	--plusinfo-bg-colour: hsl(52, 55%, 87%);
	--mt-colour: hsl(242, 100%, 72%);
	--lit-colour: hsl(242, 100%, 84%);
	--trad-colour: hsl(0, 0%, 61.8%);
	--box-shadow-setting: 0 3px 6px hsla(0, 0%, 0%, 0.382);
	--notpr-bg-colour: hsl(46, 30%, 86%);
	--nonpl-bg-colour: hsl(50, 85%, 88%);
}

:root[data-applied-mode="darkMode"] {
	color-scheme: dark;
	--text-colour: #555;
	--bg-colour: black;
	--plusinfo-bg-colour: hsl(0, 0%, 10%);
	--mt-colour: hsl(255, 100%, 56%);
	--lit-colour: hsl(255, 100%, 68%);
	--trad-colour: hsl(0, 0%, 24%);
	--box-shadow-setting: 0 3px 15px hsla(0, 0%, 33%, 0.618);
	--notpr-bg-colour: #1E1E1E;
	--nonpl-bg-colour: hsl(50, 90%, 6%);
}

body {
	font-size: 1.236em;
/*	line-height: 1.618em;*/
	line-height: 1.5em;
	font-family: Gentium, Georgia, "Helvetica Neue", Helvetica, Arial, sans-serif;
	/*margin: 1em;*/
	margin: 1.618em auto;
	color: var(--text-colour);
	/*background-color: #E8E8E8;*/
	background-color: var(--bg-colour);
	text-wrap: pretty
}

a:link {
	color: blue;
	}
a:visited {
	/*color: #55198b;*/
	color: hsl(270, 100%, 50%);
	}
a:hover {
	color: #ABA000;
	}
a:active {
	color: #009900;
	}

a {
	text-decoration: none;
}

h1 {
	line-height: 1.4em;
	margin-left: 1.618em;
	text-indent: -1.618em;
}

h2, h3, h4 {
	line-height: 1.618em;
	margin-left: 1.618em;
	text-indent: -1.618em;
}

h4 {
	margin-top: 2em
}

table {
	margin-bottom: 1em;
}

li {
	margin-top: 1em;
	margin-bottom: 1em;
}

header, footer, nav {
	margin-left: auto;
	margin-right: auto;
/*	width: 30em;*/
	text-align: center;
}

hr {
	border-top: 1px solid var(--text-colour);
}

.contentbody h2, .contentbody h3 {
	/*text-align: center;*/
	margin-top: 1.618em;
}

/*.contentbody h4 {
	text-align: center;
}*/

.toshow, .tohide {
	display: none;
	color: blue;
}

.vDisplayNone {
	display: none
}

.vDisplayInline {
	display: inline
}

.fade-enter-active, .fade-leave-active {
	transition: opacity .5s
}

.fade-enter, .fade-leave-to {
	opacity: 0
}

.switch {
	color: blue;
}

.plusinfo {
	background-color: var(--plusinfo-bg-colour);
	cursor: pointer
}

.plusinfotransl {
	background-color: var(--plusinfo-bg-colour);
}

.rom {
	margin-right: .382em;
}

/* mother tongue */
.mt {
	color: var(--mt-colour);
}

/* literal */
.lit {
	color: var(--lit-colour);
}

.simp {
	margin-right: .382em;
}

.trad, #hideAll {
	color: var(--trad-colour);
}

.ctr {
	text-align: center;
}

.note {
	font-size: .924em;
	text-align: center
}

.nw {
	white-space: nowrap
}

.chend {
	margin-bottom: 2.618em;
}

.box {
	/*border-style: solid;
	border-width: 1px;*/
	padding-left: 1.618em;
	padding-right: 1.618em;
	padding-bottom: 0.618em;
	margin-top: 1.618em;
	margin-bottom: 1.618em;
	padding-top: 0.001em; /* compensates for box-shadow */
	-webkit-box-shadow:  var(--box-shadow-setting); /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow:		var(--box-shadow-setting); /* Firefox 3.5 - 3.6 */
	box-shadow: 			var(--box-shadow-setting); /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
	border-radius: 2px;
}

.box h3 {
	margin-top: 1em;
}

.subhdbox {
	padding-left: 1.618em;
	padding-right: 1.618em;
	padding-bottom: 0.618em;
	margin-top: 1.618em;
	margin-bottom: 1.618em;
	padding-top: 0.001em; /* compensates for box-shadow */
	-webkit-box-shadow: var(--box-shadow-setting); /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow:    var(--box-shadow-setting); /* Firefox 3.5 - 3.6 */
	box-shadow:         var(--box-shadow-setting); /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
	border-radius: 2px;
	text-align: left
}

.caption {
	font-size: .924em
}

.blurb {
	font-size: 1.236em;
}

.onelinebox {
	/*border-style: solid;
	border-width: 1px;*/
	padding-left: 1.618em;
	padding-right: 1.618em;
	padding-bottom: 0.236em;
	margin-top: 1.618em;
	margin-bottom: 1.618em;
	padding-top: 0.001em; /* compensates for box-shadow */
	-webkit-box-shadow:  var(--box-shadow-setting); /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow:		var(--box-shadow-setting); /* Firefox 3.5 - 3.6 */
	box-shadow: 			var(--box-shadow-setting); /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
	border-radius: 2px;
}

.secondbox {
	/*border-style: solid;
	border-width: 1px;*/
	padding-left: 1.618em;
	padding-right: 1.618em;
	padding-bottom: 0.618em;
	margin-top: 1.618em;
	margin-bottom: 1.618em;
	padding-top: 0.001em; /* compensates for box-shadow */
	-webkit-box-shadow:  var(--box-shadow-setting); /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow:		var(--box-shadow-setting); /* Firefox 3.5 - 3.6 */
	box-shadow: 			var(--box-shadow-setting); /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
	border-radius: 2px;
}

.page-indic {
	font-weight: bold;
	margin-top: 1.618em;
}

.rtspace {
	margin-right: 1em
}

.spacedlist {
	margin-left: 0;
	text-indent: 0;
	line-height: 2em
}

.hanging {
	margin-left: 1.618em;
	text-indent: -1.618em;
}

.chno {
	border-bottom: 1px solid;
	padding-bottom: .382em;
}

.chscr {
	margin-top: 3.236em;
}

.appxund {
	width: 7em;
	border-top: 1px solid;
	margin: 0 auto;
	margin-bottom: 1.618em;
}

.notproofread {
	background-color: var(--notpr-bg-colour);
}

.nonplussed {
	background-color: var(--nonpl-bg-colour);
}

.plusButton {
	background-color: var(--plusinfo-bg-colour);
	border: none
}

.noneButton {
	background-color: var(--bg-colour);
	border: none
}

[role="tooltip"] {
	display: none
}

.plusButton:hover + [role="tooltip"],
.plusButton:focus + [role="tooltip"],
.noneButton:hover + [role="tooltip"],
.noneButton:focus + [role="tooltip"] {
	display: inline
}

/* The animation code */
@keyframes pulse {
	0%		{opacity: 1;}
	61.8% {opacity: 0;}
	100%	{opacity: 1;}
}

/* The class to apply the animation to */
.pulsing {
	animation-name: pulse;
	animation-duration: 2.5s;
	animation-iteration-count: infinite;
}

.plus {
	color: var(--mt-colour)
}

.hand {
	cursor: pointer
}

#revealLevelSelect, #plusRevealLevelSelect {
	font-weight: bold;
	color: hsl(0, 0%, 100%);
	background-color: hsl(90, 100%, 30%)
}

#engtitle {
	margin-bottom: -1.618em;
}

#updated {
	font-style: italic;
	margin-bottom: 2.1em;
}

#toc-intro {
	line-height: 1.618em
}

#toc-intro ul {
	list-style-type: none;
	font-weight: bold
}

#pubinfo {
	margin-top: 2.618em;
	margin-bottom: 2.618em;
}

#related {
	list-style-type: none;
}

#related li {
	margin-bottom: 1em;
}

#intro h3 {
	margin-top: 1.618em;
}

#main {
	margin-bottom: 2.618em;
	margin-left: auto;
	margin-right: auto;
	width: 30em;
}

#ref h3 {
	margin-top: 2em;
}

@media print {
	body {
			font-size: 1em;
	}
}

@view-transition {
	navigation: auto;
}