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

body{
  margin:0;
  background:#0b0b0b;
  color:#eaeaea;
  font-family:'VT323', monospace;
  font-size:20px;
}

/* ================= NAV ================= */
.nav{
  width:100%;
  background:#111;
  border-bottom:1px solid #222;
  padding:14px 0;
  position:sticky;
  top:0;
  z-index:50;
}

.nav-inner{
  max-width:1000px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 20px;
}

.logo{
  font-size:32px;
  letter-spacing:0.15em;
}

nav a{
  margin-left:20px;
  color:#eaeaea;
  text-decoration:none;
  font-size:20px;
  opacity:.8;
  transition:.2s;
}

nav a:hover{
  opacity:1;
}

/* ================= SECTIONS ================= */
.section{
  padding:100px 20px;
}

.wrapper{
  max-width:750px;
  margin:auto;
  padding:40px;
  background:#111;
  border:1px solid #222;
}

/* ================= BANNER ================= */
.banner{
  width:100%;
  border:1px solid #333;
  margin-bottom:30px;
}

/* ================= HEADINGS ================= */
h1, h2, h3{
  text-align:center;
  letter-spacing:0.1em;
}

.sub{
  text-align:center;
  font-size:18px;
  opacity:.7;
  margin-bottom:20px;
}

.supply{
  text-align:center;
  margin-bottom:16px;
  font-size:20px;
}

/* ================= MINT CARD ================= */
.card{
  border:1px solid #333;
  padding:22px;
}

input{
  width:100%;
  padding:14px;
  background:#000;
  border:1px solid #333;
  color:#fff;
  font-size:20px;
  margin-bottom:12px;
}

button{
  width:100%;
  padding:16px;
  font-size:20px;
  cursor:pointer;
  border:none;
  margin-top:6px;
  font-family:'VT323', monospace;
  letter-spacing:0.05em;
}

.primary{
  background:#fff;
  color:#000;
}

.outline{
  background:transparent;
  border:1px solid #444;
  color:#fff;
}

.status{
  margin-top:14px;
  font-size:18px;
  white-space:pre-wrap;
}

/* ================= TEXT ================= */
.text{
  font-size:20px;
  line-height:1.6em;
  opacity:.85;
}

/* ================= COLLECTION CARDS ================= */
.collection-card{
  border:1px solid #333;
  padding:24px;
  margin-top:20px;
  background:#0d0d0d;
}

.btn{
  display:inline-block;
  margin-top:12px;
  padding:12px 24px;
  border:1px solid #fff;
  color:#fff;
  text-decoration:none;
  font-size:20px;
  transition:.2s;
}

.btn:hover{
  background:#fff;
  color:#000;
}

/* ================= FOOTER ================= */
.footer{
  padding:40px 0;
  text-align:center;
  opacity:.5;
  font-size:20px;
}