@import url('https://fonts.googleapis.com/css2?family=Exo+2&display=swap');



:root {
  --theme-color: #1d9bf0;  /* twitter color 1d9bf0 */
  --theme-color-hover: #e7f4fd;
}

	a { text-decoration: none; } a:hover {font-weight: 800;}

	body, body * {
		 font-family: 'Exo 2', sans-serif;
	}

	body {	 
	  margin: 0;
	  padding: 0;
	  background-color: black;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  height: 100vh; /* Full viewport height */
	}

	.container {
	  text-align: center;
	}


	.user_input {
	  width: calc(min(90vw, 400px));
	  height: 40px;
	  padding: 10px;
	  border-radius: 10px;
	  border: 1px solid #ccc;
	  background-color: white;
	  margin-bottom: 20px;
	}

	.user_input:hover {
		background-color: var(--theme-color-hover);
	}

	.button-container {
		text-align: center;
		display: flex;
		flex-wrap: wrap; /* Enable wrapping */
		flex-direction: column;
		gap: 10px; /* Add some space between the buttons */
		justify-content: center; /* Center-align the buttons */
	}


	.wallet-button {
		display: inline-flex; 
		align-items: center; /* Vertical alignment */
		justify-content: center; 
	  min-width: 240px;
	  height: 35px;
	  border-radius: 10px;
	  background-color: #d9d9d9;

	  color: black;
	  border: none;
	  padding: 5px 10px; 
	}

	.wallet-connect-button {
	  display: flex;
	  align-items: center;
      justify-content: center;
	  flex-wrap: nowrap;	
	  min-width: 240px;

	}


select.wallet-button {
  -webkit-appearance: none;  /* Remove default arrow in Chrome and Safari */
  -moz-appearance: none;     /* Remove default arrow in Firefox */
  appearance: none;          /* Generic rule */
  background-image: none;    /* Optional: Remove any background image set by the browser */
}

select:disabled {
  /* Your styles here to make it look like a normal select box 
   not working */
  background-color: white !important;
  color: black;
  /* etc. */
}


.QR, .QR *, #last_tx, #last_tx * {
	color: white;
	padding-bottom: 10px;
}

.QR a, .QR * a, #last_tx a, #last_tx * a {
    text-decoration: underline;
	text-decoration-color: var(--theme-color);

}

#pairing-string {
  max-width: calc(min(90vw, 200px)); 
  /* max-width: 90vw;  /* Maximum width of 90% of viewport */
  word-wrap: break-word;  /* Breaks the words to the next line */
  white-space: normal;  /* Overrides any inherited white-space setting */
  overflow-wrap: break-word;  /* Breaks unbreakable string */
  margin: 5px, 5px;
}

	#hiddenDiv > * {
	  margin: 5px; /* Adjust the margin as needed */
	}

#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}