body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #e0f7fa, #b2dfdb);
  color: #1a3c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  line-height: 1.6;
  position: relative;
}
body.dark-mode {
  background: #000000;
  color: #00FFFF;
}
body.dark-mode * {
  color: #00FFFF;
}
body.dark-mode header {
  background: rgba(0, 0, 0, 0.85);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
body.dark-mode .content {
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid #26a69a;
  border-radius: 8px;
}
body.dark-mode .roadmap, body.dark-mode .featured-nft, body.dark-mode .impact-tracker, body.dark-mode #wallet-section {
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid #26a69a;
}
body.dark-mode .roadmap:hover, body.dark-mode .featured-nft:hover, body.dark-mode .impact-tracker:hover, body.dark-mode #wallet-section:hover {
  transform: translateY(-5px);
  background: rgba(0, 0, 0, 0.9);
}
body.dark-mode footer {
  background: rgba(0, 0, 0, 0.85);
}
body.dark-mode .button, body.dark-mode #donate-amount {
  background: linear-gradient(135deg, #26a69a, #000000);
  color: #00FFFF;
  border: none;
}
body.dark-mode .button:hover, body.dark-mode #donate-amount:focus {
  background: linear-gradient(135deg, #00695c, #000000);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
body.dark-mode #darkModeToggle {
  background: #fff;
  color: #00FFFF;
  border: 1px solid #26a69a;
}
body.dark-mode #darkModeToggle:hover {
  background: #e0f7fa;
  transform: scale(1.05);
}
body.dark-mode .modal-content {
  background: linear-gradient(135deg, #1c2526, #13282c);
  border: 2px solid #26a69a;
}
body.dark-mode .modal-content h3, body.dark-mode .modal-content p {
  color: #e0f7fa; /* Higher contrast for readability in dark mode */
}
body.dark-mode .modal-close {
  color: #e0f7fa;
}
body.dark-mode .modal-close:hover {
  color: #26a69a;
}
header {
  text-align: center;
  padding: 2rem 0;
  background: linear-gradient(135deg, rgba(178, 223, 219, 0.7), rgba(178, 223, 219, 0.3));
  width: 100%;
  position: relative;
  overflow: hidden;
  z-index: 5;
}
header::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: url('https://www.transparenttextures.com/patterns/wave.png') repeat;
  opacity: 0.1;
  animation: waveMove 15s infinite linear;
  z-index: 0;
}
@keyframes waveMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-50%, 50%); }
}
header h1 {
  font-size: 3rem;
  color: #0d4536;
  margin: 1rem 0;
  text-shadow: 2px 2px 6px rgba(13, 69, 54, 0.4);
  font-family: 'Roboto', sans-serif;
  position: relative;
  z-index: 10;
  pointer-events: none;
}
header p {
  font-size: 1.375rem;
  color: #0d4536;
  margin: 0;
  position: relative;
  z-index: 10;
  pointer-events: none;
}
.logo {
  width: 10rem;
  height: auto;
  border-radius: 1rem;
  border: 4px solid #0d4536;
  margin: 1.25rem auto;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  z-index: 10;
  animation: float 2s infinite ease-in-out;
}
.logo:hover {
  transform: scale(1.1) rotate(3deg);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.content {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  padding: 2rem;
  margin: 6rem 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  max-width: 60rem;
  width: 90%;
  border: 2px solid rgba(38, 166, 154, 0.5);
  text-align: center;
  animation: fadeIn 0.5s ease-out;
  z-index: 5;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.content h2, .content h3 {
  color: #0d4536;
  margin-bottom: 1.5rem;
  font-family: 'Roboto', sans-serif;
  position: relative;
  padding-bottom: 0.5rem;
  z-index: 10;
  pointer-events: none;
}
.content h2::after, .content h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3rem;
  height: 2px;
  background: #26a69a;
  transition: width 0.3s ease;
}
.content h2:hover::after, .content h3:hover::after {
  width: 6rem;
}
.content p {
  font-size: 1.125rem;
  color: #37474f;
  margin-bottom: 1.5rem;
  z-index: 10;
  pointer-events: none;
}
.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 2rem 0;
  z-index: 10;
  position: relative;
  pointer-events: none;
}
.button {
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
  color: #fff;
  background: linear-gradient(135deg, #26a69a, #00695c);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  text-decoration: none;
  min-width: 12.5rem;
  position: relative;
  overflow: hidden;
  z-index: 10;
  pointer-events: auto;
}
.button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}
.button:hover::before {
  width: 20rem;
  height: 20rem;
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
  background: linear-gradient(135deg, #00695c, #003d33);
}
#token-info, #balance-info, #impact-tracker {
  font-size: 1.125rem;
  color: #0d4536;
  z-index: 10;
  position: relative;
  pointer-events: auto;
}
#donate-section {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
#donate-amount {
  padding: 0.75rem;
  font-size: 1.125rem;
  color: #37474f;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #26a69a;
  border-radius: 0.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
#donate-amount:focus {
  outline: none;
  border-color: #00695c;
  box-shadow: 0 0 8px rgba(0, 105, 92, 0.3);
}
#darkModeToggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: #fff;
  color: #0d4536;
  border: 1px solid #26a69a;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  pointer-events: auto;
}
#darkModeToggle:hover {
  background: #e0f7fa;
  transform: scale(1.05);
}
.loader {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid #26a69a;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.featured-nft {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: rgba(178, 223, 219, 0.3);
  backdrop-filter: blur(5px);
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.5s ease-out;
  text-align: center;
}
.featured-nft img {
  max-width: 15rem;
  height: auto;
  border: 2px solid #26a69a;
  border-radius: 0.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
  z-index: 10;
  pointer-events: auto;
}
.featured-nft img:hover {
  transform: scale(1.05);
}
.roadmap, .impact-tracker {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: rgba(178, 223, 219, 0.4);
  backdrop-filter: blur(5px);
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.5s ease-out;
}
.roadmap ul {
  list-style: none;
  padding: 0;
  text-align: left;
  z-index: 10;
  pointer-events: none;
}
.roadmap li {
  margin: 1.25rem 0;
  font-size: 1.125rem;
  color: #0d4536;
  position: relative;
  padding-left: 2rem;
  opacity: 0;
  animation: slideIn 0.5s ease-out forwards;
  animation-delay: calc(var(--order) * 0.2s);
  pointer-events: none;
}
.roadmap li::before {
  content: "✔";
  color: #26a69a;
  position: absolute;
  left: 0;
  font-weight: bold;
}
.roadmap li.in-progress::before {
  content: "▶";
  color: #ffca28;
}
.roadmap li.future::before {
  content: "○";
  color: #b0bec5;
}
@keyframes slideIn {
  0% { opacity: 0; transform: translateX(-20px); }
  100% { opacity: 1; transform: translateX(0); }
}
footer {
  background: linear-gradient(135deg, #0d4536, #003d33);
  color: #fff;
  text-align: center;
  padding: 1rem 0;
  width: 100%;
  margin-top: 2rem;
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.2);
  animation: fadeIn 0.5s ease-out 0.4s backwards;
  z-index: 5;
}
.warning {
  color: #ff0000;
  font-weight: bold;
  margin-top: 1rem;
}
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.3s ease-out;
}
.modal-content {
  background: linear-gradient(135deg, #e0f7fa, #b2dfdb);
  padding: 2rem;
  border-radius: 1rem;
  border: 2px solid #26a69a;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  max-width: 90%;
  width: 30rem;
  text-align: center;
  position: relative;
  z-index: 1001;
  animation: scaleIn 0.3s ease-out;
  overflow-y: auto; /* Added to handle long content */
}
@keyframes scaleIn {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.modal-content h3 {
  color: #0d4536;
  font-family: 'Roboto', sans-serif;
  margin-bottom: 1rem;
}
.modal-content p {
  font-size: 1rem;
  color: #37474f;
  margin: 0.5rem 0;
}
.modal-content #modal-seed-phrase {
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  word-break: break-word; /* Wrap long seed phrases */
  line-height: 1.5;
  display: inline-block;
  text-align: left;
}
body.dark-mode .modal-content #modal-seed-phrase {
  color: #e0f7fa; /* Higher contrast for dark mode */
}
.modal-content .button {
  margin: 0.5rem 0;
  width: 100%;
}
.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  color: #0d4536;
  cursor: pointer;
  transition: color 0.3s ease;
  z-index: 1002;
  pointer-events: auto;
}
.modal-close:hover {
  color: #26a69a;
}
#vanity-warning {
  color: #ffca28;
  font-size: 0.9rem;
  margin: 0.5rem 0;
}
@media (max-width: 600px) {
  header h1 { font-size: 2rem; }
  .content { padding: 1rem; margin: 4rem 0.75rem; width: 95%; }
  .button { padding: 0.5rem 1rem; font-size: 1rem; min-width: 8.75rem; }
  .buttons { gap: 0.75rem; }
  .logo { width: 7.5rem; }
  .featured-nft img { max-width: 9.375rem; }
  #darkModeToggle { top: 0.5rem; right: 0.5rem; padding: 0.25rem 0.75rem; font-size: 0.875rem; }
  #donate-amount { width: 8.75rem; }
  .modal-content { padding: 1.5rem; width: 95%; }
  .modal-content #modal-seed-phrase { font-size: 0.8rem; }
}