@font-face {
	font-family: "Amiri";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/amiri-arabic.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
	font-family: "Amiri";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/amiri-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Amiri";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/amiri-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Cabin";
	font-style: normal;
	font-weight: 400;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/cabin-vietnamese.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
	font-family: "Cabin";
	font-style: normal;
	font-weight: 400;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/cabin-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Cabin";
	font-style: normal;
	font-weight: 400;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/cabin-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Staatliches";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/staatliches-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Staatliches";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/staatliches-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--fg: rgb(7,37,3);
	--bg: rgb(237,253,198);
	--accent: rgb(32,1,90);
	--h1-shadow: rgba(7,37,3,0.5);
	--link-hover-bg: rgba(0,0,0,0.25);
	--blockquote-bg: rgba(3,37,3,0.15);
}

[data-theme="dark"] {
	--fg: rgb(236,253,198);
	--bg: rgb(3,27,3);
	--accent: rgb(236,253,198);
	--h1-shadow: rgba(236,253,198,0.5);
	--link-hover-bg: rgba(236,253,198,0.15);
	--blockquote-bg: rgba(236,253,198,0.25);
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.flex-container {
	display: flex;
	order: 0;
	flex-direction: column;
	width: 32em;
	max-width: calc(100% - 20px);
	margin: auto;
}

.tab {
	margin-left: 5%;
}

.doubletab {
	margin-left: 11%;
}

.button {
	background-color: transparent;
	border: none;
	color: transparent;
	padding: 0;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1px;
	margin: 0;
	transition-duration: 0.4s;
	cursor: pointer;
}

.buttonlight {
	background-color: rgba(255,255,255,0.35);
}

.buttonlight:hover {
	background-color: rgb(253,253,253);
}

.buttondark {
	background-color: rgba(89,89,89,0.35);
}

.buttondark:hover {
	background-color: rgb(65,65,65);
}

body {
	color: var(--fg);
	background-color: var(--bg);
	font-family: Cabin, sans-serif;
	font-size: 90%;
	line-height: 110%;
	overflow-wrap: break-word;
}

td {
	line-height: 200%;
	vertical-align: middle;
}

a:link {
	color: var(--fg);
	text-decoration: none;
}

a:visited {
	color: var(--fg);
	text-decoration: none;
}

a:hover {
	color: rgb(255,255,255);
	background-color: var(--link-hover-bg);
	text-decoration: underline red;
	outline: 0;
}

a:active {
	color: var(--fg);
	text-decoration: none;
	outline: 0;
}

header {
	order: 1;
	padding: 1%;
	width: auto;
	text-align: center;
}

nav {
	order: 2;
	outline: none;
	text-align: center;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 90%;
	padding: 1%;
	width: auto;
	color: var(--accent);
}

section {
	order: 8;
	width: auto;
	line-height: 100%;
}

article {
	order: 9;
	line-height: 100%;
	width: auto;
}

footer {
	order: 20;
	outline: none;
	text-align: center;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 90%;
	padding: 1%;
	width: auto;
	padding-bottom: 30px;
	color: var(--accent);
}

/* Title */
h1 {
	color: var(--fg);
	font-family: Staatliches, serif;
	font-size: 250%;
	line-height: 120%;
	text-shadow: 2px 3px var(--h1-shadow);
	text-align: center;
}

/* Subtitle */
h2 {
	font-family: Amiri, serif;
	font-size: 150%;
	color: var(--fg);
	text-align: center;
	line-height: 110%;
	font-weight: bold;
}

/* Chapter Titles */
h3 {
	text-align: left;
	font-family: Amiri, serif;
	font-size: 120%;
	color: var(--fg);
}

/* Section Titles */
h4 {
	font-family: sans-serif;
	font-size: 110%;
	color: var(--accent);
}

/* Sub-section Titles */
h5 {
	font-family: sans-serif;
	font-size: 100%;
	color: var(--accent);
}

/* Not used */
h6 {
	font-family: sans-serif;
	font-size: 90%;
}

hr {
	height: 1px;
	border: 0;
	border-top: 1px solid rgb(74,62,48);
	padding: 0;
	width: 30em;
	max-width: 100%;
}

blockquote {
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	line-height: 110%;
	text-align: left;
	padding: 1em;
	color: var(--fg);
	background-color: var(--blockquote-bg);
}

img {
	display: block;
	width: 30em;
	max-width: 100%;
	height: auto;
	border-style: solid;
	border-color: var(--fg);
}