@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
* {font-family: 'VT323', monospace !important;}
html, body {
  display: flex; justify-content: center; align-items: center; height: 100vh;
  padding: 0;
  margin: 0;
  font-family: monospace;
  font-size: 16px; /* Adjust base font size */
  user-select: none;
  text-align: center;
  width: 100%;
  background: #e5e3c5;
}

#rapper {
  display: block;
  max-width: 800px; /* Set a max-width for larger screens */
  width: 90%; /* Use percentage for flexible width */
  margin: 0 auto;
}

hr {
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  outline: none;
  margin: 2rem 0;
}

#currency {
  background: #496253;
  font-size: 5rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 2rem;
  color: #e5e3c5;
  font-family: monospace;
  user-select: none;
  border-bottom: 10px solid #38524c;
}
li {display:inline}
button {
  outline: none;
  border: 0;
  padding: 1rem 2rem;
  background: #d2d8c4;
  color: #4b4b4b;
  cursor: pointer;
  transition: all .2s linear;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: inline-block;
  width: 40%;
  min-height: 80px;
  vertical-align: top;
  font-size: 1.5rem;
}

button:hover {
  background: #96aa8f;
  color: #426655;
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>👆</text></svg>") 16 0,auto; /*!emojicursor.app*/
}

button:active {
  transform: translateY(4px);
}

#stats {
  list-style: none;
  padding: 0;
  color: #4b4b4b;
  font-weight: bold;
  font-size: 1.5rem;
}

h1 {
  color: #496253;
  margin: 4rem 0;
  text-transform: uppercase;
  letter-spacing: -1.7px;
  font-weight: 100;
  font-size: 6rem;
}
a:link, a:visited {
  font-size: 2rem;
  color: #4b4b4b;
  text-decoration: none;
  outline: 0;
}
a:hover, a:active {
  text-decoration: underline;
  color: #38524c;
}

a:focus {outline:0}
#claim {font-size:1.5rem;  background: transparent; color: #4b4b4b; border:0}
#claim:hover {
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>👆</text></svg>") 16 0,auto; /*!emojicursor.app*/
}

#aftersubmit, #checkOrderStatusButton, #sendBtcButton {display: none; margin:0 auto}
#aftersubmit * {font-size: 1.69rem}
#timer {position:absolute; bottom:0; font-size:2rem; color:#4b4b4b}
#leaders {position:absolute; top:25px; right:25px; font-size:2rem; color:#4b4b4b}
/* Responsive adjustments */
@media (max-width: 768px) {
  /* Adjustments for tablets and smaller devices */
  html, body {
    font-size: 14px; /* Smaller base font size */
  }

  .wrapper {
    width: 95%; /* Increase width on smaller screens */
  }

  h1 {
    font-size: 3.5rem; /* Smaller font size for h1 */
    margin:2rem 0;
  }

  #currency {
    font-size: 5rem; /* Adjust font size for currency, buttons, and stats */
  }

  button {
    font-size: 1.5rem; /* Adjust font size for currency, buttons, and stats */
  }

  button {
    width: 80%; /* Increase button width */
    padding: 0.5rem 1rem; /* Adjust padding */
  }

  #stats li {
    font-size: 1rem;
  }
}