body {
	font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
	background-image: linear-gradient(to right, #30A7D7, #000000); /* Left to right fade */
	color: #ffffff;
	margin: 0;
	padding: 0;
	height: 100vh; /* Fill the whole page */
}

.nav-dropdown {
	padding: 10px 16px;
	background: rgba(0,0,0,0.3);
	display: flex;
	align-items: center;
	gap: 10px;
}

.nav-dropdown select {
	background: #1a1a2e;
	color: #ffffff;
	border: 1px solid #30A7D7;
	border-radius: 4px;
	padding: 6px 10px;
	cursor: pointer;
}

.container-1 {
	max-width: 800px;
	margin: 50px auto;
	padding: 40px;
	background-color: #000000; 
	background-image: url('top.jpg'); 
	background-size: cover; 
	background-repeat: no-repeat; 
	background-position: center; 
	border-radius: 15px;
	transition: box-shadow 0.3s ease;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.container-1:hover {
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.container-2 {
	max-width: 800px;
	margin: 50px auto;
	padding: 40px;
	background-color: #000000; 
	background-image: url('bottom.jpg'); 
	background-size: cover; 
	background-repeat: no-repeat; 
	background-position: center; 
	border-radius: 15px;
	transition: box-shadow 0.3s ease;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.container-2:hover {
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.header-logo {
	font-size: 28px;
	font-weight: bold;
	color: #ffffff;
}

.header-buttons {
	display: flex;
	gap: 15px;
}

button, .btn {
	padding: 10px 30px;
	border: none;
	border-radius: 20px;
	background-color: #128FAE;
	color: #ffffff;
	cursor: pointer;
	font-weight: 500;
	transition: background-color 0.3s ease;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

button:hover, .btn:hover {
	background-color: #0A6B8D;
}

.actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 40px;
}

.reward-section {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
}

.select {
	padding: 10px 15px;
	border: none;
	border-radius: 20px;
	background-color: #4a4b4d;
	color: #ffffff;
	margin-right: 15px;
}

#userInfo {
display: none;
margin-top: 30px;
border-top: 2px solid #4a4b4d;
padding-top: 20px;
}

.balance-info {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #4a4b4d;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.balance-info:last-child {
	border-bottom: none;
}

.balance-info p {
	margin: 10px 0;
}

h2, h3 {
	margin-top: 20px;
	margin-bottom: 10px;
}

label {
	margin-right: 10px;
}

.action-block {
	margin-top: 20px;
	display: flex;
	align-items: center;
	gap: 15px;
}

.container-1 div:nth-child(1), .container-1 p {
	margin-bottom: 20px;
}

.flex-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 50%; /* Adjust this value as per original div height */
}

/* Media queries for mobile devices */
@media screen and (max-width: 768px) {
	
	button, .btn {
		padding: 1.5vw 4vw; /* Slightly reduce dynamic padding */
		font-size: 3vw; /* Reduce font size for smaller screens */
		margin-bottom: 1vw; /* Maintain bottom margin for spacing */
		max-width: 70%; /* Reduce maximum width */
		min-width: 120px; /* Slightly reduce minimum width */
		border-radius: 15px; /* Adjust border-radius for smaller buttons */
	}
}

/* Add margin to the bottom of the dropdown */
#poolDropdown {
margin-bottom: 20px; /* Adjust the value as needed */
}

/* Notification styles */
.notification {
	position: fixed; /* Changed from relative to fixed */
	top: 50%; /* Center vertically */
	left: 50%; /* Center horizontally */
	transform: translate(-50%, -50%); /* Adjust to be exactly in the center */
	padding: 20px;
	background-color: rgba(255, 255, 255, 0.10);
	border: 1px solid #ccc;
	border-radius: 10px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.5s linear;
	z-index: 1000; /* Ensure it's above other elements */
}

.notification.show {
	visibility: visible;
	opacity: 1;
}

.notification .message {
	margin-bottom: 20px;
}

.notification-success {
	background-color: #90EE90; /* Light Green */
}

.notification-failure {
	background-color: #FF7F7F; /* Light Red */
}

/* Spinner styles */
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.spinner {
	position: fixed;
	bottom: 75%; /* 70% up from the bottom */
	right: 47.5%; /* Centered horizontally */
	transform: translate(-50%, 50%); /* Adjust for exact centering */
	border: 8px solid #f3f3f3;
	border-top: 8px solid #007BFF;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: spin 1s linear infinite;
	display: none;
	opacity: 0.618;
}

/* Status icon styles */
.status-icon {
	width: 24px;
	height: 24px;
	margin-left: 5px;
	display: none; /* This ensures the icons are hidden by default */
}

/* Transaction status styles */
.transaction-status {
	margin-top: 10px;
	font-weight: bold;
}

/* Success icon styles */
.success-icon {
	fill: #28a745;
}

/* Failure icon styles */
.failure-icon {
	fill: #dc3545;
}
}
}