body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  background-color: #d9e0eb;
  color: #181425;
  display: flex;
  justify-content: center;

  font-family: "Roboto", "Noto Sans", "Noto Sans Arabic", "Noto Sans Bengali",
    "Noto Sans Devanagari", "Noto Sans Ethiopic", "Noto Sans Hebrew",
    "Noto Sans JP", "Noto Sans KR", "Noto Sans Lao", "Noto Sans Marchen",
    "Noto Sans Myanmar", "Noto Sans SC", "Noto Sans Sinhala", "Noto Sans TC",
    "Noto Sans Thaana", "Noto Sans Thai", "Noto Serif Tibetan", sans-serif;
}

main {
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  font-size: 64px;
  margin: 16px;
  margin-top: 48px;
  font-family: "Roboto Flex";
  font-weight: 900;
  text-align: center;
}

audio,
#big-flag {
  margin: 8px;
}

#big-flag {
  height: 256px;
}

#score {
  font-size: 22px;
}

#button-row {
  margin: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

a {
  text-decoration: none;
  color: #1212c5;
}

button {
  font: inherit;
  font-size: 28px;
  display: flex;
  align-items: center;
  padding: 12px 28px;
  margin: 8px;
  border-radius: 16px;
  color: #ffffff;
  border: none;
  transition: 300ms;
  filter: brightness(1);
  cursor: pointer;
}

#button-row button:nth-child(1) {
  background-color: #e43b44;
}
#button-row button:nth-child(2) {
  background-color: #e79b29;
}
#button-row button:nth-child(3) {
  background-color: #3e8948;
}
#button-row button:nth-child(4) {
  background-color: #0099db;
}

.next-button {
  margin: 0 auto;
  background-color: #003952;
}

button:hover {
  filter: brightness(1.25);
}

img {
  height: 48px;
  border: 1px #323232 solid;
}

button img {
  margin-right: 12px;
}

#answer {
  font-size: 28px;
  text-align: center;
}

#answer img {
  vertical-align: middle;
}

#answer .small {
  font-size: 16px;
}

#header,
#footer {
  padding: 22px;
  display: flex;
  align-items: center;
  font-size: 18px;
}

#footer {
  margin-top: auto;
}

#footer img {
  height: 22px;
  margin-right: 8px;
  border: none;
}

.hidden {
  display: none;
}