.h5p-memory-game {
  overflow: hidden;
  background-color: var(--h5p-theme-ui-base);
}
.h5p-memory-game .h5p-memory-hidden-read {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.h5p-memory-game > ul {
  list-style: none;
  padding: 0.25em 0.5em;
  margin: 0;
  overflow: hidden;
  font-size: calc(var(--h5p-theme-spacing-s)*1.25);
  box-sizing: border-box;
}
.h5p-memory-game .h5p-memory-card,
.h5p-memory-game .h5p-memory-card .h5p-back,
.h5p-memory-game .h5p-memory-card .h5p-front {
  width: 6.25em;
  height: 6.25em;
  user-select: none;
}
.h5p-memory-game img {
  -webkit-user-drag: none;
  display: inline-block;
  margin: auto;
  vertical-align: middle;
  position: relative;
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.h5p-memory-game .h5p-memory-wrap {
  float: left;
  text-align: center;
  background-image: none;
  margin: 0;
  padding: 0;
}
.h5p-memory-game .h5p-memory-wrap:focus-visible {
  outline: 2px ridge var(--h5p-theme-contrast-cta-white);
  border-radius: var(--h5p-theme-border-radius-small, 4px);
}
.h5p-memory-game .h5p-memory-card {
  display: inline-block;
  outline: none;
  position: relative;
  margin: 0.75em 0.5em;
  padding: 0;
  background: transparent;
  perspective: 25em;
  transition: opacity 0.4s, filter 0.4s;
}
.h5p-memory-game .h5p-memory-card .h5p-back,
.h5p-memory-game .h5p-memory-card .h5p-front {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--h5p-theme-alternative-base);
  background-size: cover;
  border: 2px solid var(--h5p-theme-alternative-dark);
  box-sizing: border-box;
  border-radius: var(--h5p-theme-border-radius-small, 4px);
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.h5p-memory-game .h5p-memory-card .h5p-front {
  cursor: pointer;
  text-align: center;
}
.h5p-memory-game .h5p-memory-card .h5p-front:before,
.h5p-memory-game .h5p-memory-card .h5p-back:before,
.h5p-memory-game .h5p-memory-image:before {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0;
}
.h5p-memory-game.h5p-invert-shades .h5p-memory-card .h5p-front:before,
.h5p-memory-game.h5p-invert-shades .h5p-memory-card .h5p-back:before,
.h5p-memory-game.h5p-invert-shades .h5p-memory-image:before {
  background: var(--h5p-theme-alternative-base);
}

.h5p-memory-game .h5p-memory-card .h5p-front:hover:before {
  opacity: 0.4;
}
.h5p-memory-game .h5p-memory-card .h5p-front > span:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--h5p-theme-alternative-dark);
  -webkit-mask-image: url(../images/pattern.svg);
  mask-image: url(../images/pattern.svg);
  mask-size: 200%;
  background-repeat: repeat;
  opacity: 40%;
}
.h5p-memory-game .h5p-memory-card .h5p-front:after {
  content: "";
  display: block;
  position: absolute;
  top: 85%;
  height: 50%;
  width: 100%;
  transform: rotateX(90deg);
  background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
}
.h5p-memory-game .h5p-memory-card .h5p-back {
  line-height: 5.83em;
  text-align: center;
  background-color: #f0f0f0;
  transform: rotateY(-180deg);
}
.h5p-memory-game .h5p-memory-card.h5p-flipped .h5p-back {
  transform: rotateY(0deg);
}
.h5p-memory-game .h5p-memory-card.h5p-flipped .h5p-front {
  transform: rotateY(180deg);
}
.h5p-memory-game .h5p-memory-card.h5p-matched {
  opacity: 0.3;
}
.h5p-memory-game .h5p-memory-card.h5p-matched img {
  filter: grayscale(100%);
}
.h5p-memory-game .h5p-memory-card.h5p-matched .h5p-front{
  background-image: none;
}
.h5p-memory-game .h5p-question-feedback-content-text{
  color: var(--h5p-theme-text-primary);
  font-size: var(--h5p-theme-font-size-l);
}
.h5p-memory-game .h5p-feedback {
  clear: both;
  float: right;
  font-weight: 600;
  visibility: hidden;
  transform: scale(0,0) rotate(90deg);
  transition: transform 0.2s;
  display: none;
  width: 100%;
  padding: var(--h5p-theme-spacing-s);
  box-sizing: border-box;
}
.h5p-memory-game .h5p-feedback.h5p-show {
  display: block;
  visibility: visible;
  transform: scale(1,1) rotate(0deg);
}
.h5p-memory-game .h5p-status {
  clear: left;
  padding: var(--h5p-theme-spacing-m);
  margin: var(--h5p-theme-spacing-s);
  background-color: var(--h5p-theme-alternative-light);
  color: var(--h5p-theme-text-primary);
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--h5p-theme-border-radius-large);
}
.h5p-memory-game .h5p-status > dd {
  margin: 0;
  font-size: var(--h5p-theme-font-size-l);
  font-weight: bold;
}
.h5p-memory-game dl{
  margin-bottom:   0px;
}
.h5p-memory-game .h5p-status .h5p-time-spent:before,
.h5p-memory-game .h5p-status .h5p-card-turns:before {
  font-family: 'h5p-theme';
  display: inline-block;
  margin-right: var(--h5p-theme-spacing-xs);
  font-size: var(--h5p-theme-font-size-xl);
}
.h5p-memory-game .h5p-status .h5p-time-spent:before {
  content: "\e934";
}
.h5p-memory-game .h5p-status .h5p-card-turns {
  text-align: right;
}
.h5p-memory-game .h5p-status .h5p-card-turns:before {
  content: "\e907";
}
.h5p-memory-game .h5p-memory-obscure-content {
  background-color: rgba(0, 0, 0, 0.85);
  box-sizing: border-box;
  display: none;
  height: 100%;
  left: 0;
  opacity: 1;
  position: absolute;
  top: 0;
  width: 100%;
}
.h5p-memory-game .h5p-memory-pop {
  background: var(--h5p-theme-ui-base);
  width: calc(70%*var(--h5p-theme-scaling));
  max-width: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: var(--h5p-theme-border-radius-large);
  transform: translate(-50%,-50%);
}
.h5p-memory-game .h5p-memory-top {
  padding: 0em 1em;
  background-color: var(--h5p-theme-alternative-base);
  background-size: cover;
  text-align: center;
  margin-bottom: 1.75em;
  border-top-left-radius: var(--h5p-theme-border-radius-large);
  border-top-right-radius: var(--h5p-theme-border-radius-large);
  border-bottom: 1px solid var(--h5p-theme-alternative-dark);
}
.h5p-memory-game .h5p-memory-image {
  display: inline-block;
  line-height: calc(5.83em*var(--h5p-theme-scaling));
  position: relative;
  top: calc(1.5em*var(--h5p-theme-scaling));
  left: calc(-0.5em*var(--h5p-theme-scaling));
  border: 2px solid #d0d0d0;
  box-sizing: border-box;
  border-radius: 4px;
  background: #f0f0f0;
  width: calc(6.25em*var(--h5p-theme-scaling));
  height: calc(6.25em*var(--h5p-theme-scaling));
  text-align: center;
  overflow: hidden;
  box-shadow: 0 0 1em rgba(125,125,125,0.5);
  background-size: cover;
}
.h5p-memory-game .h5p-memory-image:first-child {
  top: 1em;
  left: 0;
}
.h5p-memory-game .h5p-memory-two-images .h5p-memory-image:first-child {
  left: 0.5em;
}
.h5p-memory-game .h5p-row-break {
  clear: left;
}
.h5p-memory-screen-reader {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.h5p-memory-game .h5p-memory-desc {
  padding: 1em;
  margin-bottom: 0.5em;
  text-align: center;
  color: var(--h5p-theme-text-primary);
  font-weight: 600;
}
.h5p-memory-game .h5p-memory-close {
  cursor: pointer;
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  font-size: 2em;
  width: 1em;
  height: 1em;
  text-align: center;
  color: var(--h5p-theme-text-primary);
}
.h5p-memory-game .h5p-memory-close:before {
  content: "\00D7"
}
.h5p-memory-game .h5p-memory-close:hover {
  color: #666;
}
.h5p-memory-game .h5p-memory-close:focus-visible {
  outline: 2px ridge var(--h5p-theme-contrast-cta-white);
}
.h5p-memory-reset {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
  padding: 0.5em 1.25em;
  box-shadow: 0 0.5em 1em color-mix(in srgb, var(--h5p-theme-text-primary), transparent 70%);
  opacity: 1;
  transition: box-shadow 200ms linear, margin 200ms linear, transform 300ms ease-out, opacity 300ms ease-out;
}
.h5p-memory-reset:focus-visible {
  outline: 2px ridge var(--h5p-theme-contrast-cta-white);
}
.h5p-memory-complete {
  display: none;
}
.h5p-memory-game .h5p-programatically-focusable {
  outline: none;
}
.h5p-memory-audio-instead-of-image {
  font-family: 'h5p-theme';
  width: 100%;
  height: 100%;
  font-style: normal;
  padding: 0.5em;
  width: 2em;
  height: 2em;
  line-height: 2em;
  background-color: color-mix(in srgb, var(--h5p-theme-main-cta-base), transparent 10%);
  color: var(--h5p-theme-contrast-cta);
  border-radius: 50%;
  cursor: pointer;
  text-align: center;
  border: solid 2px var(--h5p-theme-ui-base);
  box-shadow: 1px 2px 0px 0px rgba(0, 0, 0, 0.05);
}
.h5p-memory-audio-button {
  position: absolute;
  right: 0.1em;
  top: 0.1em;
  font-family: 'h5p-theme';
  font-size: 12px;
  width: 2em;
  height: 2em;
  line-height: 2em;
  background-color: color-mix(in srgb, var(--h5p-theme-main-cta-base), transparent 10%);
  color: var(--h5p-theme-contrast-cta);
  border-radius: 50%;
  cursor: pointer;
  text-align: center;
  border: solid 2px var(--h5p-theme-ui-base);
  box-shadow: 1px 2px 0px 0px rgba(0, 0, 0, 0.05);
}
.h5p-memory-audio-instead-of-image:before,
.h5p-memory-audio-button:before {
  content: "\e941";
  display: inline-flex;
  width: 1em;
  transform: translateX(-0.1em);
}
.h5p-memory-audio-playing .h5p-memory-audio-instead-of-image:before,
.h5p-memory-audio-playing .h5p-memory-audio-button:before {
  content: "\e942";
  font-family: 'h5p-theme';
}
.h5p-memory-audio-instead-of-image:before {
  transform: translateX(-0.12em);
}

.h5p-memory-audio-playing .h5p-memory-audio-instead-of-image:before {
  transform: translateX(-0.1em);
}