.card {
  padding: 1em 0;
  background-color: white;
  color: black;
  font-family: Verdana;
  font-size: 16px;
  text-align: center;
}

.type {
  margin-bottom: 0.25em;
  color: #333;
  font-size: 70%;
  font-weight: bold;
  text-transform: uppercase;
}

.info {
  max-width: 30em;
  margin: 0.75em auto;
  color: #333;
  font-size: 90%;
  font-style: italic;
}

.value {
  font-size: 150%;
}

.value--top {
  margin-top: 1em;
}

.value--image {
  margin-top: 0.75em;
}

.value--map {
  width: 90%;
  height: 65vh;
  margin: 2em auto 0 auto;
}

.value > img,
.value > .placeholder {
  max-width: 100%;
  height: auto;
}

/**
 * Apply shadow to images, notably to bring out white areas on flags.
 * Ignore images with non-rectangular outlines (e.g. flag of Nepal).
 */
.value > img:not([src*="-nobox"]) {
  box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.2);
}

/**
 * Some flags (e.g. Guam's) contain identifying words that can give away the answer.
 * If a blurred version is available, show it on the front but not on the back.
 */
.value--front > img[src*="-blur"] + img {
  display: none;
}

.value--back > img[src*="-blur"] {
  display: none;
}

/**
 * Placeholder SVG to hint at the type of answer that is expected.
 * Used on "Country - Flag" and "Country - Map" templates.
 */
.placeholder {
  color: #333;
}

.placeholder > path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

.night_mode .info,
.night_mode .type,
.night_mode .placeholder,
.nightMode .info,
.nightMode .type,
.nightMode .placeholder {
  color: #ccc;
}

/**
 * Apply shadow to images, to bring out black areas on flags, in night
   mode.
 */
.nightMode .value > img:not([src*="-nobox"]),
.night_mode .value > img:not([src*="-nobox"]) {
  box-shadow: 0 0 4px 1px rgba(54, 54, 54, 0.9);
}

hr {
  margin: 1.5em 0;
}
