styles.css

@font-face {
	font-family: 'Noto Sans';
	src: url('https://thedoczek.github.io/scripts/NotoSans.ttf');
	src: url('NotoSans.ttf')
}
@font-face {
	font-family: 'Noto Sans';
	src: url('https://thedoczek.github.io/scripts/NotoSans-Italic.ttf');
	src: url('NotoSans-Italic.ttf');
	font-style: italic;
}

@font-face {
	font-family: 'Noto Sans Thai Normal';
	src: url('https://thedoczek.github.io/scripts/thai-lao/NotoSansThai.ttf');
	src: url('thai-lao/NotoSansThai.ttf');
}@font-face {
	font-family: 'Noto Sans Thai Looped';
	src: url('https://thedoczek.github.io/scripts/thai-lao/NotoSansThaiLooped.ttf');
	src: url('thai-lao/NotoSansThaiLooped.ttf');
}

@font-face {
	font-family: 'Noto Sans Lao Normal';
	src: url('https://thedoczek.github.io/scripts/thai-lao/NotoSansLao.ttf');
	src: url('thai-lao/NotoSansLao.ttf');
}
@font-face {
	font-family: 'Noto Sans Lao Looped';
	src: url('https://thedoczek.github.io/scripts/thai-lao/NotoSansLaoLooped.ttf');
	src: url('thai-lao/NotoSansLaoLooped.ttf');
}

@font-face {
	font-family: 'Noto Sans Mongolian';
	src: url('https://thedoczek.github.io/scripts/mongolian/NotoSansMongolian.ttf');
	src: url('mongolian/NotoSansMongolian.ttf');
}

@font-face {
	font-family: 'Noto Sans Devanagari';
	src: url('https://thedoczek.github.io/scripts/india/NotoSansDevanagari.ttf');
	src: url('india/NotoSansDevanagari.ttf');
}

@font-face {
	font-family: 'Noto Sans Bengali';
	src: url('https://thedoczek.github.io/scripts/india/NotoSansBengali.ttf');
	src: url('india/NotoSansBengali.ttf');
}

@font-face {
	font-family: 'Noto Sans Oriya';
	src: url('https://thedoczek.github.io/scripts/india/NotoSansOriya.ttf');
	src: url('india/NotoSansOriya.ttf');
}

@font-face {
	font-family: 'Noto Sans Gujarati';
	src: url('https://thedoczek.github.io/scripts/india/NotoSansGujarati.ttf');
	src: url('india/NotoSansGujarati.ttf');
}

@font-face {
	font-family: 'Noto Sans Gurmukhi';
	src: url('https://thedoczek.github.io/scripts/india/NotoSansGurmukhi.ttf');
	src: url('india/NotoSansGurmukhi.ttf');
}

@font-face {
	font-family: 'Noto Sans Kannada';
	src: url('https://thedoczek.github.io/scripts/india/NotoSansKannada.ttf');
	src: url('india/NotoSansKannada.ttf');
}

@font-face {
	font-family: 'Noto Sans Sinhala';
	src: url('https://thedoczek.github.io/scripts/india/NotoSansSinhala.ttf');
	src: url('india/NotoSansSinhala.ttf');
}

@font-face {
	font-family: 'Noto Sans Tamil';
	src: url('https://thedoczek.github.io/scripts/india/NotoSansTamil.ttf');
	src: url('india/NotoSansTamil.ttf');
}

@font-face {
	font-family: 'Noto Sans Malayalam';
	src: url('https://thedoczek.github.io/scripts/india/NotoSansMalayalam.ttf');
	src: url('india/NotoSansMalayalam.ttf');
}

@font-face {
	font-family: 'Noto Sans Telugu';
	src: url('https://thedoczek.github.io/scripts/india/NotoSansTelugu.ttf');
	src: url('india/NotoSansTelugu.ttf');
}

@font-face {
	font-family: 'Noto Sans Georgian';
	src: url('https://thedoczek.github.io/scripts/georgian/NotoSansGeorgian.ttf');
	src: url('georgian/NotoSansGeorgian.ttf');
}

@font-face {
	font-family: 'Noto Sans Armenian';
	src: url('https://thedoczek.github.io/scripts/armenian/NotoSansArmenian.ttf');
	src: url('armenian/NotoSansArmenian.ttf');
}

@font-face {
	font-family: 'Noto Sans KR';
	src: url('https://thedoczek.github.io/scripts/hangul/NotoSansKR.ttf');
	src: url('hangul/NotoSansKR.ttf');
}

:root {
	font-size: 125%;
}

h1 {
	margin: 0px;
}
body {
	font-family: 'Noto Sans';
	background-color: #003660;
	color: #e0f2ff;
	font-size: 1rem;
	text-align: center;
}

c, na, tg, one {
	display: inline;
}

c {
	font-size: 0.75rem;
}

one {
	font-size: 1rem;
}

tg {
	font-size: 0.75rem;
	font-style: italic;
}

table.langs tr td a c {
	text-decoration: underline;
}

table.langs tr td tg, table.title tr td c {
	text-decoration: none;	
}

table {
	width: 100%;
}
table.title {
	width: 50%;
	margin: 0 auto;
}
tr {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
table.letters tr {
	align-items: flex-start;
	justify-content: center;
}
td {
	width: 25%;
	border:1px solid #e0f2ff;
	box-sizing: border-box;
	padding: 2px;
	font-size: 1rem;
}
td.title {
	width: 50%;
	border:none;
}
table.two tr td, tr.two td {
	width: 50%;
}
table.three tr td, tr.three td {
	width: 33%;
}
table.letters {
	width: 75%;
}
table.letters tr td {
	width: 40px;
	text-align: center;
	font-size: 1.25rem;
	border: none;
	padding: 0px;
}
table.langs tr td {
	text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
table.title tr td {
	text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
	width: 50%;
	border: none;
}

@media screen and (max-width:1440px) {
	td{width:33%;}
	table.title {width: 66%;}
}
@media screen and (max-width:960px) {
	td{width:50%;}
	table.title {width: 100%;}
}
@media screen and (max-width:720px) {
	table.three tr td, tr.three td{width:100%;}
}
@media screen and (max-width:480px) {
	td{width:100%;}
	table.two tr td, tr.two td{width:100%;}
	table.two tr td, tr.two td{width:100%;}
	table.title tr td{width:100%;}
	table.letters {width: 100%;}
}
@media screen and (hover: none) {
	td{width:100%;}
	table.two tr td, tr.two td{width:100%;}
	table.two tr td, tr.two td{width:100%;}
	table.title tr td{width:100%;}
	table.letters {width: 100%;}
	table.title {width: 100%;}
	table.three tr td, tr.three td{width:100%;}
	:root {font-size:250%}
	table.letters tr td {width: 80px}
}

textarea {
	background: none;
	border: none;
	outline: none;
	width: 100%;
	resize: none;
	overflow: hidden;
	font-size: 1rem;
	color: #e0e8ff;
	font-family: inherit;
}
textarea::placeholder {
	color: #e0f2ff80
}

table.langs tr td a, table.langs tr td a:visited {
	color: #e0f2ff
}
a, a:visited, table.langs tr td a:hover {
	font-size: 1.5rem;
	color: #e0f2ffc0;
	text-decoration: none;
}
a:hover, tg:hover {
	color: #e0f2ff80
}

table.langs tr td na {
	color: #ffe0f2
}
na, table.langs tr td na:hover {
	font-size: 1.5rem;
	color: #ffe0f2c0;
	text-decoration: none;
}
na:hover {
	color: #ffe0f280
}

h1 {
	font-weight: bold;
	font-size: 2rem;
}