/* Add the CSS code here */
/* .lottery-number-wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 10px;
} */
.lottery-number {
  font-size: 6vw;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  color: rgb(64, 73, 67);
  background-image: radial-gradient(circle, #ffb4ec, #ff99e6, #ff7cdf, #ff58d8, #ff1fd0);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  width: 10vw;
  height: 10vw;
  display: inline-block;
  text-align: center;
  line-height: 10vw;
}

.lottery-number span {
  display: inline-block; /* Make the span an inline block element */
  transition: transform 0.5s; /* Add a transition effect to the span */
}

.lottery-number span.animate {
  animation: scrollDown 1s;
}

@keyframes scrollDown {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

/* .lottery-number-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  color: #666;
} */

.lottery-number-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  color: #666;
  overflow-x: auto;
  width: 100%; /* tambahkan ini untuk memastikan lebar container sesuai dengan lebar layar */
  max-width: 100%; /* tambahkan ini untuk mencegah container melebar terlalu besar */
}

@media only screen and (min-width: 3840px) {
  .lottery-number {
    font-size: 3.5rem;
    width: 15%;
    height: 15%;
    line-height: 15%;
  }
}

.ctext {
  background: linear-gradient(to right top, #225853, #0a5245, #004c33, #00451f, #003e05);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 5px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  display: inline-block; /* Changed from flex to inline-block */
  text-align: center;
  width: 10vw; /* Keep the width, but remove height */
}

.pemenang {
  font-size: 1.5em; /* replaced with em units */
  font-weight: bold;
  color: black;
  text-align: center;
  margin-top: 20px;
}

/* For small screens (e.g., mobile phones) */
@media only screen and (max-width: 360px) {
  .pemenang {
      font-size: 0.75em; /* adjusted font size for small screens */
  }
  .ctext{
    font-size: 0.6em; /* adjusted font size for small screens */
    height: 15vh; /* adjusted height for small screens */
    width: 25vw; /* adjusted width for small screens */
  }
}

/* For medium screens (e.g., tablets) */
@media only screen and (min-width: 361px) and (max-width: 768px) {
  .pemenang {
      font-size: 1em; /* adjusted font size for medium screens */
  }
  .ctext{
    font-size: 0.8em; /* adjusted font size for medium screens */
    height: 20vh; /* adjusted height for medium screens */
    width: 30vw; /* adjusted width for medium screens */
  }
}

/* For large screens (e.g., desktops) */
@media only screen and (min-width: 769px) {
  .pemenang {
      font-size: 1.5em; /* adjusted font size for large screens */
  }
  .ctext{
    font-size: 4em; /* adjusted font size for large screens */
    height: 25vh; /* adjusted height for large screens */
    width: 40vw; /* adjusted width for large screens */
  }
}

.btnstart{
  padding: 15px 40px;
  margin: 10%;
  border: none;
  outline: none;
  color: #0c0c0c;
  cursor: pointer;
  position: relative;
  transition: scale(1.5);
  z-index: 0;
  border-radius: 12px;
}

.btnstart::after{
  content: "";
  z-index: -1;
  position: absolute;
  width: 100%;
  text-decoration-color: #3f3b3b;
  height: 100%;
  background-color: linear-gradient(to right bottom, #e5c2d6, #ebb1d5, #eea0d5, #f08ed6, #f17bd8, #f27fdb, #f282de, #f386e1, #f4a0e5, #f5b8e8, #f4cfec, #f2e6ef);;
  left: 0;
  top: 0;
  border-radius: 10px;
}

.btnstart::before{
  content: "";
  background: linear-gradient(45deg, #2b322e, #2e3629, #393821, #4a371c, #5d3320, #662c26, #6c2431, #6e1d40, #681449, #5d1053, #4c125e, #301869);
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 600%;
  z-index: -1;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  filter: blur(8px);
  animation: glowing 20s linear infinite;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
  opacity: 0;
}

@keyframes glowing{
  0%{background-position: 0 0;}
  50%{background-position: 400% 0;}
}

.btnstart:hover::before{
  opacity: 1;
}

.btnstart:active::after{
  background: transparent;
}

.btnstart:active{
  color: #911e5d;
  font-weight: bold;
}


/* For small screens (mobile devices) */
@media only screen and (max-width: 600px) {
  .btnstart {
    padding: 10px 20px;
    margin: 15px;
    font-size: 14px;
  }
}

/* For medium screens (tablets) */
@media only screen and (min-width: 601px) and (max-width: 900px) {
  .btnstart {
    padding: 12px 30px;
    margin: 20px;
    font-size: 16px;
  }
}

/* For large screens (desktops) */
@media only screen and (min-width: 901px) {
  .btnstart {
    padding: 15px 40px;
    margin: 25px;
    font-size: 18px;
  }
}