/* === Global Reset & Font Rendering === */
*, ::before, ::after {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	max-width: 100% !important;
	box-sizing: border-box !important;
	scroll-behavior: smooth;
}

/* === Font Embeds === */
@font-face {
	font-family: 'Georgia';
	src: url('fon/Georgia/georgia.woff') format('woff'),
		 url('fon/Georgia/georgia.ttf') format('truetype');
}

@font-face {
	font-family: 'CenturySchoolbook';
	src: url('fon/CenturySchoolbook/CENSCBK.woff') format('woff'),
		 url('fon/CenturySchoolbook/CENSCBK.ttf') format('truetype');
}

@font-face {
	font-family: 'CenturySchoolbookItalic';
	src: url('fon/CenturySchoolbook/SCHLBKI.woff') format('woff'),
		 url('fon/CenturySchoolbook/SCHLBKI.ttf') format('truetype');
}

@font-face {
	font-family: 'CenturySchoolbookBold';
	src: url('fon/CenturySchoolbook/SCHLBKB.woff') format('woff'),
		 url('fon/CenturySchoolbook/SCHLBKB.ttf') format('truetype');
}

@font-face {
	font-family: 'FranklinBook';
	src: url('fon/FranklinGothicBookRegular/FRABK.woff') format('woff'),
		 url('fon/FranklinGothicBookRegular/FRABK.ttf') format('truetype');
}

@font-face {
	font-family: 'Mignon';
	src: url('fon/Mignon-Medium/Mignon-Medium.woff') format('woff'),
		 url('fon/Mignon-Medium/Mignon-Medium.otf') format('truetype');
}

@font-face {
	font-family: 'Open Sans';
	src: url('fon/OpenSansIPA/fonts/woff/OpenSansIPA-Regular.woff') format('woff'),
		 url('fon/OpenSansIPA/fonts/otf/OpenSansIPA-Regular.otf') format('truetype');
}


/* === Global Styling === */
html {
	scroll-behavior: smooth;
}

body {
	margin: 0 !important;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
}
body::-webkit-scrollbar {
	display: none;
}

/* === Block & Common Elements === */
header,
footer,
article {
	display: block;
}

div {
	max-width: 100%;
}

button {
	font-family: Georgia Pro Cond Light, georgia, serif;
	background: none;
}

a {
	background-color: transparent;
	text-decoration: none;
	color: #3366cc;
}

ul {
	list-style: none;
}
h1 {
	font-size: 20px;
}
h2 {
	font-size: 18px;
}
h3 {
	font-size: 16px;
}
h4 {
}
h1, h2, h3, h4 {
	font-family: Open Sans;
}
p {
	margin: 0;
}
i {
	font-style: normal;
	font-family: CenturySchoolbookItalic;
}
table, th, td {
	border: 1px solid #8EA9DB;
	text-align: left;
}
tr {
	position: relative;
}
tr:nth-child(even) {
  background-color: #D9E1F2;
}
td {
	vertical-align: top;
}

.page {
	position: relative;
	background-color: #fcfbf9;
	min-height: 100vh;
	font-family: Open Sans;
	font-size: 16px;
	padding: 3vh 20vh
}
@media (max-width: 599px) {
.page {
	font-size: 16px;
	padding: 3vh 2vh;
}
}
.kopje {
	margin: 0 0 40px 0;
}
	.sounds {
		display: flex;
		flex-direction: column;
	}
	.sounds td {
		padding: 3px 6px;
	}
		.vowels table, .consonants table {
			table-layout: fixed
		}
	
	.doubleConsonants {
		display: flex;
	}
	
	.songs {
		position: relative;
		display: inline-block;
	}
	.songs table {
	}
	.songs td {
		padding: 10px 15px 35px 15px;
	}
	.songs th {
		font-size: 17px;
		padding: 5px 15px 5px 5px;
	}
		.songs-nav {
			position: sticky;
			z-index: 10;
			top: 0;
		}
			.songs-nav nav {
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				column-gap: 20px;
				margin: 15px auto 100px auto;
				text-align: left;
				padding-left: 15px;
				border-left: 3px solid #d7d4cb;
			}
			.songs-nav span {
				font-size: 17px;
				font-weight: 600;
			}
			.songs-nav a {
				text-indent: 0.5rem;
				color: #3366cc;
			}