/* style.css */
@font-face {
  font-family: "agbalumo";
  src:
    url("../fonts/agbalumo/Agbalumo-Regular.woff") format("woff"),
    url("../fonts/agbalumo/Agbalumo-Regular.ttf") format("truetype");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #000;
  color: #ff69b4;
  font-family: "agbalumo";

  min-height: 100vh;

  display: flex;
  flex-direction: column;

  overflow: hidden;
}

main {
  flex: 1;

  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  text-align: center;

  padding: 5px;

  overflow: hidden;
}

header {
  padding: 5px;
  border-bottom: 2px solid #ff69b4;
}

nav {
  display: flex;
  justify-content: center;
  gap: 40px;
}

nav a {
  color: #ff69b4;
  text-decoration: none;
  font-size: 18px;
  transition: 0.3s;
}

nav a:hover {
  color: white;
}

h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 5px;
  margin-top: -10px;
}

p {
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.4;
}

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

.accepted-donations {
  margin-bottom: 10px;
  font-size: clamp(0.6rem, 1vw, 0.8rem);
}

.wallet-card {
  width: min(90vw, 400px);
  max-height: 75vh;

  overflow: hidden;

  background: #111;
  border: 1px solid #ff69b4;
  border-radius: 18px;

  padding: 2vh;
  margin-bottom: 2vh;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;

  box-shadow:
    0 0 25px rgba(255, 105, 180, 0.25);
}

/* Tabs */

.tabs {
  display: flex;
  gap: 1vh;
  margin-bottom: 2vh;
}

.tab-btn {
  flex: 1;

  padding: 1.2vh;
  font-size: clamp(12px, 1.8vh, 16px);

  border: 1px solid #ff69b4;
  border-radius: 10px;

  background: #1a1a1a;
  color: #ff69b4;

  cursor: pointer;
}

/* Active tab */

.tab-btn.active {
  background: #ff69b4;
  color: black;
}

/* Content */

.tab-content {
  display: none;
  flex: 1;

  text-align: center;
}

.tab-content.active {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* QR */

.qr-image {
  width: min(50vw, 34vh);
  height: min(50vw, 34vh);

  object-fit: contain;

  background: white;
  padding: 1vh;
  border-radius: 16px;

  margin: 0 auto 2vh;

  box-shadow:
    0 0 20px rgba(255, 105, 180, 0.3);
}

/* Wallet row */

.wallet-row {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 1vh;
  flex-wrap: wrap;
}

.wallet-address {
  font-size: clamp(11px, 1.5vh, 14px);
  font-family: "Arial";

  background: #0a0a0a;
  border: 1px solid #ff69b4;

  padding: 1vh;
  border-radius: 10px;

  max-width: 100%;
  word-break: break-all;
}

.copy-btn {
  padding: 1vh 1.5vh;

  border: none;
  border-radius: 10px;

  background: #ff69b4;
  color: black;

  font-size: clamp(11px, 1.5vh, 14px);
  font-weight: bold;

  cursor: pointer;
}