styles.css

/*!
 *  Hack typeface https://github.com/source-foundry/Hack
 *  License: https://github.com/source-foundry/Hack/blob/master/LICENSE.md
 */
/* FONT PATHS
 * -------------------------- */
@font-face {
  font-family: 'Hack';
  src: url('fonts/hack-regular.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-regular.woff?sha=3114f1256') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Hack';
  src: url('fonts/hack-bold.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-bold.woff?sha=3114f1256') format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Hack';
  src: url('fonts/hack-italic.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-italic.woff?sha=3114f1256') format('woff');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Hack';
  src: url('fonts/hack-bolditalic.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-bolditalic.woff?sha=3114f1256') format('woff');
  font-weight: 700;
  font-style: italic;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');

/* page design */
body {
	background-color: #282a2e;
	text-align: left;
	font-family: 'Hack', monospace;
	font-weight: normal;
	word-wrap: break-word;
	margin: 50px 50px 50px 50px;
}
h {
	color: #fefd30;
	font-family: 'Hack', monospace;
	font-size: 30px;
	font-weight: bold;
}
p {
	color: #fefd30;
	font-family: 'Hack', monospace;
	font-size: 20px;
}
strong {
	color: #ffffff;
	font-family: 'Hack', monospace;
	font-weight: bold;
}
button {
	position: absolute;
	color: #282a2e;
	font-size: 20px;
	padding: 5px 5px;
	background-color: #fefd30;
	border: 0px;
	border-radius: 0px;
	cursor: pointer;
	font-family: 'Noto Sans', sans-serif;
}
.vowel {
	color: #282a2e;
}
.vowel-button {
}
.vowel-chart {
	width: 500px;
	height: 350px;
	position: relative;
}

/* links */
a:link {
	color: #fffe82;
}
a:visited {
	color: #fffe64;
}
a:hover {
	color: #fefd30;
}
a:active {
	color: #000000;
}