@font-face {
  font-family: "kgchasingpavements";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/kimberly-geswein_kg-chasing-pavements/kgchasingpavements-webfont.woff")
      format("woff"),
    url("../fonts/kimberly-geswein_kg-chasing-pavements/kgchasingpavements-webfont.woff2")
      format("woff2");
}
.card__wrap .main .card__img {
  width: 88%;
  margin-top: 16px;
}

/* @media screen and (min-width: 436px) {
  .card__wrap .main .card__img {
    margin-top: 5px;
  }
} */

.card__wrap .bookmark-switch-text {
  margin-top: -23%;
}
.markup-interactive {
  position: relative;
}
.main {
  position: relative;
}

.text-confirm-answer {
  font-size: 16px;
  text-align: center;
  font-weight: 400;
  color: grey;
  position: absolute;
  top: 34%;
  left: 57%;
  width: max-content;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: all 250ms;
  width: 40%;
}

.text-confirm-answer.transparent {
  opacity: 0;
  transition: all 250ms;
}

.for-float-wrapper .card__text {
  text-align: start;
  font-size: 18px;
  margin-top: 70px;
  margin-bottom: 30px;
}
@media screen and (min-width: 436px) {
  .for-float-wrapper .card__text {
    margin-top: 44px;
  }
}

.card__wrap .restart {
  display: flex;
  width: 32px;
  position: absolute;
  top: 55px;
  left: 86%;
  cursor: pointer;
  z-index: 2;
  opacity: 0;
  user-select: none;
  pointer-events: none;
}

.card__wrap-blocked .restart {
  display: none;
}
/* ===========
 */
.card-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.column-left,
.column-right {
  width: 25%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card,
.drop-zone {
  width: 62px;
  height: 85px;
  position: absolute;
  border-radius: 7px;
}
/* @media screen and (min-width: 436px) {
  .card,
  .drop-zone {
    width: 56px;
    height: 77px;
  }
} */

.card.active {
  z-index: 10;
  transform: scale(1.3);
}
@media screen and (min-width: 436px) {
  .card.active {
    z-index: 10;
    transform: scale(1.2);
  }
}

.card__img .card img {
  display: block;
  cursor: pointer;
  transform: scale(1.01);
}
.tiles,
.drop-zone-wrap {
  width: 103%;
  height: 103%;
  position: absolute;
}
@media screen and (min-width: 436px) {
  .tiles,
  .drop-zone-wrap {
    width: 110%;
    height: 110%;
    position: absolute;
  }
}
.tile {
  cursor: pointer;
}
.tiles {
  user-select: none;
}
.tiles img {
  user-select: none;
  pointer-events: none;
}
.tile-1,
.drop-zone-1 {
  top: -3%;
  left: 29%;
}
.tile-2,
.drop-zone-2 {
  top: 24%;
  left: 29%;
}
.tile-7,
.drop-zone-3 {
  top: 51%;
  left: 29%;
}
.tile-9 {
  pointer-events: all;
  z-index: 9;
}
.tile-9,
.drop-zone-4 {
  top: 78%;
  left: 29%;
}
.tile-3,
.drop-zone-5 {
  top: -3%;
  left: 53%;
}
.tile-4,
.drop-zone-6 {
  top: 24%;
  left: 53%;
}
.tile-5,
.drop-zone-7 {
  top: 51%;
  left: 53%;
}
.tile-8,
.drop-zone-8 {
  top: 78%;
  left: 53%;
}
.tile-9.action {
  background-color: red;
  animation: blink 1s infinite;
}
.tile-9.rotated {
  transition: transform 500ms ease;
}

.rotated {
  transform: rotate(180deg);
}

@keyframes blink {
  0% {
    background-color: red;
  }
  12.5% {
    background-color: white;
  }
  25% {
    background-color: red;
  }
  37.5% {
    background-color: white;
  }
  50% {
    background-color: red;
  }
  62.5% {
    background-color: white;
  }
  75% {
    background-color: red;
  }
  87.5% {
    background-color: white;
  }
  100% {
    background-color: red;
  }
}
.left-column,
.right-column {
  font-size: 24px;
  font-family: "kgchasingpavements";
  position: absolute;
  top: 100%;
  transform: translate(-50%, 50px);
}
.left-column {
  left: 38%;
}
.right-column {
  left: 64%;
}
.line-left.show,
.line-right.show {
  position: absolute;
  width: 21%;
  top: 100%;
  transform: translate(-50%, 38px) rotate(-9deg);
}
.line-left.show {
  left: 38%;
}
.line-right.show {
  left: 64%;
}

.card__wrap-blocked .card__img-wrapper .goal-img,
.card__wrap-blocked .tiles {
  display: none;
}
.card__wrap-blocked .explanation-img {
  display: flex;
}
.card__wrap-blocked .left-column,
.card__wrap-blocked .right-column,
.card__wrap-blocked .line-left.show,
.card__wrap-blocked .line-right.show {
  top: 91%;
}