:root {
  --primary-color: #cf0; /* #eb0 */
  --secondary-color: #045; /* #f06 */
  --background-color: #fff;
  --body-color: #000;
  --feedback-correct: #cf0; /* #ccff99 */;
  --feedback-incorrect: #f9c; /* #ffcccc */
  --font-base: Noto Sans, Arial, sans-serif;
  --font-ipa: Noto Serif; Times New Roman, serif;
}

/* Fonts */

/* noto-sans-100 - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/notosans/noto-sans-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-100italic - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/notosans/noto-sans-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-200 - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/notosans/noto-sans-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-200italic - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/notosans/noto-sans-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-300 - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/notosans/noto-sans-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-300italic - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/notosans/noto-sans-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-regular - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/notosans/noto-sans-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-italic - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/notosans/noto-sans-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-500 - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/notosans/noto-sans-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-500italic - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/notosans/noto-sans-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-600 - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/notosans/noto-sans-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-600italic - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/notosans/noto-sans-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-700 - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/notosans/noto-sans-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-700italic - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/notosans/noto-sans-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-800 - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/notosans/noto-sans-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-800italic - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/notosans/noto-sans-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-900 - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/notosans/noto-sans-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-900italic - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/notosans/noto-sans-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-sans-mono-100 - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans Mono';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/notomono/noto-sans-mono-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-mono-200 - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans Mono';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/notomono/noto-sans-mono-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-mono-300 - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans Mono';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/notomono/noto-sans-mono-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-mono-regular - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans Mono';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/notomono/noto-sans-mono-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-mono-500 - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans Mono';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/notomono/noto-sans-mono-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-mono-600 - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans Mono';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/notomono/noto-sans-mono-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-mono-700 - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans Mono';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/notomono/noto-sans-mono-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-mono-800 - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans Mono';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/notomono/noto-sans-mono-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-mono-900 - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans Mono';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/notomono/noto-sans-mono-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-serif-100 - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/notoserif/noto-serif-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-100italic - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/notoserif/noto-serif-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-200 - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/notoserif/noto-serif-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-200italic - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/notoserif/noto-serif-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-300 - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/notoserif/noto-serif-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-300italic - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/notoserif/noto-serif-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-regular - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/notoserif/noto-serif-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-italic - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/notoserif/noto-serif-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-500 - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/notoserif/noto-serif-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-500italic - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/notoserif/noto-serif-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-600 - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/notoserif/noto-serif-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-600italic - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/notoserif/noto-serif-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-700 - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/notoserif/noto-serif-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-700italic - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/notoserif/noto-serif-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-800 - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/notoserif/noto-serif-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-800italic - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/notoserif/noto-serif-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-900 - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/notoserif/noto-serif-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-900italic - Latin, Greek, Cyrillic (with extensions) */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/notoserif/noto-serif-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Layout */

body {
	background-color: var(--body-color);
	font-size: 100%;
}

/* Main menu */
.invisible-checkbutton{
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

#check{
  display: none;
}

#check:checked ~ .menu{display: block;}

.menu {
  display: none;
  position: absolute;
  top: 4.3em;
  right: 0;
  overflow: hidden;
  background: var(--primary-color);
  z-index: 1;
  width: auto;
  text-align: right;
}

.menu a {
  color: #fff;
  padding: 1rem 1rem;
  display: block;
  text-decoration: none;
  color: black;
  font-family: var(--font-base);
  font-weight: 800;
  text-transform: uppercase;
}

.menu a:hover {

  background-color: pink;

}

/* Selection menu */

select {
  // A reset of styles, including removing the default dropdown arrow
  appearance: none;
  -webkit-appearance: none;
  // Additional resets for further consistency
  background-color: transparent;
  border: none;
  margin: 0;
  width: 56%;
  border: 1px solid var(--secondary-color);
  border-radius: 0.1em;
  padding: 0.1em 0.2em;
  font-family: var(--font-base);
  font-size: 1em;
  cursor: pointer;
  height: 1.8em;
  background-color: #fff;
    /* Add arrow icon */
  background-image: url('../mascots/dropdown.png');
  background-position: center right;
  background-repeat: no-repeat;
}
}

select::-ms-expand {
  display: none;
}

.control-button {
  appearance: none;
  display: inline;
  background-color: var(--secondary-color);
  margin: 0;
  border: 1px solid var(--secondary-color);
  color: #fff;
  border-radius: 0.1em;
  padding: 0.1em 0.2em;
  font-family: var(--font-base);
  font-weight: 800;
  font-size: 1em;
  cursor: pointer;
  height: 1.8em;
  width: 5em;
}

.control-button:disabled,
.control-button[disabled]{
  border: 1px solid #ccc;
  background-color: #ccc;
  color: #666666;
  -webkit-user-select: none; /* Safari */
  user-select: none;
  cursor: not-allowed;
}

.info {
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
}


/* Typography */

.basefont {
  font-family: var(--font-base);
}

.ipafont {
  font-family: var(--font-ipa);
  letter-spacing: .1em;
}

.speaker {
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
}

.title{
  font-family: var(--font-base);
  font-weight: 800;
  font-style: italic;
  font-size: 1.8em;
  color: black;
  margin: 0;
}

/* Page structure */

.wrapper {
  max-width: 1024px;
  min-width: 768px;
  margin-left: auto;
  margin-right: auto;
  margin-top:2em;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0px;
  grid-auto-rows: minmax(50px, auto);
  border: none;
}

.header-left {
  position: relative;
  background-color: var(--primary-color);
  border-radius: 1em 0em 0em 0em;
  padding: 10px;
  grid-column: 1;
  grid-row: 1;
  text-align: left;
  height: 50px;
  border: none;
}

.header-left img { 
  position: absolute;
  top: 50%;
  transform: translate(10%, -50%);
  border: none;
}

.subheader-left {
  grid-column: 1;
  grid-row: 2;
  text-align: left;
  background-color: var(--background-color);
  padding-top: 15px;
  padding-left: 10px;
  border: none;
}

.header-right {
  position: relative;
  background-color: var(--primary-color);
  border-radius: 0em 1em 0em 0em;
  padding: 10px;
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  height: 50px;
  border: none;
}

.header-right img { 
  position: absolute;
  top: 50%;
  transform: translate(-120%, -50%);
}


.subheader-right {
  grid-column: 2;
  grid-row: 2;
  text-align: right;
  background-color: var(--background-color);
  padding-top: 15px;
  padding-right: 1em;
  border: none;
}

.heading {
  font-family: var(--font-base);
  text-transform: uppercase;
  font-weight: 800;
}

.workspace {
  position: relative;
  grid-column: 1;
  grid-row: 3 / 9;
  padding: 5px;
  background-color: var(--background-color);
  padding-left: 10px;
  border: none;
}

.inputbox {
  font-family: var(--font-ipa);
  letter-spacing: 0.1em;
  font-size: 1.5em;
  border: 2px solid #113355;
  height: 1.6em;
  width: 90%
}

.inputbox:focus {
  border:2px solid var(--primary-color);
}


.feedback {
  position: relative;
  grid-column: 2;
  grid-row: 3 / 9;
  padding: 5px;
  background-color: var(--background-color);
  border: none;
}


.input {
	grid-column: 1 / 3;
  	grid-row: 9 / 10;
	position: relative;
	z-index: 2;
	border-radius: 0em 0em 1em 1em;
	padding: 5px;
    background-color: var(--primary-color);
    text-align: center;
}

.inputarea {
  position: absolute;
  bottom: 10%;
  border: none;
}

.keygroup {
	display: inline-flex;
	border-radius: 5px;
	background-color: var(--secondary-color);
	padding: 3px;
	margin: 1px;
    align-items: center;
}

.basechar {
	font-family: var(--font-base);
	margin-right: 4px;
	margin-left: 2px;
	color: white;
	font-weight: bold;

}

.keyboard {
    display: inline;
	font-family: var(--font-ipa);
	font-size: 1.2em;
	height: 1.6em;
	width: 1.6em;
	padding: 0em;
	text-align: center;
	vertical-align: top;
	margin: 1px;
}

.feedback-content {
  height: 90%;
  width: 100%;
  position: relative;
  text-align: right;
}

.parrot {
	z-index: 1;
	float: right;
	position: absolute;
	bottom: 0;
	transform: translateY(20%) translateX(20%);
	right: 0;
}

.speech-bubble {
	float: right;
	position: relative;
	top: 50%;
	transform: translateY(-50%) translateX(10%);
	width: auto;
	margin-right: 150px;
	padding: 0px 10px;
	background: var(--primary-color);
	border-radius: .4em;
	text-align: left;
}

.speech-bubble:after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 1em solid transparent;
	border-left-color: var(--primary-color);
	border-right: 0;
	border-bottom: 0;
	margin-top: -0.5em;
	margin-right: -1em;