#exercise{  
  max-width: 1200px;
  touch-action: manipulation;
}

:root {
  --card-aspect-ratio: 3/4;
  --card-border-width: 2px;
  --card-shadow: 0 0 0 var(--card-border-width);
}

#playGround {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
}

#pexeso::before {
  content: '';
  position: absolute;
  inset: 0;

  background-image: var(--background-image);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.3;
}

#pexeso.finished {
  cursor: pointer;
}

#pexeso.finished::before {
  opacity: 1;
  transition: opacity 500ms linear;
}

/********** PEXESO LAYOUT **********/
#pexeso {
  --columns: 4;
  --rows: calc(7 - var(--columns));
  --background-image: var(--background-image-landscape);
  display: inline-grid;
  box-sizing: content-box;
  --min-height: calc(100vh / var(--rows) / (var(--card-aspect-ratio)) - 2 * var(--card-border-width));
  grid-template-columns: repeat(var(--columns), minmax(auto, var(--max-card-width)));
  grid-template-columns: repeat(var(--columns), minmax(auto, min(var(--min-height), var(--max-card-width))));

  gap: var(--card-border-width);
  padding: var(--card-border-width);

  z-index: 0;
  position: relative;
}

#pexeso.cards-normal {
  --max-card-width: 200px;
}
#pexeso.cards-small {
  --max-card-width: 120px;
}
#pexeso.cards-large {
  --max-card-width: 280px;
}

#pexeso > :nth-child(3n) {
  grid-row: 0;
}
#pexeso > :nth-child(3n+1) {
  grid-row: 1;
}
#pexeso > :nth-child(3n+2) {
  grid-row: 2;
}

/* 4*var(--max-card-width) + 2*var(--exercise-padding) + 2*var(--card-border-width) */

@media screen and (max-aspect-ratio: 4/3) and (max-width: 903px) {
  #pexeso.cards-normal {
    --columns: 3;
    --background-image: var(--background-image-portrait)
  }
  #pexeso.cards-normal > :nth-child(n) {
    grid-row: unset;
  }
}

@media screen and (max-aspect-ratio: 4/3) and (max-width: 1223px) {
  #pexeso.cards-large {
    --columns: 3;
    --background-image: var(--background-image-portrait)
  }
  #pexeso.cards-large > :nth-child(n) {
    grid-row: unset;
  }
}

@media screen and (max-aspect-ratio: 4/3) and (max-width: 583px) {
  #pexeso.cards-small {
    --columns: 3;
    --background-image: var(--background-image-portrait)
  }
  #pexeso.cards-small > :nth-child(n) {
    grid-row: unset;
  }
}

.card {
  height: 0;
  padding-bottom: calc(100% * var(--card-aspect-ratio));
  position: relative;
}

.card-content {
  position: absolute;
  inset: 0;
}

/********** CARDS **********/
.card {
  box-shadow: var(--card-shadow) var(--lightGray);
  background-color: white;
  cursor: pointer;

  line-height: 1.3;
}

.card.odd {
  color: var(--orangeHover);
}

.card.even {
  color: var(--blueHover);
}

.card::before {
  position: absolute;
  inset: 0;
  opacity: .1;
  z-index: 2;
}

.card.selected {
  box-shadow: var(--card-shadow) var(--blue);
  z-index: 1;
}

.card.selected::before {
  content: '';
  background-color: var(--blue);;
}

@media screen and (hover: hover) {
  .card:hover {
    box-shadow: var(--card-shadow) var(--blue);
    z-index: 1;
  }
}

.card.correct {
  box-shadow: var(--card-shadow) var(--green);
  animation: var(--animation-pulse);
  animation-duration: 300ms;
  z-index: 1;

  pointer-events: none;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 500ms;
  transition-delay: 300ms;
}

.card.correct::before {
  content: '';
  background-color: var(--green);
}

.card.wrong {
  box-shadow: var(--card-shadow) var(--red);
  animation: var(--animation-shake);
  z-index: 1;
}

.card.wrong::before {
  content: '';
  background-color: var(--red);
}

/********** FONT SIZE **********/
.font-odd-extra-large .card.odd,
.font-even-extra-large .card.even{
  font-size: var(--font-extralarge);
}
.font-odd-large .card.odd,
.font-even-large .card.even {
  font-size: var(--font-large);
}
.font-odd-normal .card.odd,
.font-even-normal .card.even {
  font-size: var(--font-normal);
}
.font-odd-small .card.odd,
.font-even-small .card.even{
  font-size: var(--font-small);
}
.font-odd-semi-large .card.odd,
.font-even-semi-large .card.even {
  font-size: var(--font-semilarge);
}

:root {
  --font-extralarge: 30px;
  --font-large: 18px;
  --font-semilarge: 15px;
  --font-normal: 12px;
  --font-small: 10px;
}

@media screen and (min-aspect-ratio: 4/3) and (min-width: 800px) and (min-height: 450px) {
  :root {
    --font-extralarge: 40px;
    --font-large: 30px;
    --font-semilarge: 25px;
    --font-normal: 20px;
    --font-small: 14px;
  }
}
/* min width increased by 2*50px due to exercise padding (write us), should be 600px normally */
@media screen and (max-aspect-ratio: 4/3) and (min-width: 700px) and (min-height: 600px) {
  :root {
    --font-extralarge: 40px;
    --font-large: 30px;
    --font-semilarge: 25px;
    --font-normal: 20px;
    --font-small: 14px;
  }
}

.cards-small {
  --font-extralarge: 30px;
  --font-large: 18px;
  --font-semilarge: 15px;
  --font-normal: 12px;
  --font-small: 10px;
}

/********** CARD CONTENT **********/
.card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 2px;

  font-weight: 500;
}

.card .fmt-image,
.card .map {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.card .fmt-image img,
.card .map svg {
  max-width: 100%;
  max-height: 100%;
}

.map svg {
  background-color: var(--faintBlue);
}

.map #bg > *, .map .land {
  fill: white;
}

.map .selected {
  stroke-width: 4;
  stroke: var(--yellowHover);
}

.map .selected.fill {
  stroke-width: 2;
  fill: var(--yellow);
}

.card code[class*="language"] {
  padding: 0 0.5em;
}