/* * {

  transition: .4s;
}  */
.item {
  height: 100%;
}
.questions {
  height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
}
.question {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}
.dropdown {
  height: 100%;
  border: 4px solid #3d3d3d;
  box-shadow: 5px 5px 2px gray;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background-image: url("../assets/images/ex-images/question-mark.jpg");
  background-size: 85% 85%;
  background-position: center;
  background-repeat: no-repeat;
}
.dropdown.show {
  overflow: visible;
}
.options {
  position: absolute;
  z-index: 999999999;
  transform: translateY(0rem);
  transition: 0.4s;
  display: flex;
}
.options.show {
  top: 99px;
  left: 50%;
  transform: translateX(-50%);
}
.dropdown.show .options::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  border: 20px solid transparent;
  border-bottom: 20px solid black;
  z-index: 999999999999999999;
}
.option {
  width: 90px;
  border: 2px solid black;
  cursor: pointer;
  display: inline-block;
  background-color: #fff;
  padding: 0.3rem;
}
.option:first-child {
  border-right: none;
}
.option:last-child {
  border-left: none;
}
.option img {
  width: 100%;
}
.number {
  width: 95px;
  display: inline-block;
  padding: 0.3rem;
}

.number img {
  width: 100%;
  height: 100%;
}
.operator {
  width: 60px;
  display: inline-block;
}
.operator img {
  width: 100%;
}

img.wrong {
  width: 100%;
}

.green_border {
  border-color: green !important;
  padding: 0.3rem;
}
.red_border {
  border-color: red !important;
  padding: 0.3rem;
}
