.modal-content {
  background-color: #fff0 !important;
  border: var(--bs-modal-border-width) solid rgb(0 0 0 / 0%) !important;
}

.modal-footer {
  border-top: var(--bs-modal-footer-border-width) solid #dee2e600 !important;
}

.text_color {
  color: red;
  text-shadow:
    -1px -1px 0 white,
    1px -1px 0 white,
    -1px 1px 0 white,
    1px 1px 0 white;
}

.spin {
  animation: spin 1s linear;
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

.slot-machine__reel-container {
  display: inline-block;
  overflow: hidden;
  width: 9vw;
  height: 25vw;
  margin: 10px;
}


.slot-machine__reel-1 {
  position: absolute;
  left: 0;
  width: 16%;
  height: 14400px;
  background-image: url(../images/reel1.png);
  background-repeat: repeat-y;
  background-size: contain;
  transition: margin-top 4s ease 0s;
}

.slot-machine__reel-2 {
  position: absolute;
  left: 16.8%;
  width: 16%;
  height: 14400px;
  background-image: url(../images/reel2.png);
  background-repeat: repeat-y;
  background-size: contain;
  transition: margin-top 3s ease 0s;
}

.slot-machine__reel-3 {
  position: absolute;
  left: 33.5%;
  width: 16%;
  height: 14400px;
  background-image: url(../images/reel3.png);
  background-repeat: repeat-y;
  background-size: contain;
  transition: margin-top 7s ease 0s;
}

.slot-machine__reel-4 {
  width: 100%;
  height: 14400px;
  background-image: url(../images/reel4.png);
  background-repeat: repeat-y;
  background-size: contain;
  transition: margin-top 3s ease 0s;
  position: absolute;
  right: 33.8%;
  width: 16%;
}

.slot-machine__reel-5 {
  position: absolute;
  right: 16.8%;
  width: 16%;
  height: 14400px;
  background-image: url(../images/reel5.png);
  background-repeat: repeat-y;
  background-size: contain;
  transition: margin-top 4s ease 0s;
}

.slot-machine__reel-6 {
  position: absolute;
  right: 0;
  width: 17%;
  height: 14400px;
  background-image: url(../images/reel6.png);
  background-repeat: repeat-y;
  background-size: contain;
  transition: top 7s ease 0s;
}

.slot-machine__reel-1 {
  top: -5000px;
}

.slot-machine__reel-2 {
  top: -5300px;
}

.slot-machine__reel-3 {
  top: -5500px;
}

.slot-machine__reel-4 {
  top: -5700px;
}

.slot-machine__reel-5 {
  top: -5900px
}

.slot-machine__reel-6 {
  top: -6100px;
}

.modal_flex {
  display: flex;
  position: relative;
  justify-content: center;

  background-image: url(../images/pop.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.modal_text {
  position: absolute;
  text-align: center;
  color: white;
  font-size: 15px;
  line-height: 29px;
  margin: 29vw 10px 1px;
}

.modal-content {
  align-items: center;
}

@media only screen and (max-width: 768px) {
  .slot-machine__reel-container {
    width: 26vw;
    height: 101vw;
  }

  .slot-machine__reel-1 {
    left: 7px;
    width: 15%;
  }

  .slot-machine__reel-2 {
    left: 18.3%;
    width: 15%;
  }

  .slot-machine__reel-3 {
    left: 34.4%;
    width: 15%;
  }

  .slot-machine__reel-4 {
    left: 50%;
    width: 15%;
  }

  .slot-machine__reel-5 {
    left: 66.5%;
    width: 15%;
  }

  .slot-machine__reel-6 {
    left: 82%;
    width: 15%;
  }
}

.reel1-animating {
  animation-fill-mode: both;
  animation-duration: 4s;
  animation-name: reel1;
}

.reel2-animating {
  animation-fill-mode: both;
  animation-duration: 2s;
  animation-name: reel2;
}

.reel3-animating {
  animation-fill-mode: both;
  animation-duration: 3s;
  animation-name: reel3;
}

.reel4-animating {
  animation-fill-mode: both;
  animation-duration: 4s;
  animation-name: reel4;
}

.reel5-animating {
  animation-fill-mode: both;
  animation-duration: 5s;
  animation-name: reel5;
}


.reel6-animating {
  animation-fill-mode: both;
  animation-duration: 6s;
  animation-name: reel6;
}

@keyframes reel1 {
  0% {
    top: -5000px;
  }

  100% {
    top: 0;
  }
}

@keyframes reel2 {
  0% {
    top: -5300px;
  }

  100% {
    top: 0;
  }
}

@keyframes reel3 {
  0% {
    top: -5500px;
  }

  100% {
    top: 0;
  }
}

@keyframes reel4 {
  0% {
    top: -5700px;
  }

  100% {
    top: 0;
  }
}


@keyframes reel5 {
  0% {
    top: -5900px;
  }

  100% {
    top: 0;
  }
}


@keyframes reel6 {
  0% {
    top: -6100px;
  }

  100% {
    top: 0;
  }
}