.markup-interactive {
  position: relative;
}
.card__wrap .main .card__img {
  width: 100%;
}
/* @media screen and (min-width: 436px) {
  .card__wrap .main .card__img {
    width: 93%;
  }
} */
.what-speed-to-choose {
  width: 29%;
  margin-left: 11px;
  margin-top: 111px;
  display: flex;
  align-items: center;
  margin-bottom: 0;
  float: right;
  shape-outside: inset(50% 0% 0% 8%);
  z-index: 5;
  transition: all 1500ms;
}

@media screen and (min-width: 436px) {
  .what-speed-to-choose {
    width: 29%;
    margin-top: 113px;
    margin-bottom: 14px;
    shape-outside: inset(53% 0% -73% 13%);
    transition: all 700ms;
  }
}
.what-speed-to-choose.winner {
  margin-top: 111px;
  shape-outside: inset(42% 0% 0% 8%);
  transition: all 700ms;
}
@media screen and (min-width: 436px) {
  .what-speed-to-choose.winner {
    margin-top: 115px;
    shape-outside: inset(48% 0% -73% 14%);
    transition: all 700ms;
  }
}
.text-confirm-answer {
  font-size: 16px;
  font-weight: 400;
  color: grey;
  position: absolute;
  top: 92%;
  /* right: 0; */
  left: 31%;
  width: 100%;
  /* transform: translate(-82%, 50%); */
  opacity: 1;
  transition: all 250ms;
}
@media screen and (min-width: 436px) {
  .text-confirm-answer {
  }
}
.text-confirm-answer.transparent {
  opacity: 0;
  transition: all 250ms;
}
.for-float-wrapper .card__text {
  text-align: start;
}
.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.changer {
  width: 45px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 15px;
}
.arrow {
  display: none; /* Hide the arrow */
  width: 0;
  height: 0;
  border: 10px solid transparent;
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.up-arrow::after,
.down-arrow::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  z-index: 1;
}
.up-arrow::after {
  border-width: 0 25px 43.3px 25px; /* 43.3 = 25 * tan(30°) */
  border-color: transparent transparent green transparent;
  top: -21.6px;
  left: -25px;
}
.down-arrow::after {
  border-width: 43.3px 25px 0 25px; /* 43.3 = 25 * tan(30°) */
  border-color: green transparent transparent transparent;
  bottom: -21.6px;
  left: -25px;
}
.digit {
  font-size: 22px; /* Increased font size */
  margin-bottom: 0px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; /* Prevent text selection */
  color: navy;
}
.digit-x {
  position: absolute;
  color: black;
  top: 50%;
  -webkit-transform: translate(50px, -50%);
  -ms-transform: translate(50px, -50%);
  transform: translate(50px, -50%);
  display: none;
}
.triangle {
  width: 0;
  height: 0;
  border-left: 24px solid transparent;
  border-right: 24px solid transparent;
  position: relative;
  cursor: pointer;
}
.triangle.up {
  border-bottom: 37.3px solid green; /* 43.3 = 25 * tan(30°) */
  margin-bottom: 5px;
}
.triangle.down {
  border-top: 37.3px solid green; /* 43.3 = 25 * tan(30°) */
  margin-top: 5px;
}
.digit-container {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* Add this line */
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; /* Add this line */
}
.inactive {
  cursor: default;
  opacity: 0.4;
  -webkit-filter: grayscale();
  filter: grayscale();
}
.moveable {
  position: absolute;
}
#moveable-image1 {
  cursor: pointer;
  width: 45px;
  height: 82px;
  top: 20%;
  left: 90px;
  z-index: 30;
}
@media screen and (min-width: 436px) {
  #moveable-image1 {
    top: 20%;
    left: 92px;
  }
}
.click-path {
  width: 35%;
  height: 35%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 2;
}
.main .card__img .speedometer-needle {
  z-index: 1;
  display: flex;
  position: absolute;

  transition: all 500ms;
}
.speedometer-needle {
  transform: rotate(-90deg);
}
.speedometer-needle.speedometer-needle-0 {
  transform: rotate(-90deg);
}
.speedometer-needle.speedometer-needle-5 {
  transform: rotate(-81deg);
}
.speedometer-needle.speedometer-needle-10 {
  transform: rotate(-76deg);
}
.speedometer-needle.speedometer-needle-15 {
  transform: rotate(-70deg);
}
.speedometer-needle.speedometer-needle-20 {
  transform: rotate(-63deg);
}
.speedometer-needle.speedometer-needle-25 {
  transform: rotate(-53deg);
}
.speedometer-needle.speedometer-needle-30 {
  transform: rotate(-48deg);
}
.speedometer-needle.speedometer-needle-35 {
  transform: rotate(-41deg);
}
.speedometer-needle.speedometer-needle-40 {
  transform: rotate(-32deg);
}
.speedometer-needle.speedometer-needle-45 {
  transform: rotate(-24deg);
}
.speedometer-needle.speedometer-needle-50 {
  transform: rotate(-17deg);
}
.speedometer-needle.speedometer-needle-55 {
  transform: rotate(-10deg);
}
.speedometer-needle.speedometer-needle-60 {
  transform: rotate(-1deg);
}
.speedometer-needle.speedometer-needle-65 {
  transform: rotate(7deg);
}
.speedometer-needle.speedometer-needle-70 {
  transform: rotate(14deg);
}
.speedometer-needle.speedometer-needle-75 {
  transform: rotate(21deg);
}
.speedometer-needle.speedometer-needle-80 {
  transform: rotate(29deg);
}
.speedometer-needle.speedometer-needle-85 {
  transform: rotate(36deg);
}

.speedometer-needle.speedometer-needle-90 {
  transform: rotate(44deg);
}
.speedometer-needle.speedometer-needle-95 {
  transform: rotate(50deg);
}
.speedometer-needle.speedometer-needle-100 {
  transform: rotate(57deg);
}
.speedometer-needle.speedometer-needle-105 {
  transform: rotate(66deg);
}
.speedometer-needle.speedometer-needle-110 {
  transform: rotate(74deg);
}
.speedometer-needle.speedometer-needle-115 {
  transform: rotate(82deg);
}
.speedometer-needle.speedometer-needle-120 {
  transform: rotate(89deg);
}
.speedometer-needle.speedometer-needle-125 {
  transform: rotate(99deg);
}
.speedometer-needle.speedometer-needle-130 {
  transform: rotate(105deg);
}
.speedometer-needle.speedometer-needle-135 {
  transform: rotate(111deg);
}
.speedometer-needle.speedometer-needle-140 {
  transform: rotate(119deg);
}
.for-float-wrapper .card__text {
  margin-top: 72px;
  transition: all 500ms;
}

.for-float-wrapper .card__text-explanations.show {
  margin-top: 0px;
}
@media screen and (min-width: 436px) {
  .for-float-wrapper .card__text {
    margin-top: 60px;
  }
  .for-float-wrapper .card__text-explanations.show {
    margin-top: 4px;
  }
}
.for-float-wrapper {
  margin-bottom: 20px;
  margin-top: -46px;
}
@media screen and (min-width: 436px) {
  .for-float-wrapper {
    margin-bottom: 0;
    margin-top: 0;
  }
}
.indicator {
  position: absolute;
  top: 61.7%;
  left: 39.8%;
  background-color: transparent;
  width: 13%;
  height: 5%;
  border-radius: 3px;
}
@media screen and (min-width: 436px) {
  .indicator {
    top: 61.7%;
    left: 39.7%;
    background-color: transparent;
    width: 46px;
    height: 17px;
  }
}
.indicator.error {
  animation: blink 1s infinite;
}
.indicator.winner {
  background-color: rgb(5, 241, 5);
}

@keyframes blink {
  0%,
  50%,
  100% {
    background-color: transparent;
  }
  25%,
  75% {
    background-color: red;
  }
}