html, body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(0deg, #ffcad4 0%, #f6a9a8 25%);
}

.slots {
  position: relative;
  width: 276.5px;
  height: 237px;
  display: flex;
  justify-content: space-between;
  padding: 23.7px;
  background: linear-gradient(45deg, grey 0%, lightgray 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  border-right: 1px solid rgba(255, 255, 255, 0.6);
  border-left: 1px solid rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  box-sizing: content-box;
}
.slots::before {
  left: 0;
  transform: translate(-200%, -50%);
}
.slots::after {
  right: 0;
  transform: translate(200%, -50%);
}
@keyframes win1 {
  0% {
    background: linear-gradient(45deg, orange 0%, yellow 100%);
    box-shadow: 0 0 80px orange;
  }
  100% {
    background: linear-gradient(45deg, grey 0%, lightgrey 100%);
    box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3);
  }
}
@keyframes win2 {
  0% {
    background: linear-gradient(45deg, lightblue 0%, lightgreen 100%);
    box-shadow: 0 0 80px lightgreen;
  }
  100% {
    background: linear-gradient(45deg, grey 0%, lightgrey 100%);
    box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3);
  }
}
.slots.win1 {
  animation: win1 200ms steps(2, end) infinite;
}
.slots.win2 {
  animation: win2 200ms steps(2, end) infinite;
}
.slots .reel {
  position: relative;
  width: 79px;
  height: 237px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  overflow: hidden;
  background-image: url(../static/images/slotreel.webp);
  background-position: 0 0;
  background-repeat: repeat-y;
}
.slots .reel::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.4) 100%);
  box-shadow: inset 0 0 6px 2px rgba(0, 0, 0, 0.3);
}
.slots p {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  transform: translate(-50%, calc(100% + 30px));
  text-align: center;
  font-size: 0.8rem;
  color: #444;
}
.slots p:last-child {
  transform: translate(-50%, calc(100% + 60px));
}
.slots p a {
  color: red;
  font-weight: 700;
}

[class*=push] {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 120px;
  border: 0;
  margin: 1em;
  outline: none;
  background-color: hsl(10, 90%, 40%);
  border-radius: 50%;
  cursor: pointer;
  transition: box-shadow 200ms;
}
[class*=push]:disabled {
  opacity: 80%;
}

.push--flat {
  box-shadow: inset 0 3.75px 0 #da2e0b, inset 0 -3.75px 0 #aa2409, inset 0 0 0 3.75px #b32609, inset 0 0 0 10px hsl(10, 90%, 40%), inset 0 0 0 12px #611405, inset 0 0 0 13.0434782609px black, inset 0 0 0 16px rgba(247, 133, 110, 0.7), inset 0 0 0 21.8181818182px hsl(10, 90%, 40%), inset 0 48px 16px #aa2409, inset 0 0 12px 20px #911f08, 0 6px 0 rgba(0, 0, 0, 0.3);
}
.push--flat:after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 12px;
  display: block;
  width: 96px;
  height: 96px;
  border: 8px solid rgba(0, 0, 0, 0.3);
  border-width: 0 0 8px;
  border-radius: 50%;
  transition-duration: 200ms;
}
.push--flat:active, .push--flat.is-pushed {
  box-shadow: inset 0 3.75px 0 #da2e0b, inset 0 -3.75px 0 #aa2409, inset 0 0 0 3.75px #b32609, inset 0 0 0 10px hsl(10, 90%, 40%), inset 0 0 0 12px #611405, inset 0 0 0 14.1176470588px black, inset 0 0 0 16px rgba(247, 133, 110, 0.2), inset 0 0 0 21.8181818182px #b32609, inset 0 48px 16px #9b2108, inset 0 0 12px 20px #791a06, 0 6px 0 rgba(0, 0, 0, 0.3);
  background-color: #b8270a;
}
.push--flat:active:after, .push--flat.is-pushed:after {
  bottom: 14px;
  border-width: 0;
}

.push--skeuo {
  box-shadow: inset 0 5px 0 #da2e0b, inset 0 -5px 2px #aa2409, 0 0 2px hsl(10, 90%, 40%), inset 0 0 4px #791a06, inset 0 0 4px rgba(51, 51, 51, 0.5), inset 0 0 2px 10px hsl(10, 90%, 40%), inset 0 -4px 3px 12px rgba(51, 51, 51, 0.7), inset 0 0 2px 12px #611405, inset 0 0 2px 12px rgba(51, 51, 51, 0.7), inset 0 0 1px 13.0434782609px black, inset 0 0 1px 15px rgba(247, 133, 110, 0.7), inset 0 6px 0 14.1176470588px rgba(244, 71, 37, 0.7), inset 0 -6px 2px 14.1176470588px rgba(145, 31, 8, 0.2), inset 0 0 0 21.8181818182px hsl(10, 90%, 40%), inset 0 48px 16px #aa2409, inset 0 0 12px 20px #911f08, 0 3px 6px rgba(0, 0, 0, 0.5);
}
.push--skeuo:active, .push--skeuo.is-pushed {
  box-shadow: inset 0 5px 0 #da2e0b, inset 0 -5px 2px #aa2409, 0 0 2px hsl(10, 90%, 40%), inset 0 0 4px #791a06, inset 0 0 4px rgba(51, 51, 51, 0.5), inset 0 0 2px 10px hsl(10, 90%, 40%), inset 0 -4px 3px 12px rgba(51, 51, 51, 0.7), inset 0 0 2px 12px #611405, inset 0 0 2px 12px rgba(51, 51, 51, 0.7), inset 0 0 3px 14.1176470588px black, inset 0 0 1px 16px rgba(247, 133, 110, 0.2), inset 0 6px 0 28px rgba(244, 71, 37, 0.5), inset 0 -6px 2px 28px rgba(97, 20, 5, 0.2), inset 0 0 0 21.8181818182px #b32609, inset 0 48px 16px #9b2108, inset 0 0 12px 20px #791a06, 0 3px 6px rgba(0, 0, 0, 0.5);
  background-color: #b8270a;
}
.push--skeuo:active:before, .push--skeuo.is-pushed:before {
  opacity: 0.5;
}
.push--skeuo:before {
  content: "";
  position: absolute;
  bottom: 26.6666666667px;
  left: 33.3333333333px;
  display: block;
  width: 54.5454545455px;
  height: 36.3636363636px;
  background: rgba(247, 133, 110, 0.2);
  background: linear-gradient(to top, rgba(250, 173, 158, 0.3) 0%, rgba(194, 41, 10, 0.1) 100%);
  border-radius: 40% 40% 60% 60%;
  transition: opacity 200ms;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}
.modal .modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 600px;
  position: relative;
}
.modal .modal-content .modal-header {
  text-align: center;
}
.modal .modal-content label {
  display: block;
  margin-top: 10px;
}
.modal .modal-content input[type=text],
.modal .modal-content input[type=email],
.modal .modal-content input[type=tel] {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  box-sizing: border-box;
}
.modal .modal-content button[type=submit] {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
}
.modal .modal-content button[type=submit]:hover {
  background-color: #45a049;
}
.modal .modal-content .terms {
  margin-top: 20px;
  text-align: center;
}
.modal .modal-content .terms a {
  color: #007bff;
  text-decoration: none;
}
.modal .modal-content .terms a:hover {
  text-decoration: underline;
}

.text-center .tulipan-img-logo {
  background-color: white;
  border-radius: 50% !important;
  padding: 5px;
  height: 16rem;
  width: auto;
}
@media screen and (max-width: 450px) {
  .text-center .tulipan-img-logo {
    height: auto;
    width: 60%;
  }
}

@font-face {
  font-family: "Lobster";
  src: url("../static/fonts/Lobster-Regular.ttf");
}
.col-12 #tulipan-title {
  font-family: "Lobster";
  color: #14213d;
}
@media screen and (min-width: 450px) {
  .col-12 #tulipan-title {
    font-size: 5rem;
  }
}

/*# sourceMappingURL=index.css.map */