/* ============================= */
/* BASE                          */
/* ============================= */

* {
  box-sizing: border-box;
}

body{
  margin:0;
  background:#0b0b0f;
  color:#fff;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Top padding accounts for fixed banner */
  padding:80px 42px 42px;
}


/* ============================= */
/* TOPBAR                        */
/* ============================= */

.topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;

  padding:14px 20px;
  display:flex;
  align-items:center;
  gap:12px;

  background:rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.1);
}

.topbar-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:#fff;
  text-decoration:none;
  padding:9px 12px;
  border-radius:999px;
  font-weight:700;
  transition:.15s ease;
  white-space:nowrap;
}

.topbar-btn:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(139,92,246,.45);
}


/* ============================= */
/* LAYOUT WRAPPER                */
/* ============================= */

.wrap{
  max-width:720px;
  margin:0 auto;
}


/* ============================= */
/* LINKS / BUTTON STYLE          */
/* ============================= */

a{
  color:#fff;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.16);
  padding:12px 14px;
  border-radius:12px;
  display:inline-block;
  margin:10px 10px 0 0;
  transition:.15s ease;
}

a:hover{
  background:rgba(255,255,255,.06);
}


/* ============================= */
/* TEXT                          */
/* ============================= */

p{
  opacity:.85;
  line-height:1.5;
}